Before we get started with the new effects, let's discuss colors. CSS3 has new ways to define colors that allow you to set transparency and define colors in HSL format. Of course, you can still use the old standards of hex values, any of the CSS color names, and the rgb() specifier.

A new rgba() specifier has been added to allow the alpha, or opacity amount, to be set with a color. Just like rgb(), the first three parameters set red, green, and blue amounts, and are values ranging from 0 to 255. A fourth parameter, the alpha, is a floating point value from 0 to 1 where 0 is completely transparent and 1 is completely opaque. The following declares a red background color that is 50 percent transparent:

background-color: rgba(255, 0, 0, 0.5);

Although most browsers support rgba(), it's a good idea to specify a fallback for those that don't support it by defining a color in rgb() format preceding it, as shown here:

background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0.5);

Here's an example of overlapping three elements all with an alpha value of 0.5 and having colors red, green, and blue (yes, you can draw circular elements, which we'll see in the next section):

In addition to RGB colors, CSS3 also supports HSL colors, which stands for Hue, Saturation, and Lightness. HSL is based on a color wheel that is full color at the edges and fades to gray in the center. Now extend the wheel into a cylinder that is black at the bottom, white at the top, and full color in the middle. That is the theory around HSL colors.

It is specified using hsl(h, s, l). Hue is a value from 0 to 360 that maps to the degrees on the color wheel. 0 is red, 120 is green, 240 is blue, and 360 is back around to red. Saturation is the percentage of color where 0% is completely gray and 100% full color. Lightness is the percent of lightness where 0% is black, 50% is full color, and 100% is white. You can specify it with or without an alpha value, the same as rgb(), as shown here:

hsl(240, 100%, 50%);
hsla(240, 100%, 50%, 0.5);

Most people don't think of colors in HSL, but it's out there just in case you want to use it. If you want to play around with it, there is a nice HSL picker at http://hslpicker.com.