HTML and CSS Reference
In-Depth Information
feature that isn't crucial to the functioning and accessibility of a web page. So you should be
okay to leave the IE filter lines out completely and allow the page to degrade to no transpar-
ency on older versions of IE. It should also be noted that those first two lines of code are not
valid CSS, but they do achieve the desired result.
RGBA and HSLA Colors
The other two ways to achieve transparency levels on elements using CSS are by means of
RGBA and HSLA color values. In this chapter, you've already seen the syntax for RGB and
HSL color values. The "A" in RGBA and HSLA stands for “alpha,” representing a transpar-
ency channel as part of the color value. Let's first use RGBA on the background color of our
footer element.
In our design, the footer element has a background color with a hex value of
#42031e
. We
haven't added that color to the footer yet, so it still looks bare. Let's set the equivalent RGB
value for the footer, and add an alpha (transparency) setting to the syntax:
footer {
background-color: rgba(66, 3, 30, .5);
}
Notice two points in this syntax, as compared to the RGB syntax we saw earlier. Firstly, the
notation is
rgba()
instead of
rgb()
. Secondly, we've added a fourth comma-separated
value, which represents the alpha channel. This fourth value in the parentheses is set in the
same way we set opacity: Using a decimal-based number from 0 to 1.
But hold on a second! If we add this declaration to our footer element and refresh the page,
you'll notice that nothing has happened (assuming you've been following the example code
up to this point). The reason we don't see the background color on the footer yet is because
of the float-clearing problem we talked about in
Chapter 2
.
Currently there are three elements inside the footer, and each of those elements has its float
property set to a value of
left
. As we discussed, this means that those elements are taken
out of the flow, causing their parent element to collapse, essentially ignoring them. To fix this
problem, we'll add the
cf
class to our
.footer-inside
element:
<div class="footer-inside center-global cf">
