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