Everything You Need to Know about CSS3 Color Techniques

CSS3 is revolutionizing Web by introducing a number of totally amazing elements and attributes that push modern web development a little bit forward. Many features are already supported to some extent in latest versions of the modern web browsers such as Chrome, Firefox, Safari, and Opera.

In this article we will talk about CSS3 colour techniques such as RGB / RGBA and HSL / HSLA color models, opacity, linear and radial gradients, box and text shadows as well as show you some examples of excellent implementation of the CSS3 colour techniques in practice. You will get some hints as to the new markup, understand how to incorporate new CSS3 elements, embrace the new creative freedoms of CSS3 and start using powerful and absolutely awesome CSS3 colour techniques today!

W3C CSS3 Color Specification

CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

CodeNique: CSS3 Color Names

Color Models, Opacity

RGB & RGBA

The RGB declaration sets color/colour using Red (R), Green (G) and Blue (B) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

HSL & HSLA

The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L) color model. Alpha (A) allows us to specify a level of opacity for a color. An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible.

Opacity

CSS3 opacity allows us to control how see-through an element is. The opacity declaration sets the value to how opaque an elements (layer, text, image, etc.) is. An element with opacity value 1.0 is fully opaque (visible) while an element with opacity value 0.0 is completely invisible. Any value in-between determine how opaque the element is.

Gradients

There are a whole variety of gradient options available with CSS3. Linear and radial gradients are becoming irreplaceable! They go a long way towards simplifying layouts and allow us to create visually appealing design with saving a huge amount of time and efforts.

To create CSS3 gradient, use background:-moz-linear-gradient(pos, #AAA B, #XXX Y);pos = the position of the first color, giving direction to the gradient#AAA = primary colorB = where the fade begins (%)#XXX = secondary colorY = where the fade begins (%)