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.