HTML and CSS Reference
In-Depth Information
HSL makes sense in a lot of ways; for example, you could select complemen-
tary shades of red to go with the preceding red color, just by varying the lightness,
like this:
hsl(0,100%,30%)
hsl(0,100%,40%)
hsl(0,100%,50%)
hsl(0,100%,60%)
HSLA works in the same way as RGBA. You just add the alpha channel value
to the existing color like this:
hsla(0,100%,50%,0.5)
, which results in full red but
is 50 percent transparent.
OPACITY
A separate
opacity
property is available in CSS3. You can add it to any element to
set a level of transparency for that entire element and everything within it, includ-
ing all child elements. As you'd expect, it takes a value of 0-1:
opacity: 0;
This property makes elements completely vanish!
The content is still available in the DOM, just invisible to sighted viewers (in
contrast to other methods of hiding content, such as
display:none;
, which renders
the content inaccessible to screen-reader users). I mainly find this useful for hid-
ing certain content and then making it appear again when you mouse over/focus
on a certain area of the document, as in pop-up information boxes and suchlike.
NOTE:
Because old versions of IE do not support transparent
CSS colors or opacity, you'll need to make provisions for this
by adding in support or alternatives. You'll learn various ways
of doing this throughout the topic.
