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
-webkit-gradient(linear, 0% 100%, 100% 80%,
from(blue), to(yellow));
-webkit-gradient(radial, center center, 10, center
center, 60,
from(orange), color-stop(30%, yellow), to(green));
Search WWH ::

Custom Search