Playing with CSS3: background opacity
Published on July 22, 2009
I am of course interested in css3 and html5, but with about 30% of italian users that still use the ******* IE6, I don’t know how long will I have to wait to really use these techniques.
BTW, css3 is so amazing that I hope it could contribute in killing IE6 (although Microsoft seems to be always soooo stupid, see Fix Outlook and their answer) that I’m not sure that the pain with IE will stop with the death of the terrible version 6.
One of my favourite features in css3 is opacity. I love opacity solutions on every media and it’s a pain that there is no way to use it safely on the web, for now.
Altough I try to validate the css on every work of mine, sometimes I’ve used the moz-opacity and the filter: alpha(opacity) trick to have opacity on IE and Firefox. The problem is that not only the div, but also its content inherits CSS opacity, so the text is harder to read, images are ugly to see, the border or some other elements are not of the expected color, and so on.
The PNG solution is a pretty good alternative, but it fails on IE6. And of course it’is boring, as you have to create your .png on Photoshop, then it is not transparent enough, then you have to do a new png, ecc.
CSS3 offer a great and quick solution with rgba (red/green/blue/alpha). It’s enough to set
background-color: rgba(255,255,255,.5);
to have a white background with 50% opacity.
There is, there is
- Here is a working example (that presents some other css3 killer feature, including the most wanted pure css rounded corners) to see how quick and affordable is this new solution. Hopefully can we use it asap on real websites.
- And yes, you can download it and test it on your computer.