HTML and CSS Reference
In-Depth Information
Our
maroon
and
yellow
background colors can also be stated as HSL color values, as
shown here.
1.
.task {
2.
background:
hsl(0, 100%, 50%)
;
3.
}
4.
.count {
5.
background:
hsl(60, 100%, 100%)
;
6.
}
HSL color values, like RGBa, may also include an alpha, or transparency, channel with
the use of the
hsla()
function. The behavior of the alpha channel is just like that of the
rgba()
function. A fourth value between
0
and
1
, including decimals, must be added to
the function to identify the degree of opacity.
Our shade of orange as an HSLa color set to 50% opaque would be represented as
hsl(24, 100%, 100%, .5)
.
The same 25% opaque
maroon
background color and 100% opaque
yellow
background
color from before would look like the following as HSLa color values.
1.
.task {
2.
background:
hsla(0, 100%, 50%, .25)
;
3.
}
4.
.count {
5.
background:
hsla(60, 100%, 100%, 1)
;
6.
}
The HSL color value is the newest color value available within CSS. Due to its age and
support within browsers, though, it isn't as widely used as the other values.
For the time being, hexadecimal color values remain the most popular as they are widely
supported; though when an alpha channel for transparency is needed, RGBa color values
are preferred. These preferences may change in the future, but for now we'll use hexa-
decimal and RGBa color values.
Lengths
Length values within CSS are similar to colors in that there are a handful of different types
of values for length, all of which serve distinct purposes. Length values come in two dif-
ferent forms, absolute and relative, each of which uses different units of measurement.
We're going to stick to the more common—and more straightforward—values at the mo-
ment, as more complex values will provide much more power than we need for now.
Search WWH ::
Custom Search