HTML and CSS Reference
In-Depth Information
Starting Point
Ending Point
Figure 19-12.
Calculating the starting and ending points of a linear gradient
Although this sounds like a convoluted setup, it's deliberately designed to ensure that the corners of the
gradient box use the color stops at the starting and ending points. As Figure
19-12
shows, the top-left corner of
the gradient box in linear_5.html uses the first color stop (
#C24704
), and the bottom-right uses the last color stop
(
#FFEB79
). So, although the gradient is angled at 135°, the full range of colors runs from one corner to the other
diagonally opposite.
Using Angles with Browser-Specific Prefixes
Browsers started experimenting with gradients before the W3C drafted any specifications. Firefox was the first to
use an angle to specify the direction of the gradient line. However, it decided to use the polar coordinate system
(
http://en.wikipedia.org/wiki/Polar coordinate system
). In this system,
0deg
points to the right and angles
increase counterclockwise, as shown in Figure
19-13
. Opera and WebKit-based browsers later adopted the same
coordinate system.
90°
120°
60°
150°
30°
150°
0°
210°
330°
240°
300°
270°
Figure 19-13.
The polar coordinate system starts on the right and moves counterclockwise
Microsoft added support for CSS gradients much later, so IE 10 follows the official specification and uses
compass coordinates. Firefox 16 also uses compass coordinates in the standard
linear-gradient()
function.
Other browsers will, no doubt, adopt the correct syntax later.
This is where browser-specific prefixes really demonstrate their value. In many cases, you merely repeat
the same values as the standard property. However, to specify the angle of a gradient, you need to use polar
coordinates with the browser-specific functions, and compass coordinates with the standard function. The
“Converting Angles” sidebar explains how to calculate the correct value.
