A presentation at Oxford Geek Night 10 in January 2009 in
Oxford, UK by
Using RGBA Colour
The Bagpuss Way
Oxford Geek Night 10 - 21 January 2009
Drew McLellan, edgeofmyseat.com
There are lots of different
ways to specify colours in CSS
rgb(255, 0, 255)
rgb(100%, 0, 100%)
However you write it,
they’re identical colours.
(it’s all the same biscuit)
They all have one other important
aspect in common.
These all specify solid colours.
rgba(255, 255, 255, 0.5)
But that’s what CSS3 opacity
does isn’t it?
Opacity affects the entire object
RGBA is about the opacity of a colour
Pink stripes 100% opacity
Entire Bagpuss 50% opacity
Pink stripes 50% opacity, as nature intended
Closer to a tiled, flat colour
without the image.
... but also works for text,
(maybe not playgrounds)
Browser support is ok,
but not great.
So how can we use this today without
ending up with a nasty old mess in
rubbish old browsers that don’t
support all this lovely RGBA stuff?
Fall back to solid colour
background: rgb(187, 192, 187);
background: rgba(120, 130, 120, 0.5);
Fall back to alpha PNG
background: rgba(120, 130, 120, 0.5) none;
Tell me more!
A lighting talk about the use of RGBA colour in CSS for Oxford Geek Night 10.
Here’s what was said about this presentation on Twitter.
Heading off to Oxford Geek Night 10. See you there.— Drew McLellan (@drewm) January 21, 2009
Heading off to Oxford Geek Night 10. See you there.
is envious of all the folk off to oxford geek night, @drewm will be there, I'm staying in to guard the Small Person— Rachel Andrew (@rachelandrew) January 21, 2009
is envious of all the folk off to oxford geek night, @drewm will be there, I'm staying in to guard the Small Person