HTML and CSS Reference
In-Depth Information
figure 8-23
A linear gradient with color stops
yellow 40%
green 50%
yellow 60%
linear-gradient(orange, yellow 40%, green 50%, yellow 60%, orange)
Note that if no color stop is assigned to the first color in the list, it is placed at the
0% position; and if no color stop is assigned to the last color in the list, it is placed at the
100% position.
You can try creating your own linear gradients using the demo_linear_gradients.htm
file in the tutorial.08/demo folder.
Creating Radial Gradients with CSS3
The other type of gradient supported by CSS3 is a radial gradient in which color blend-
ing starts from a single point within the object and proceeds outward in a circular or
elliptical shape, as shown in Figure 8-24.
figure 8-24
A radial color gradient of three colors
radial gradient
background: radial-gradient(red, yellow, blue)
To create a radial gradient in CSS3, use the radial-gradient() function
radial-gradient( center , shape size , color-stop , color-stop , … )
where center is the position of the radial gradient's center, shape is the gradient's
shape, size is the size of the gradient, and each occurrence of color-stop is a color
and its position within the radial gradient. If you don't define the position of the color
stops, they are evenly distributed across the gradient.
The default starting position is the horizontal and vertical center of the object, but you
also can specify the starting position using the keywords top , bottom , left , right , and
Search WWH ::

Custom Search