CSS3 transparency has arrived. The holy grail of CSS developers. It allows the transparency to be set for a specific element and is not inherited like the old CSS2 method.
.transparency_class {color: rgba(255, 255, 255, 0.5);} The RGBa let’s you set the RGB values for Red, Green and Blue, like in a regular RGB CSS color, but then adds ‘a’ for the alpha channel. You can use this for anything that can take the CSS color property
Then there is the old CSS2 method, which has patchy implementation across the major browsers. There is one drawback with this method and that being the transparency is inherited by all child elements of the parent to which it has been applied. So that means any text you have inside an element with transparency will take it on also, and depending on how translucent you’ve set the parent, can often render it illegible.
The following class will set the transparency to 50%.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}You will notice a number of declarations.
- filter:alpha(opacity=50) – is Internet Explorer’s method. I’m not sure about IE8 which has just been recently released. It supposedly is standards compliant. We’ll see.
- -moz-opacity:0.5 – is the Firefox / Mozilla method. It works in decimal, so complete opacity is set at 1.
- -khtml-opacity: 0.5 – is the WebKit rendering method, which used in Safari, Google Chrome and Konqueror.
- opacity: 0.5 – lastly is the standards compliant declaration, which will supposedly one day be the way all of the browsers will implement transparency.
