HTML and CSS Reference
In-Depth Information
Gradient Line
Figure 19-1.
In a linear gradient, the colors change along a straight line
Not
■
The original files for Figures
19-1
through
19-5
are in colorstops_1.html through colorstops_5.html in the
ch19 folder.
With a radial gradient, the starting point of the gradient line (or
gradient ray
) is anchored at the center of the
circle or ellipse, and the line always extends to the right (see Figure
19-2
).
Gradient Ray
Figure 19-2.
The color stops of a radial gradient are drawn on a ray extending from the center to the right
Setting the Position of Color Stops
The position of a color stop along the gradient line or ray can be specified using a length or percentage. Lengths
are measured from the starting point. Percentages are relative to the distance between the starting and ending
points. In Figure
19-1
, the dark color stop is at the starting point (
0%
) on the left edge of the gradient box, and the
light color stop is at the ending point (
100%
) on the right edge. In Figure
19-2
, the starting point is the light color
in the center of the ellipse, and the ending point is the right edge of the gradient box. In both cases, the smooth
transition from one color to the other is generated automatically by the browser.
Not
■
With a linear gradient, the starting and ending points of the gradient line often lie outside the gradient box.
You'll learn later in this chapter how to determine their location.
If you don't specify the position of a color stop, the browser applies the following rules:
0%
) of the gradient line.
•
If it's the first color stop, it's placed at the starting point (
100%
) of the gradient line.
•
If it's the last color stop, it's placed at the ending point (
•
Intermediate color stops are spaced evenly between the preceding and following color
stops that have positions.
In theory, there's no limit to the number of color stops, but they must be listed in ascending order. If a color
stop has a position lower than any preceding one, it's reset to the highest preceding value. For example, in the
following list, the third color stop is out of order:
#C24704, #D9CC3C 35%, #00ADA7 25%, #FFEB79
