HTML and CSS Reference
In-Depth Information
With only the two colors defined, the background will default to a vertical gradient with the starting color
(the first one defined; black, in this case) at the top of the element and the end color at the bottom. The
browser will smoothly transition from one color to the next, stretching the gradient to the height of the
element, however tall it might be, and filling the element from side to side, however wide it might be.
You can specify the
gradient line
—the line along which the browser draws the gradient—as another
argument, changing the gradient's start and end points. This can be one of the keywords
to bottom
(the
default),
to right
,
to left
, or
to top
to indicate a side of the box, or
to top right
,
to top left
,
to
bottom right
, and
to bottom left
to specify a line from one corner to the opposite corner:
.zone {
background-image: linear-gradient(
to top left
, black, white);
}
You can also specify an angle for more precise control:
.zone {
background-image: linear-gradient(
65deg
, black, white);
}
An angle of
0deg
creates a vertical gradient from the bottom to the top, and a
90deg
angle indicates a left
to right horizontal gradient. Some browsers implemented an earlier draft of the CSS3 gradient spec that
oriented the
0deg
angle from left to right, rather than from bottom to top. Double-check your angles when
you include prefixed linear gradients in your CSS; you may need to add or subtract an extra 90 degrees to
get the correct angle in some browsers.
A linear gradient can include several colors, each separated by a comma, and the browser will distribute
the colors evenly across the entire element:
.flame {
background-image: linear-gradient(to right, red, orange, yellow);
}
You can also specify exactly where each color stops and the next one starts by including a length or
percentage after each color, appropriately called a
color stop
:
.flame {
background-image: linear-gradient(to right, red
30px
, orange
80px
, yellow
100%
);
}
We'll apply a linear gradient to the Power Outfitters navigation bar to give it a slightly dimensional effect.
We're including all the major vendor prefixes and following up with an un-prefixed, standardized
declaration to future-proof our site. In browsers that support a property or value both prefixed and un-
prefixed, the ordinary cascade is still in effect so the last declared value wins. It's usually best to include
the un-prefixed version last in the rule, as we've done in Listing 10-31.
Listing 10-31.
Adding a gradient background to the navigation bar
#nav-main {
clear: both;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(255,255,255,.75);
