Valid HTML5

CSS3 Demos


Once more, a long-needed feature will become much more ubiquitous with CSS3 - transparency / opacity.

The opacity declaration has been available for some time across several browsers - Firefox, Safari/Chrome and Opera all support this property. The flaw with it is that it automatically inherits - in other words, if you want a <div> to be partially transparent, all its content will also be partially transparent, no matter what CSS is applied. An example:

Container with opacity applied - text hard to read

The latest solution, courtesy of CSS3, is to use RGBA to declare colours. RGBA is a colour standard that determines the usual red, green, blue hues, plus an alpha channel for transparency. Importantly, it isn't inherited, so child elements aren't forced to be equally opaque:

Container with an RGBA background colour - and readable text

Converting Hex colours to their RGB equivalents can be done via any number of online tools - the final part of the property is just a decimal from 0 to 1.0, representing opacity.