HTML and CSS Reference
In-Depth Information
CONVERTING ANGLES
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:
1.
if the compass-bearing angle is 90° or less, subtract 90.
2.
if the compass-bearing angle is greater than 90°, subtract 450.
3.
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
significant differences.
Standard Syntax
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
or keywords.
