HTML and CSS Reference
FIGURE 4.14 My gradient app
allows you to quickly experi-
ment with gradients.
Yo u c a in a l s o s p e c i f y t h e d i r e c t i o in y o u w a in t t h e g r a d i e in t t o t r a v e l i in u s i in g a in
angle. Zero degrees ( 0deg ) is the equivalent of to right ; as you increase the angle,
it travels around counterclockwise. So the subsequent equivalents would be 90deg
= to top , 180deg = to left , 270deg = to bottom . Bear in mind that 135deg will not
be the equivalent of to top left (as you might expect) unless the container is a
perfect square: The diagonal keywords will change the angle so the gradient will
always run from one corner to the other. As a result, you can choose keywords or
angles, depending on the effect you want to create.
Note: The spec states that 0deg is the equivalent of the keywords to top , but
browsers don't follow this currently. This could change in the future.
NOTES: If you look at the code for the linear gradient example, you'll notice that I've
included five lines for the gradient—a prefixless line and one for all four major ren-
dering engines. (Opera, Chrome, Firefox, Safari, and IE all support linear and radial
gradients now with vendor prefixes.)
Check out my linear-gradient-app.html file in the chapter4 code download folder
(which looks like Figure 4.14). It is a simple little page I put together using some
either by clicking the preset buttons or entering your own linear-gradient(...);
value into the form input and clicking the Create! button. You need to include
the semicolon, but you don't need to include all the vendor prefixes—just one
single nonprefixed version is all you need.