HTML and CSS Reference
In-Depth Information
RedFlower.png appears at upper left and BlueFlower.png appears at lower right.
In Chapter 4, you learned to draw gradients—linear and radial—on the canvas. CSS3 provides ways to
draw a gradient background. You can do this using two CSS functions: linear-gradient() and radial-
gradient() . They draw box backgrounds with linear and radial gradients, respectively. As of this writing,
linear-gradient() and radial-gradient() aren't fully implemented by some browsers, so you need to use
them with the browser prefixes ( -ms- , -moz- , -webkit- , and so on) discussed earlier. The following CSS rule
shows how to use linear-gradient() :
.linearGradient {
border: 2px solid #071394;
background: -moz-linear-gradient(left, yellow, white);
background: -webkit-linear-gradient(left, yellow, white);
background: -o-linear-gradient(left, yellow, white);
The function prefixed with -moz- targets Firefox, the one prefixed with -webkit- targets Chrome and
Safari, and the one prefixed with -o- targets Opera. The function's first parameter specifies the starting
edge for drawing a gradient. Left means a gradient is drawn starting from the left until it reaches the right
side of the box. If you specify top , the direction of gradient is from top to bottom. The second and the third
parameters specify the start and end colors for the gradient. Figure 13-15 shows how this gradient looks.
Figure 13-15. Drawing a linear gradient
The example gradient starts with a yellow color and gradually fades to white. You can also specify the
starting point (first parameter) as an angle. For example, 0deg , 90deg , 180deg , and 270deg mean left,
bottom, right, and top, respectively. Any angle between these values shifts the starting point in the corner
accordingly. Additionally, you can specify a series of colors for the gradient rather than just the start and
end colors:
-webkit-linear-gradient(left, orange, yellow, white);
Search WWH ::

Custom Search