It is time to explore color a little more deeply. Add the
following color styles for the body
element and
the .thumbnail-item
class in styles.css.
body { font-size: 10px; background: rgb(149, 194, 215); } a { text-decoration: none; } .thumbnail-item { border: 1px solid rgb(100%, 100%, 100%); border: 1px solid rgba(100%, 100%, 100%, 0.8); } ...
You have declared values for the .thumbnail-item
’s border twice. Why?
Notice that the two declarations use slightly different color functions: rgb
and rgba
.
The rgba
color function accepts a fourth argument,
which is the opacity. However, some browsers do not support
rgba
, so providing both declarations is a technique that provides a
fallback value.
All browsers will see the first declaration (rgb
) and register its
value for the border
property. When browsers that do not
support rgba
see the second declaration, they will not
understand it and will simply ignore it, using the value from the first declaration.
Browsers that do support rgba
will use the
value in the second declaration and discard the value from the
first declaration.
(Wondering why the body
’s background color is defined with integers and the .thumbnail-item
’s border color is defined with percentages?
We will come back to that in just a moment.)
Save styles.css and switch to your browser (Figure 3.19).
In the DevTools, you can see that Chrome supports rgba
. It denotes that
the rgb
color is not used by striking through the style (Figure 3.20)
Now, still in the DevTools, select the body
.
In the styles pane, notice the declaration for the background color that you just added.
To the left of the RGB value is a small square showing you what
the color will look like.
Click that square, and a color picker opens (Figure 3.21). The color picker lets you choose a color and will give you the CSS color value in a variety of different formats.
To see the background color in different color formats, click the up and down arrows to the right of the RGBA values. You can cycle through HSLA, HEX, and RGBA formats.
The HSLA format (which stands for “hue saturation lightness alpha”) is used less frequently than the others, partly because some of the most popular design tools do not provide HSLA values that are accurate for CSS. If you are curious about HSLA, visit the HSLA Explorer at css-tricks.com/examples/HSLaExplorer.
Take a look at the HEX value for the background color: #95C2D7
.
HEX, or hexadecimal, is the oldest color specification format. Each digit represents
a value from 0 to 15. (If you are not familiar with hexadecimal numbers, this is done by including the characters A through F as digits.)
Each pair of digits, then, can represent a value
from 0 to 255. From left to right, the pairs of digits correspond to the intensity of red, green, and blue in the color being specified (Figure 3.22).
Many find HEX colors unintuitive. A modern alternative is to use RGB
(red, green, and blue) values. In this model, each color is also assigned a value from 0 to 255, but the values are represented in more familiar decimal numbers and separated by color.
As mentioned earlier, for more capable browsers a fourth value can specify the opacity or transparency of the
specified color, from 0.0 (fully transparent) to 1.0 (fully opaque).
The opacity is officially known as the alpha value – hence the A in RGBA.
The RGBA value of the body
’s background color is (149, 194, 215, 1)
.
As an alternative to declaring integer values for red, green, and blue, you can also use percentages, as you did for the .thumbnail-item
borders.
There is no functional difference between the two options.
Just do not mix percentages and integers in the same declaration.
By the way, for help selecting pleasing color palettes, Adobe provides a free online tool at color.adobe.com.
18.223.210.71