HTML and CSS Reference
In-Depth Information
}
2.
Save styles.css.
When using gradients, the vendor prefix is prefixed to the property value rather than the property.
First, you add
20px
of padding to the showcase button, which places space between the border of the box and the
content. You learn about this property in Chapter 7. The purpose of this padding is just to make the area a little big-
ger so you can see that fancy gradient better!
I mentioned previously you wouldn't have to write all of the vendor-prefixed properties yourself but just to demon-
strate the safest way to use gradients, you've done so in this rule set. The
-webkit-
property uses the outdated
syntax for gradients, which you'll look at in a moment. The
-moz-
property applies to Firefox versions 3.6 to 15.
The
-o-
property applies to Opera 11 and the official, unprefixed property applies to Internet Explorer 10+, Opera
12+, and Firefox 16+, it will eventually apply to future versions of WebKit browsers too. Note that because Internet
Explorer 9 doesn't support gradients at all and Internet Explorer 10+ only supports the official unprefixed property, a
prefixed
-ms-
property is not required. Should you include it, though, it won't affect anything.
So, now you know how to achieve gradients in the widest amount of browsers, what does the
linear-gradi-
ent()
function do?
As evident in Figure 5-15,
linear-gradient()
specifies the gradient line (the direction of the gradient) and two
color stops, which consist of a color and the position of that color.
Figure 5-15
The linear gradient applied to the showcase button, starting with a hot pink, going into a darker pink at the
bottom.
Gradient Line
The default argument for the gradient line is the keyword
to bottom
, so technically in this example,
to bottom
can be omitted and the same effect would be achieved. The keyword
to bottom
starts the gradient from the top
and ends at the bottom. Other gradient line keywords are
to top
(going from bottom to top),
to right
(going
from left to right), and
to left
(going from right to left).
Note that WebKit doesn't understand these keywords and instead opts for
top
,
bottom
,
left
, and
right
(the
outdated syntax), which denote the starting point of the gradient and are the equivalents of
to bottom
,
to top
,
to right
, and
to left
.
If you would like something other than a straight gradient line, you can specify an angle in degrees. The preceding
keywords each represent an angle;
to top
is
0deg
,
to right
is
90deg
,
to bottom
is
180deg
, and
to