Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Using RGBA Colour The Bagpuss Way
Search
Drew McLellan
September 27, 2011
Technology
1
97
Using RGBA Colour The Bagpuss Way
From Oxford Geek Night.
Drew McLellan
September 27, 2011
Tweet
Share
More Decks by Drew McLellan
See All by Drew McLellan
HTML5 APIs PHP Yorkshire 2017
drewm
1
160
HTML5 APIs Confoo Montreal
drewm
1
240
PHP Payments with Omnipay
drewm
0
110
HTML5 APIs Confoo Vancouver
drewm
0
270
Learn to Love Regular Expressions
drewm
0
140
Ecommerce Projects with Moltin
drewm
0
690
Writing Portable PHP
drewm
0
110
Getting to Grips with Regular Expressions
drewm
1
250
Back to Front Performance - Oct 2013
drewm
0
120
Other Decks in Technology
See All in Technology
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
11
1.5k
TypeScript 上達の道
ysknsid25
9
1.1k
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
130
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
390
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
21
5.8k
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.5k
そもそも AWS FIS について。なぜ今 FIS のハンズオンなのか?などなど
kazzpapa3
2
120
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
110
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
120
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
260
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Rails Girls Zürich Keynote
gr2m
95
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Unsuck your backbone
ammeep
671
58k
How to Ace a Technical Interview
jacobian
278
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Transcript
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?
None
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