Using RGBA Colour The Bagpuss Way

A presentation at Oxford Geek Night 10 in January 2009 in Oxford, UK by Drew McLellan

Slide 1

Using RGBA Colour The Bagpuss Way Oxford Geek Night 10 - 21 January 2009 Drew McLellan, edgeofmyseat.com

Slide 2

There are lots of different ways to specify colours in CSS

Slide 3

fuchsia #FF00FF #F0F rgb(255, 0, 255) rgb(100%, 0, 100%)

Slide 4

However you write it,
they’re identical colours. (it’s all the same biscuit)

Slide 5

They all have one other important aspect in common.

Slide 6

These all specify solid colours.

Slide 7

CSS3 introduces rgba()

Slide 8

Red Green Blue Alpha (opacity)

Slide 9

rgba(255, 255, 255, 0.5)

Slide 10

rgba(255, 255, 255, 0.5)

Slide 11

But that’s what CSS3 opacity does isn’t it?

Slide 12

filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;

Slide 13

Opacity affects the entire object Hello world

Hello world

Slide 14

RGBA is about the opacity of a colour Hello world Hello world

Hello world

Slide 15

Pink stripes 100% opacity

Slide 16

Entire Bagpuss 50% opacity

Slide 17

Pink stripes 50% opacity, as nature intended

Slide 18

Closer to a tiled, flat colour semi-transparent PNG, without the image.

Slide 19

... but also works for text, borders, foregrounds, backgrounds, playgrounds. (maybe not playgrounds)

Slide 20

How?

Slide 21

rgba(255, 255, 255, 0.5)

Slide 22

Browser support is ok, but not great.

Slide 23

Firefox 3 Safari 3 Opera 10

Slide 24

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?

Slide 25

Slide 26

Fall back to solid colour background: rgb(187, 192, 187); background: rgba(120, 130, 120, 0.5);

Slide 27

Fall back to alpha PNG background: transparent url(green50.png); background: rgba(120, 130, 120, 0.5) none;

Slide 28

Tell me more! http://allinthehead.com/code/rgba/ http://dorward.me.uk/www/css/alpha-colour/

Slide 29

allinthehead.com/presentations Thank you.   twitter.com/drewm