The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Color and Opacity 115

Having established that rgba() is not the same as opacity, let’s see how it

works. Being a color value, it can obviously be used for backgrounds, bor-

ders, shadows, and so on. The following code shows some examples of rgba

applied to different properties:

 .shadow .text { box-shadow: 10px 10px 4px rgba(0,0,0,0.7); }
 .border .text { border: 10px solid rgba(0,0,0,0.5); }
 .text-semi p { color: rgba(0,0,0,0.6); }
x .text-shadow p { text-shadow: 5px 5px 1px rgba(0,0,0,0.6); }

Figure 10-3 shows these properties in action. Moving clockwise from top

left, in the first box, rgba lowers the opacity of box-shadow; setting the Alpha

value to 0.7  allows some of the background to show through, making the

shadow more “realistic.” The next example shows a 50 percent opaque black

border  (which I used in the example shown in Figure 8-6 on page 93).

In the next example, the Alpha value of the color property has been set

to 0.6 , which makes the text appear semi-opaque. And finally the last

example shows another shadow effect, this time on the text-shadow property.

The Alpha value is set at 0.6 x, which, once again, makes for a more realis-

tic shadow.

Figure 10-3: RGBA applied to different properties

RGBA and Graceful Degradation

Older browsers that don’t support RGBA values (notably IE8) will ignore

any rules that use them and default to a previously specified or inherited

value. To compensate, you should specify the color twice—first without and

then with an Alpha value—using the cascade to ensure the right color is

implemented:

p {

color: #F00;

color: rgba(255,0,0,0.75);

}