HTML and CSS Reference
In-Depth Information
Creating a Gradient
• To create a linear gradient, apply the function
linear-gradient(
position
||
angle
,
color-stop
,
color-stop
, …)
where
position
is the starting point of the gradient using the keywords
left
,
right
,
top
, and
bottom
;
angle
is the angle of the gradient; and
color-stop
is the position
and color of each color (entered as
color position
).
• To create a radial gradient, apply the function
radial-gradient(
center
,
shape size
,
color-stop
,
color-stop
, …)
where
center
is the position of the radial gradient's center,
shape
is the gradient's
shape,
size
is the size of the gradient,
color
is the initial color at the center, and
color-stop
is a color and its position within the radial gradient.
• To create a linear gradient in WebKit, apply the function
-webkit-gradient(linear,
start
,
stop
, from(
color
), color-
stop(
percent
,
color
), to(
color
))
where
start
provides the starting location of the gradient,
stop
defines the gradi-
ent's stopping location,
color
is a color value or color name, and the
color-stop()
function identifies the location and color of an intermediate color in the gradient.
• To create a radial gradient in WebKit, apply 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.
• To create a linear gradient in Internet Explorer, apply the filter
Gradient(gradientType=
type
,
startColorStr=#rrggbb
,
endColorStr
=#rrggbb)
where
type
is either 0 for a vertical gradient or 1 for a horizontal gradient,
startColorStr
indicates the starting color, and
endColorStr
indicates the
ending color.
Obviously, to provide cross-browser support for gradients, you need to cover all of the
possible browser extensions as well as the CSS gradient functions. Given the complexity
of creating cross-browser gradient styles, you and Kevin agree to limit your style sheet to
the CSS3 gradient functions. You'll use the
linear-gradient()
function to add a verti-
cal gradient to the
article
element.