CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 275

Now that you have an understanding how HSL works, you can use the HSL functional
notation syntax where you would have used hexadecimal notation, for example:
p { color: hsl(300, 100%, 50%); } /* magenta */

p { color: hsl(300, 20%, 50%); } /* pastel

magenta - less saturated */
p { color: hsl(300, 20%, 25%); } /* dark shade -

less lightness */
p { color: hsl(115, 20%, 25%); } /* dark green -

different hue */
Notice that the lightness is placed in the middle initially (50 percent); if it were at 100
percent or 0 percent, it would make the color pure white or pure black, regardless of the
other values.

Opacity

Any element can have its overall opacity adjusted using the opacity property. The
possible values are between 0.0 and 1.0 that map to the range 0 percent to 100 percent.
The following are all legitimate values:
p { opacity:1.0; }

/* totally

opaque */
p { opacity:0.0; } /* totally

transparent */
p { opacity:0.5; } /* 50% trans-

parent */
p { opacity:0.25; } /* 75% trans-

parent */
Opacity can also be added using the functional notation styles outlined earlier by
adding an opacity component—called alpha —when defining a color. This makes the
functional notation styles become rgba( R, G, B, A ) and hsla( H, S, L,
A) , where “A” is an alpha value to add, which has the same value range as the opa-
city property:
p { color: rgba(0, 255, 0 , 0.1); }

/* nearly trans-

parent green */
p { color: hsla(225, 100%, 50%, 0.5); }

/* semi-trans-

parent blue */