You're familiar with hexadecimal colors like #FF0066. And in Chapter 6 (RGB), you read about RGB color notation: rgb(25, 255, 0). for example. CSS 3 adds another way of specifying color: RGBA, which stands for Red, Green, Blue, Alpha. Basically, it's RGB color with the addition of alpha transparency. Alpha works the same way as opacity, as described in the previous section, in that you specify a value from 0 to 1 to indicate how much you can see through the color. A value of 0 means the color's invisible, while 1 means it's a solid color—you can't see through it.
Say you want to add a background color to a div with a class of caption, but you want that color to be see-through enough so the content underneath the div is readable (see Figure 16-6). You could then create a style like this:
.caption { background-color: rgba(95,156,140,.75); }In this case, the background color is teal (95, 156, 140) with 75 percent opacity (.75). You can use RGBA wherever you'd normally use a color value in CSS—for a background color, text color, border color, and so on.
The downside of RGBA color is that Firefox 2, Opera 9, and every version of Internet Explorer don't understand RGBA colors. If those browsers encounter this style, they simply ignore it and leave the background color empty. You have a couple of approaches for dealing with these browsers: First, don't worry about it and let those browsers ignore the color. That's the easiest tactic, but not necessarily the best. For example, the text might not be legible if there's no background color at all (Figure 16-6).
Figure 16-6. The new CSS 3 RGBA color gives you an easy way to add partially transparent backgrounds to page elements, like the paragraph pictured here.
Tip
Any image-editing program, like Photoshop or Fireworks, can give you an RGB color value as well as a hexadecimal color. If you already know a hex color value, and you want to convert it to RGB so you can use RGBA colors, visit this web page for help: www.javascripter.net/faq/hextorgb.htm.
Another approach is to give the background a solid color using either the regular RGB color or a hexadecimal color. Doing so takes two passes. First, to deal with non-IE web browsers that don't understand RGBA, you must edit the rgba style:
.caption {
background-color: rgb(95,156,140); /* Opera and others */
background-color: rgba(95,156,140,.75);
}In this case, the first background-color declaration uses RGB color, which all browsers understand. When Opera, Internet Explorer 8, or Firefox 2 encounters the second declaration, the browser ignores it, since it doesn't know what RGBA color is. This style works for Opera 9 and Internet Explorer 8, but IE 6 and 7 get confused and don't display any background color at all.
Accordingly, you need to add another style sheet for IE using conditional comments, as described on Isolate CSS for IE with Conditional Comments. Here's an example of how to get the previous code to work with IE as well:
<!--[if IE]>
<style type="text/css">
.caption {
background-color: rgb(95,156,140);
}
</style>
<![endif]-->There's another way to get Internet Explorer to join the RGBA party. As with opacity, IE provides a filter property that you can use to achieve the same effect as RGBA color. It's a bit of a handful to type, and you need to add a one other CSS property to make it work. To get a taste of how the finished product looks, here's you what you'd add to your page to get the same effect as described in the previous section on RGBA color:
<!--[if IE]>
<style type="text/css">
.caption {
background-color: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#BF5F9C8C, endColorstr=#BF5F9C8C);
zoom: 1;
}
</style>
<![endif]-->This chunk of code does the same thing as this:
.caption { background-color: rgba(95,156,140,.75); }Here's how it works:
First, you need to put the special IE code into a conditional comment. Here, the conditional comment contains an internal style sheet, but you can use IE conditional comments (also called IECCs) to link to another IE-only style sheet with the style, as described on Conditional comments and IE 8.
Use the same selector as you did for creating the effect in the first place. In this example, the selector is .caption.
For Internet Explorer 8, you need to set the background color to transparent first with background-color: transparent. This style erases any background color that's been applied to the element so the filter property (that's the next step) will work correctly.
Add the filter property:
filter:progid:DXImageTransform.Microsoft. gradient(startColorstr
=#BF5F9C8C, endColorstr=#BF5F9C8C);There's a lot of code here. Just take your time and type it exactly as you see here, except keep it all on a single line. The only two things you change are the values for startColorstr and endColorstr. In this example, those values are both #BF5F9C8C. The first two characters BF (which means roughly 75 percent) represent the transparency. It's just a number from 0 to 255 represented in hexadecimal. The last six characters are the hex value of the color; in this example that's 5F9C8C.
In other words, take the alpha value you specified in the RGBA declaration and convert it to a hex number between 0 and 255 (see Table 16-1 for a quick conversion guide). Then convert the RGB color to hex (use the calculator at www.javascripter.net/faq/rgbtohex.htm), and then put them together (transparency value first) and type that combined number for both the startColorStr and endColordstr).
Add zoom: 1. This property forces IE 6 and 7 to obey. You can read the bizarre details of this little maneuver in the box on Stopping the Float.