HTML and CSS Reference
In-Depth Information
Figure 5-11.
Creating an Irish flag using CSS3 gradient color stops
Radial Gradients
Radial gradients are slightly more complex than linear gradients. You can
specify where the gradient's position should start from and its shape. Radial
gradients have the following syntax.
.box {
background: -webkit-radial-gradient(center, [circle|elipse]
[closest-side|closest-corner|farthest-side|farthest-corner|contain|cover],
start-color, stop-color);
}
You can specify the center position in pixels, or percentage left and top
positions. The second argument accepts a shape keyword, and this can be
either a circle or an ellipse. The second argument also accepts a size keyword,
these are
closest-side
,
closest-corner
,
farthest-side
,
farthest-corner
,
contain
, and
cover
. Finally, the gradient also accepts a start and stop color as
hex, keyword, RGB, or RGBA colors.
For instance, you can make a Japanese flag using CSS3 using the following
code, the result of which can be seen in Figure 5-12.
.box {
background: -webkit-radial-gradient(center, circle contain, red, white);
}
