A presentation at Oxford Geek Night 10 in in Oxford, UK by Drew McLellan
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
fuchsia #FF00FF #F0F 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.
CSS3 introduces rgba()
Red Green Blue Alpha (opacity)
rgba(255, 255, 255, 0.5)
rgba(255, 255, 255, 0.5)
But that’s what CSS3 opacity does isn’t it?
filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;
Opacity affects the entire object Hello world
Hello world
RGBA is about the opacity of a colour Hello world Hello world
Hello world
Pink stripes 100% opacity
Entire Bagpuss 50% opacity
Pink stripes 50% opacity, as nature intended
Closer to a tiled, flat colour semi-transparent PNG, without the image.
... but also works for text, borders, foregrounds, backgrounds, playgrounds. (maybe not playgrounds)
How?
rgba(255, 255, 255, 0.5)
Browser support is ok, but not great.
Firefox 3 Safari 3 Opera 10
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: transparent url(green50.png); background: rgba(120, 130, 120, 0.5) none;
Tell me more! http://allinthehead.com/code/rgba/ http://dorward.me.uk/www/css/alpha-colour/
allinthehead.com/presentations Thank you. twitter.com/drewm
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 social media.
