HTML and CSS Reference
In-Depth Information
border: 2px solid #ff9e05;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
background-color: #fc0;
background-image: -moz-linear-gradient(top, #ffed8e, #edb707);
background-image: -webkit-linear-gradient(top, #ffed8e, #edb707);
background-image: -o-linear-gradient(to bottom, #ffed8e, #edb707);
background-image: linear-gradient(to bottom, #ffed8e, #edb707);
}
Note that the Mozilla and Webkit prefixed declarations differ slightly from the others. An earlier draft of the
gradient specification used the
point of origin
to define a gradient line by keyword, rather than the
point of
completion
the current standard uses. Older implementations still use that outdated notation, so we've
included it for older versions of Firefox, Safari, and Chrome. Opera, however, currently supports both
notations—albeit with a vendor prefix—and relies on the word “
to
” as the differentiating factor for
keywords. Internet Explorer didn't support CSS gradients prior to version 10, which follows the latest
standard notation and doesn't require a prefix.
Older versions of Safari and Chrome implemented an even more radically different
gradient notation:
background-image: -webkit-gradient(linear, 0 0, 0 100%,
from(#ffed8e), to(#edb707))
. Chrome prior to version 11 and Safari prior to version
5 required this verbose syntax, but current versions have adopted the simpler notation
recommended by the W3C. If you need to support older Webkit browsers you can
include this gradient notation along with the others, but we've left it out of our examples.
Figure 10-31 shows the updated navigation bar. The gradient adds some natural shading, like a softly
rounded bar lit from above. The hint of text shadow also creates a faint embossed effect, as if the text is
stamped into the raised surface of the bar. It's subtle, but it's this kind of attention to detail that can help
your site stand out from the rest.
Figure 10-31.
A gradient background adds some dimension to the Power Outfitters navigation. We've enlarged this
image so you can see the detail.
You can use RGBA or HSLA colors in gradients to play with transparency, transitioning from an opaque
color to a transparent color, for example. This can be especially effective combined with a background
image under the gradient, as we've done in Listing 10-32.
Listing 10-32.
Using transparent RGBA color in a gradient with a second background image
.haiku {
width: 400px;
height: 150px;
padding: 50px;
