24 Comments
- 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.
- 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...
- 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
- 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.
- 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 :) - 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.
- 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.
- 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.)
- 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. - 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.
- 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@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. - 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! - 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 - inactive, 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....
- kaffein, on 10/12/2007, -2/+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. - Imprint, on 10/12/2007, -2/+0or you could use something like the Yahoo UI
http://developer.yahoo.com/yui/
Cross browser opacity, that keeps performance in check. - addicted68098, on 10/12/2007, -3/+1Wow thats the oldest thing I have ever seen on digg (its altleast 6 months I think)
- BuckMeadows, on 10/12/2007, -2/+0As a deisgn tool, cool!!!
Who cares about cpu etc, I couldn't live in beigeville. - 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.
- silverwolf016, on 10/12/2007, -5/+0Question: if this is using CSS, why did none of the transparent hover effects work until I allowed Javascript with Noscript?
- 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.


What is Digg?
Digg is coming to a city (and computer) near you! Check out all the details on our