CSS3 RGBA

Posted on January 25th, 2009 by Zen Elements 2 Comments

A straight forward guide to using the new CSS 3 ‘RGBA’ declaration, giving us not only the ability to set RGB color/colour as standard but also apply a level of opacity. There is also the quick + / – guide to which browsers support the herein effect.

The RGBA declaration sets color/colour as standard RGB does but the ‘a’ – the last value we apply in RGBA – allows us to set the level of opacity. Just as with the declaration for opacity, an element with opacity value 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the color is against its background.

Cross Brower Compatability
RGBA is currently better supported in FireFox, Google Chrome and Safari, also not requiring any prefix.
All articles in the CSS3 will be updated to show future support & development.

CSS 3 RGBA Color / Colour

The above RGBA example is set in another layer containing a completely random, never seen before background – kind of like the last article in Opacity… – and each layer uses the following CSS:

CSS 3 Opacity (Example 1)
div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }