Everything You Need to Know about CSS3 Color Techniques

by Aygul Zagidullina in Coding 17

• Tweet
• 

• Tweet
• 

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!

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
How To Develop CSS3 Border Radius Tool
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

Colors in CSS3

Resources: SlideShare Presentation: Colors in CSS3 by Lea Verou

W3C CSS3 Color Specification

W3C CSS3 Color Specification (working draft, 21 July 2008) describes color values and properties for foreground color and group opacity in CSS3 color module.

W3C: CSS3 Color Modul

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.

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; }

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; }

• Zen Elements: CSS3 RGB & RGBA
• CSS3 Info: RGBA Colors
• RGBA – Color with Transparency

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.

Hue is a degree on the color wheel: 0 & 360 – red, around 120 – green, 240 – blue.
Saturation is a percentage: 0% – grayscale, 100% – full color.
Lightness is a percentage: 0% – dark, 50% – the average, 100% – light.

div.L1 { background:hsl(320, 100%, 25%); height:20px; }
div.L2 { background:hsl(320, 100%, 50%); height:20px; }
div.L3 { background:hsl(320, 100%, 75%); height:20px; }
<br />
div.L4 { background:hsl(202, 100%, 50%); height:20px; }
div.L5 { background:hsl(202, 50%, 50%); height:20px; }
div.L6 { background:hsl(202, 25%, 50%); height:20px; }

div.L1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.L2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.L3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.L4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.L5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }

• Zen Elements: CSS3 HSL & HSLA
• CSS3 Info: HSL Colors
• CSS3 Info: HSLA Colors
• HSLA – Color with Transparency

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.

div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }

• Zen Elements: CSS Opacity
• CSS3 Info: Opacity Preview
• About.com Web Design / HTML: CSS3 Opacity
• Exforsys Tutorials: CSS3 Opacity
• Not As Clear As It Seems: CSS3 Opacity and RGBA

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 color
B = where the fade begins (%)
#XXX = secondary color
Y = where the fade begins (%)

Linear Gradient

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(top, #35425d 0%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom,
                     from(#35425d), to(#fff));
}

.my_CSS3_class {
  height: 100px;
  background: -moz-linear-gradient(left, #35425d 25%, #fff 100%);
  background: -webkit-gradient(linear, left top, left bottom,
                  from(#35425d), to(#fff));
}

Radial Gradient

.my_CSS3_class {
  height: 250px;
  background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350,
                  from(#487a77), to(#fff));
}

• Zen Elements: CSS3 Gradients
• CSS Tricks: Speed Up with CSS3 Gradients
• Quick Tip: Understanding CSS3 Gradients
• CSS3 Gradient Generator
• Westciv: Linear Gradients
• Westciv: Radial Gradients

Shadows

Box Shadow

Shadows can be applied in CSS3 to borders, images, and text as well.

To create CSS3 box shadow, use box-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

#my_CSS3_id {
  border: 5px solid #c4c8cc;
  -moz-box-shadow: 5px 5px 7px #888;
  -moz-border-radius-bottomright: 15px;
  -webkit-box-shadow: 5px 5px 7px #888;
  -webkit-border-bottom-right-radius: 15px;
}

• Zen Elements: CSS3 Box Shadows
• Westciv: Box Shadow

Text Shadow

Similar to the box shadow effect, CSS3 shadow technique can be applied to text.

To create CSS3 text shadow, use text-shadow: Apx Bpx Cpx #XXX;
Apx = x-axis
Bpx = y-axis
Cpx = cast length / feathering
#XXX = colour as usual

.my_CSS3_class {
  text-shadow: 2px 2px 7px #111;
  font-size: 3.2em;
  color: #f5f5f5;
}

• Zen Elements: CSS3 Text Shadow
• Westciv: Text Shadow

Excellent implementations of CSS3 Color Techniques

CSS3 Gradient Buttons

Gradient buttons created with just CSS (no image or Javascript) are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.

“CSS3 Gradient Buttons” Tutorial + Demo

Super Awesome Buttons with CSS3 and RGBA

A tutorial for creating really cool buttons using the RGBA feature of CSS3.

“Super Awesome Buttons with CSS3 and RGBA” Tutorial + Demo

Browser Support

Detailed information about CSS3 color support in most of the modern web browsers (Chrome, Firefox, Opera, Safari).

Web Designer’s Browser Support Checklist

FinMeByIP: Web Designer’s Browser Support Checklist

Web Browser CSS3 Support

Web Devout: Web Browser CSS3 Support

You Might Also Like

1. 7 Useful CSS3 Code Generators To write CSS manually is not tough, if you know...
2. 20+ Helpful Color Tools For Designers Tools are always very handy for designers. To get their...
3. 20+ High Quality Color Spectrum and Rainbow Wallpapers You can’t imagine life without colors. Different colors give you...

Tags: Coding, color, css3

60 Free High Quality Stock Photography Sites The History of Web Design Blogs