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

amount of blur to apply, the amount it should spread, and finally the color of the shadow.
Here's an example:
box-shadow: 10px 15px 20px 5px #999999;
This moves the shadow 10 pixels to the right, moves it 15 pixels down, blurs it 20
pixels, spreads it out 5 pixels (this expands the shadow outward in all directions), and
sets it to a dark gray color. Figure 6-22 shows this property applied to the shapes created
in the “Rounded corners” section.
Figure 6-22. Shapes with drop shadows applied using box-shadow property
Color
If utilized correctly, color can be a powerful addition to a web page's design, improving
its structure by visually grouping items together based on their color or separating con-
tent in the layout through the use of contrasting colors. It can be abused too, making an
otherwise good layout gaudy and, particularly if clashing colors are used, hard to look
at. There are accessibility concerns in regard to color too, because certain color choices
for the page can make content difficult to read for those with color blindness. Red-green
color blindness is most prevalent, so avoid separating content into shades of red and
green that are at a similar level of luminosity.
Color on-screen
The colors you see on your screen are defined using combinations of the primary colors
red, green, and blue in an additive color model, which means all three combined at full
intensity will produce white ( Figure 6-23 ).