CSS3 RGB & RGBA
A guide to using css3 ‘RGB’ & ‘RGBA’, giving us not only the ability to set RGB color/colour but also apply a level of opacity.
CSS 3 RGB
The HSL declaration sets color/colour using Red (R), Green (G) and Blue (B).
Cross Brower Compatability
RGBA is currently better supported in FireFox, Google Chrome and Safari, also not requiring any prefix.
All articles in the CSS3 will be updated to show future support & development.
CSS3 RGB
The above RGB example uses the following CSS 3
- CSS 3 RGB
- div.L1 { background:rgb(60, 80, 100); height:20px; }
- div.L2 { background:rgb(60, 100, 100); height:20px; }
- div.L3 { background:rgb(60, 120, 100); height:20px; }
- <br />
- div.L4 { background:rgb(25, 50, 100); height:20px; }
- div.L5 { background:rgb(25, 50, 150); height:20px; }
- div.L6 { background:rgb(25, 50, 200); height:20px; }
An example for those on alternative browsers not seeing the different levels of opacity…
CSS 3 RGBA
Alpha allows us the ability to set a level of opacity. An element with opacity/alpha value of 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the color or object is against its background.
The above RGBA example is set in another layer containing a background texture and each layer uses the following CSS 3
- CSS 3 RGBA
- div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
- div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
- div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
- div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
- div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }
An example for those on alternative browsers not seeing the different levels of opacity…
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
- CSS3: Transition
Thank you for reading!
@zenelements // Alex
Excellent stuff, thanks for this tip!
Excellent series of little examples!
This one also works in Opera 10 Beta 2.
Great explanation. I liked the design of your blog.
I found while testing RGBa on different browsers/computers that….PC and MAC give different results.
On Mac it is not as “see through” as on PC, and also that PC can handle .95 opacity when mac can only handle .9 opacity.
Test on mac (safari, firefox, chrome), PC (firefox, ie8, chrome)
also for graceful degradation of CSS it’s really important to offer a color to earlier browsers that don’t support CSS3.
i.e
#item {backgound-color:#000;background:rgba(0, 0, 0, 0.8);}
regards
andy
ps. shameless advert for my plugin http://share-and-follow.com/wordpress-plugin/ it’s really useful for web dev’s and std users alike. Deals with all your social networking needs.
@Andy – thank you for pointing this out! I’d not come across the difference in opacity levels before and it’s certainly good to know. I’ll be keeping that on post-it for future! I’ll let you away with your shameless advert too ;)
Thank you very much for this tutorial. Good explanation.