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…
No hay comentarios.:
Publicar un comentario