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.
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.
CSS 3 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
Thank you for reading!
Alex | @ZenElements
�)
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.