Container with opacity applied - text hard to read
Transparency
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:
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.