HTML and CSS Reference
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
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