HTML and CSS Reference
In-Depth Information
Before: The normal busy page.
The user has lots of options.
After: The rest of the page is hid-
den behind a semitransparent
layer so the user can concentrate
on the picture.
In this chapter the CSS examples omit sizing information so that you
can focus on the rules for applying opacity, color, and motion. If
you're re
—
creating the examples from the text you'll usually need
to add the following rule to replicate the screenshots:
div {
display: inline-block;
margin: 0.5em;
padding: 0.5em;
IN ADDITION TO THE ABOVE, SOME OF the examples use a
width: 12em;
property.
The
opacity
property is straightfor-
ward: you specify a value between
0
and
1
. The fully opaque default is
1
,
and
0
is fully transparent:
div {
background-color: #666;
color: #ccc;
border: 4px solid #ccc;
}
div:nth-child(1) { opacity: 1; }
div:nth-child(2) { opacity: 0.8; }
div:nth-child(3) { opacity: 0.6; }
div:nth-child(4) { opacity: 0.4; }
