About the new CSS3 rgba() and hsla() (opacity/transparency)
Simply, they're new ways you can define colours in CSS3 using an Alpha channel (opacity/transparency). There's a new hsl() too, which acts in a very similar way to the current rgb() that everyone knows already.
What the "a" means
The a stands for Alpha, and basically translates to the colours transparency, or opacity if you prefer. If something is entirely opaque, it means you can't see through it. So if you use a value of 1, the colour will be totally solid, and you won't be able to see through it. Like this:
background-color: rgba(255,0,0,1);
background-color: rgba(0,0,255,1);
As you can see (or rather, can't), you cannot see the red square through the blue square where it overlaps. However, and here's the really tricky part, if the colour is changed and a splash of Alpha is added, we get the following:
background-color: rgba(255,0,0,1);
background-color: rgba(0,0,255,0.5);
So now you can see the red square through the blue square where they overlap. The Alpha value goes from zero (not opaque at all - invisible) to one (totally opaque - can't see through it at all).
So what's the difference between hsla() and rgba() then?
They're simply different ways to define colours. Everyone knows RGB colour values - hsla() is simply a different method of defining colours. HSL can sometimes be easier, since if you want a lighter or darker colour you can simply change the L value (lightness, and the other two being hue and saturation). But by now you're probably very comfortable with RGB values.
What about the Opacity: CSS property?
Unlike a single color definition, the opacity: property is inherited. So child elements will inherit their parents opacity setting.
You should be seeing on the left a red semi-trasparent square, which is transparent because it has inherited the opacity: setting from its containing DIV. If not, you may wish to consult an optician. With a single colour definition, you won't get the inheritance, and so the square would be solid (opaque).
What about Internet Explorer?
Unsurprisingly, the opacity: CSS property is not supported by MSIE (yet). However, you can mimick it by using DirectX, and have been able to for some time. eg:
filter: Alpha(Opacity=50);
Summary
So now, using CSS3, you have a plethora of different ways you can define colours, and you can have a look at my RGraph manual page to see what they are. Not the gradients though - they're specific to canvas. Here's a list of the different methods available to you:
- Named colours (eg red, green, blue)
- Hex values (eg #ff0000, #00ff00, #0000ff)
- Short hex values (eg #f00, #0f0, #00f)
- RGB values (eg rgb(255,0,0), rgb(0,255,0), rgb(0,0,255))
- RGBA values (eg rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1))
- HSL values(eg hsl(255, 255, 128), hsl(85, 255, 128), hsl(169, 255, 128))
- HSLA values(eg hsla(255, 255, 128, 1), hsla(85, 255, 128, 1), hsla(169, 255, 128, 1))