The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.
TUTORIAL: CSS Transparency in Mozilla, IE, and Opera
mandarindesign.com — An extensive and easy tutorial on how to implement opacity / transparency in your images via CSS3. This tutorial tells you how to make it work in three popular browsers.
drawab- 1171 diggs
- digg it
- Dested, on 10/12/2007, -12/+3I'm under the impression that CSS3 has'nt been released for use completely yet, so why make a tutorial? That's like having a walk through up for Zelda:TP, who's gonna use it?
More of an example of whats to come than a tutorial.- illicium, on 10/12/2007, -3/+5Opacity in CSS3 is done via style="opacity: .5;" This article just shows you how to implement cross-browser alpha in browsers that don't completely support CSS3. (Except for firefox, which supports the CSS3 method.)
- soogy, on 10/12/2007, -3/+19You say "except for Firefox" like it's the world's only browser to support it. Firefox doesn't support CSS3 entirely because it's still a working draft (last updated 2006-08-28). In fact, the best CSS3-supporting browser is probably Safari, with :selection and text-shadow. Opera 9 is in second, Firefox in a close third.
- AssProphet, on 10/12/2007, -0/+2Yeah, I wouldn't consider this acceptable for widespread use at all. This site seems to slow my browser to a crawl. They are doing something Safari doesn't like.
- Xilon, on 10/12/2007, -1/+4@soogy: He never said that firefox fully supports CSS3, he said that Firefox is the only browser that supports CSS3's method of changing the opacity.
I think firefox has pretty good CSS3 support... better than Safari. Yeah maybe it's not totally compliant but I like the -moz-border-radius and other features :) - soogy, on 10/12/2007, -4/+1Xilon, I'm still right, even if that's what he meant. Why? Opera supports opacity per W3C standards. Do some research before making your comments.
- soogy, on 10/12/2007, -2/+7Really, really old page, but still very useful for beginners. One thing to note, don't bother using "-moz-opacity" anymore; Mozilla browsers now support the W3C "opacity" attribute instead.
- ReadMeTXT, on 10/12/2007, -7/+12Doesn't work in Lynx
- illicium, on 10/12/2007, -0/+15In lynx you have to use a really, really fast blink tag. :)
- Dested, on 10/12/2007, -0/+8When will these browsers learn that they need to support the current standards...
- Langford, on 10/12/2007, -0/+2I've poked around with the transparency, and other than java-script slide-shows, there isn't a huge amount of practical use for it (for my use anyhow). It would be absolutely swell if I could have an opaque object within a semitransparent parent object, but it doesn't seem to support that; If it would do that, it would be much more useful.
- soogy, on 10/12/2007, -0/+2Yep, I have to agree with the parent/child problem. Transparency being inherited is a problem, I don't know why they did it like that. The only workaround is to use a PNG-24 image for the parent's content or background, which leaves the child unaffected.
- kaffein, on 10/12/2007, -1/+1Please do not use transparency for web content... /me cries
Take a look at your CPU utilization when viewing your website w/o transparency and then with... You will notice that transparency uses a whole hell of a lot more CPU, even on pretty hoss hardware.- soogy, on 10/12/2007, -0/+4That's only when you use it on very large elements and you scroll the page, or modify content (ie. with JS). Transparency is great when you use it properly.
- sonofagunn, on 10/12/2007, -0/+1My 6 year old, 384 MB RAM Pentium 500 Mhz handled that page just fine! I think the mouseover effects (using pure CSS) are useful for image buttons.
- kaffein, on 10/12/2007, -0/+0@soogy,
I'd like to see a website using it properly.
If you have any links... Please do share! - kaffein, on 10/12/2007, -0/+0@soggy, The article in this digg is a good enough example, I've seen some pretty bad uses of it in the past. I guess if used in moderation It can be quite friendly.
I did notice that the image hover and hover opacity examples raise my CPU usage to around 75%. I'm using an amd 3000+ Barton core.
- silverwolf016, on 10/12/2007, -4/+0Question: if this is using CSS, why did none of the transparent hover effects work until I allowed Javascript with Noscript?
- BuckMeadows, on 10/12/2007, -1/+0As a deisgn tool, cool!!!
Who cares about cpu etc, I couldn't live in beigeville. - addicted68098, on 10/12/2007, -2/+1Wow thats the oldest thing I have ever seen on digg (its altleast 6 months I think)
- Dracos, on 10/12/2007, -0/+2"Opacity" is a property defined in CSS3.
"Filter" is a proprietary extension in IE only which essentially uses ActiveX as a helper app to draw the elements. It is not part of any W3C standard, and never will be.
Saying "opacity filter" is contradictory and misleading. - x788, on 10/12/2007, -0/+0i saw this exact tutorial quite a few months ago... i wonder why it just now has surfaced as important.
it's a very informative article though - Imprint, on 10/12/2007, -1/+0or you could use something like the Yahoo UI
http://developer.yahoo.com/yui/
Cross browser opacity, that keeps performance in check. - spacer, on 10/12/2007, -0/+0It's working only in Opera 9. Only way to make opacity in Opera 7,8 is to use png files....
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2008 — Content posted by Digg users is