HTML and CSS Reference
In-Depth Information
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
JavaScript that allows you to dynamically apply different gradients to the page,
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.
