textwrap

running words around
design education and visual communication
authored by chris m hughes

RGBa : Seeing through CSS3

Friday, 23 January 2009

Designers are all too familiar with the hassle of using images to create transparency effects in webpages. But when css3 eventually becomes the new standard, a really powerful way to control transparency across all the elements in css will be available - RGBa. This is the rgb colour scale with the added advantage of an alpha channel. Its not exactly brand new to the web - if you've used the .PNG file format, you are already using one form of the rgba control - but being able to apply it to css is a total revelation.

There are problems based around lack of browser support (no prizes for guessing the main culprit). But as we move forward, all sorts of old workarounds will become obsolete with RGBa. For example, transparent fonts can trump all the current image replacement techniques (at the end of this article I have an example). And how about semi-transparent borders - they will be awesome. New creative standards in css-based design will definitely emerge.

Its true css does allow you to use an opacity property, and it can produce some nice effects on block elements and background images. Safari, Opera, and Firefox can all handle this, but typically, Internet Explorer doesn't support it. Instead, we have to use their proprietary property - Alpha Filter. Just to confuse us further, where opacity uses a value from 0 (fully transparent) to 1 (opaque), Alpha Filter uses a scale from 0 to 100. So to cover all your bases, you should include both expressions in your css, like so -

#container {
background: black;
opacity: .35;
filter: alpha(opacity='35');
}

A big headache is that when you use the opacity property, the opacity is set for that element, and any chidren of that element will inherit it.

Alpha channel with RGBa
CSS3 also allows for an extended version of the RGB colour model that includes a fourth value that is used to specify opacity. This is where the power for using css translucency and transparency really comes into its own.

Like the opacity property, the alpha value in the RGBa model accepts a value between 0 and 1. But you can apply an RGBa value anywhere that colour values are accepted in CSS: borders, background, font colors, etc. This clearly offers a higher level of control than the opacity selector, and opens up all sorts of possibilities, particularly with typography. So for example, here is some translucent text:

#content {
background:#333;
color: rgba(0,0,0,.5);
}

Furthermore, the RGBa value only applies that transparency to the given property of an element that we specify. Both Safari and Firefox 3 offer support for the RGBA color value system, but so far Opera and IE do not. To get over this we can define a fallback color:

#content {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,.5);
color: #fff;
}

You'd think that in browsers that do not recognize RGBa values, the declaration is ignored, but IE has its own ideas, and chooses not to display the background at all! A way to get around this would be to use conditional comments to reset the background to a solid colour for IE. Yet another hack to accommodate Microsoft.

Full support for css3 is still a way off, but the sooner we get using RGBa the better. Read more..

And finally, here is an RGBa method to implement image replacement, where the text stays where it is and the colour is set to transparent. (Truly perfect, if you are running firefox 3 :) -

h1 }
background-image:url(yourimage.jpg);
color: rgba(255,255,255,0);
}