HTML and CSS Reference
In-Depth Information
the
color-stop()
function identifies the location and color of an intermediate color in
the gradient. For example, the linear gradient
linear-gradient(left, yellow, blue)
would be written in WebKit's
gradient()
function as follows:
-webkit-gradient(linear, left center, right center, from(yellow),
to(blue) )
Note that for the
start
and
stop
values, you must specify both the horizontal and
vertical positions. A vertical linear gradient with multiple color stops such as
linear-gradient(orange, yellow 50%, green 60%)
would be entered as
-webkit-gradient(linear, center top, center 60%, from(orange),
color-stop(50%, yellow), to(green))
The WebKit
gradient()
function can have multiple color stops, but the location can
be entered only as a percentage of the object's width.
WebKit also supports radial gradients using the function
-webkit-gradient(radial,
inner-center
,
inner-radius
,
outer-center
,
outer-radius
, from(
color
), color-stop(
percent, color
), to(
color
))
where
inner-center
and
outer-center
set the centers of the first and last color
in the color list, respectively;
inner-radius
sets the endpoint of the first color; and
outer-radius
sets the starting point of the last color. The values for
inner-center
and
outer-center
can be expressed in pixels, as a percentage of the width and height
of the object, or by using a keyword; while the values for the
inner-radius
and
outer-radius
can be expressed only in pixels. Figure 8-26 shows an example of a
linear gradient and a radial gradient created using the WebKit
gradient()
function.
figure 8-26
Gradients using the WebKit gradient() function
background:
-webkit-gradient(linear, 0% 100%, 100% 80%,
from(blue), to(yellow));
background:
-webkit-gradient(radial, center center, 10, center
center, 60,
from(orange), color-stop(30%, yellow), to(green));
