HTML and CSS Reference
in both coordinate systems, 360° represents a full circle, but angles are measured in opposite directions.
Also, 0° in the polar coordinate system is at the same position as 90° in compass bearings.
To calculate the polar-coordinate angle for the browser-specific functions, use the following steps:
if the compass-bearing angle is 90° or less, subtract 90.
if the compass-bearing angle is greater than 90°, subtract 450.
Remove the minus symbol from the result to get the polar-coordinate angle.
For example, if the compass-bearing angle is 30°, subtracting 90 leaves -60°. Removing the minus symbol
produces 60°. if the compass-bearing angle is 135°, subtracting 450 leaves -315°. Removing the minus
symbol produces 315°.
The gradient definitions in linear_5.html look like this:
background-image: -moz-linear-gradient( 315deg , #C24704, #FFEB79);
background-image: -o-linear-gradient( 315deg , #C24704, #FFEB79);
background-image: -webkit-linear-gradient( 315deg , #C24704, #FFEB79);
background-image: linear-gradient( 135deg , #C24704, #FFEB79);
Although the angles look completely different, each browser produces an identical gradient.
Creating Radial Gradients
A radial gradient emerges from a single point with the colors spreading outward in a circular or elliptical shape
(see Figure 19-14 ).
Figure 19-14. Radial gradients can be circular or elliptical
You define the gradient with the radial-gradient() function, which optionally sets the size and position of
the circle or ellipse. The browser-specific functions use a similar syntax to the standard one, but there are some
The radial-gradient() function takes the following arguments:
Shape: The accepted values are circle and ellipse .
Size: This determines the extent of the radial gradient, either using specific dimensions