HTML and CSS Reference
In-Depth Information
RedFlower.png
appears at upper left and
BlueFlower.png
appears at lower right.
Gradients
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 {
padding:15px;
background-color:#d0bdbd;
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);
