Post Archive
› August 27, 2004
Transparent Layering for CSS Testing
In my never-ending quest to see what I'm doing while working on CSS based markup, I've come up with another mini-helper tool. This one's pretty simple, the idea is to show how items relate to each other by revealing where they overlap.
To do this, you'll need 3 things:
- A PNG compatible browser (Firefox, Safari, etc)
- A transparent PNG image to use, or take this one
- One line of css: * {background-image: url("t.png");}
If you've got a PNG capable browser, you can check out the results on my test page. If you don't, imagine a bunch of blocks of varying darkness of orange. What's going on here? As items are nested within each other, the background gets darker and darker. The background image is a 10% opacity PNG that ends up overlapping (10% + 10% = 20%) with each nest. It allows for 9 levels of nesting, which I'd imagine is plenty.
I think this could be useful for the early stages of setting up a CSS layout, but what do you think? Anyone have suggestions for improvement on this idea? Maybe different colors for different element types? Maybe a favelet?
Comments
1. August 27, 2004 08:47 PM
2. August 27, 2004 09:29 PM
grayrest Posted…
Not bad, but Jesse has beat you to it. No clue if it works in safari: topographic view
3. August 27, 2004 09:49 PM
Anton Posted…
Very nice. The bookmarklet might be tough to get 100%, but it should be easy to create a local stylesheet and apply it to a page using the CSS tab in the Web Developer Extension for Firefox.
4. August 27, 2004 11:03 PM
Nate Posted…
Benjamin - I like the idea of using CSS transparency, but I think that would apply to the element (usually text) rather than the background color. Maybe there is still a way to use it some how? - it would be nice to avoid the extra files
Grayrest - thanks for the tip about the topographic bookmark, it does end up working the same (just different colors). I guess the next level up in this would be to make a style sheet that used different colored PNGs for different elements so that the transparency would be that much more effective (e.g. blue over red = purple, etc).
Anton - that's a good idea with the local stylesheet - that might be the way to go, especially if the css gets more complicated
5. August 27, 2004 11:59 PM
Stephane Posted…
You could also use the RGBA color definition (RGB+Alpha):
* { background: rgba(1, 1, 1, 0.1); }
but as far as I know it only works in Safari
I did use it a couple of time to give a little more for people browsing with Safari
6. August 28, 2004 09:04 AM
Anne Posted…
Have you noticed this makes browsers really slow? At least, my Mozilla build doesn't render that page very quickly.
7. August 28, 2004 10:51 AM
liorean Posted…
Mozilla's had trouble with alpha transparency rendering a long time, performance wise. Look at Surfin' Safari, for instance. In Safari and Opera the site feels fine, but in Mozilla it's sluggish.
8. August 28, 2004 11:20 AM
Nate Posted…
Stephane, thanks for the tip! I've made a test version which uses this technique here for anyone who wants to try it. I haven't tested every browser, but indeed Safari likes, Firefox and Opera don't. Given that this is for layout developers, it's only workable for those who do their initial build-ups in Safari.
9. August 28, 2004 11:45 PM
Stephane Posted…
« it’s only workable for those who do their initial build-ups in Safari »
Thats exactly what I do, since it's my main browser, it's easier that way. I just wish someone could do an equivalent of the Web Developer toolbar for Safari, bookmarlet are not enough. For people working in Safari, you can use different color in RGBA (see the the w3.org spec http://www.w3.org/TR/2003/CR-css3-color-20030514/ ), I never thought about it before (I use flat color) but I think I will do that from now on. Using transparency with either PNG or RGBA is a great idea, thanks Nate.
b.t.w. it's funny seeing my name and a website I design(Surfin Safari) in the same article.
10. August 29, 2004 04:49 AM
Jesse Ruderman Posted…
You might be able to speed it up in Mozilla by replacing the 10x10 PNG with a 1x1 PNG. IIRC, Mozilla has a special-case optimization for 1x1 PNGs.11. August 29, 2004 07:14 PM
Gabe Posted…
Great idea! You could also do this in FF with the Web Dev toolbar. It's under 'Information -> Display Topographic Information'
12. June 17, 2005 12:56 PM
Vika Posted…
Super!!! I've made transparent buttons, at last, using png. transparent images and putting image maps on them. So, I have a background image with buttons, drawn on it, and transparent image maps above.
Benjamin Posted…
That's a really interesting idea, actually. Extremely helpful for absolute positioning. I just wonder if the technique would be more useful with the CSS3 opacity: rule. Firefox and Mozilla support it now as well as Safari; you'd be able to view the overlap sans time in Photoshop.