Creating Gradients Without Images - Beginning CSS3 - page 426

Creating a Smooth Repeating Gradient
The repeating gradient in the preceding example creates the illusion of stripes because there are only two color
stops and the distance between them is very short. To create a more fluid repeating gradient, the first and last
color stops need to be the same color.
The gradient in repeating-linear_2.html uses two shades of yellow like this:
background-image: repeating-linear-gradient(to right, #D9CC3C, #FFEB79 5%, #D9CC3C 10%);
The darker yellow is used as the first color stop. It has no declared position, so it defaults to the starting point
of the gradient line. The lighter yellow is the second color stop at 5% , and the first color is repeated at 10% . This
produces the ridge effect shown in Figure 19-20 .
Figure 19-20. Using the same color for the first and last color stops produces a constant transition
The values for the browser-specific versions are identical, except for WebKit, which treats keywords as the
origin of the gradient line. Instead of to right , WebKit needs the first argument to be left .
Creating Repeating Radial Gradients
The repeating-radial-gradient() function and its browser-specific equivalents work exactly the same way.
The gradient in repeating-radial.html looks like this:
background-image: repeating-radial-gradient(circle at 50% 100%, #FFEB79, #D9CC3C 5%);
This creates a circular gradient anchored at the center bottom with two color stops. The first color stop (light
yellow) is anchored at the starting point—in other words, the center of the circle—and the second one (darker
yellow) is positioned at 5% along the gradient ray. The size isn't specified, so it defaults to farthest-corner ,
producing the gradient in Figure 19-21 .
Figure 19-21. A repeating radial gradient that looks like the rings of a tree
The browser-specific versions require the position as the first argument like this:
background-image: -moz-repeating-radial-gradient(50% 100%, circle, #FFEB79, #D9CC3C 5%);
background-image: -o-repeating-radial-gradient(50% 100%, circle, #FFEB79, #D9CC3C 5%);
background-image: -webkit-repeating-radial-gradient(50% 100%, circle, #FFEB79, #D9CC3C 5%);