HTML and CSS Reference
In-Depth Information
Position: This determines the center of the circle or ellipse. The value is expressed in
the same way as background-position (see Chapter 8), preceded by the keyword at . If
omitted, it defaults to at center .
Color stops: A comma-separated list of colors with optional positions along the
gradient ray starting at the center.
The only required argument is the list of color stops. All other arguments are optional.
Setting the Shape of the Gradient
You can set the shape of the gradient explicitly by using the keyword circle or ellipse .
If you omit the shape, it defaults to circle if the size is a single length. In all other cases, it defaults
to ellipse .
Setting the Size of the Gradient
You can set the size of the circle or ellipse explicitly or by using keywords.
A circular gradient accepts only a single length, which sets its radius.
An elliptical gradient accepts two values, which can be either lengths or percentages. The first value sets the
ellipse's horizontal radius. The second one sets its vertical radius. Percentage values are relative to the width and
height of the gradient box, respectively.
You cannot use a percentage to set the size of a circular gradient because it's ambiguous whether the
percentage should be relative to the width or height of the gradient box.
Both shapes accept any of the following keywords to determine their size:
To demonstrate the effect of these keywords, Figures 19-15 through 19-18 apply them to a circular gradient
and an elliptical one. The center of each gradient is 100px from the left and 50px from the top. They all use the
same color stops:
#C24704, #FFEB79 35%, #00ADA7
The code for each example is in a file named after the keyword, for example, closest-side.html.
Figure 19-15 shows the effect of closest-side . The outer edge of the circular gradient exactly meets the side
of the gradient box closest to the circle's center—in other words, the top. The outer edge of the elliptical gradient
meets the closest side in the horizontal and vertical axes—in this case, the left and top.
Search WWH ::

Custom Search