HTML and CSS Reference
In-Depth Information
In this example, three colors are specified: orange, yellow, and white. So, the gradient is orange to
begin with, then turns yellow, and finally fades to white.
Drawing a radial gradient is similar to drawing a linear gradient. The only difference is that instead of
starting from one edge and ending at another edge, the gradient begins in the center and ends at the box's
boundary. The following CSS rule shows how to use
radial-gradient()
:
.radialGradient {
padding:15px;
background-color:#d0bdbd;
border: 2px solid #071394;
background: -moz-radial-gradient(circle, yellow, white);
background: -webkit-radial-gradient(circle, yellow, white);
background: -o-radial-gradient(circle, yellow, white);
}
The first parameter of the
radial-gradient()
function indicates the start position of the gradient's
center. The most common value is
center
, which means the center of the box is the starting point. The
other two parameters represent the start and end color of the gradient, as with
linear-gradient()
. Figure
13-16 shows the radial gradient.
Figure 13-16.
Using the
radial-gradient()
function to draw a radial gradient
Note that this section discusses only basic use of the gradient functions. These functions provide more
complex ways of drawing and fine-tuning gradients. You can read more on the Internet (
https://
Transparency
In addition to displaying a background, you can control the box's opacity. CSS3 provides two ways to
handle the opacity of an element: the
rgba()
function and the
opacity
property. The
rgba()
function
specifies red, green, and blue color values as numbers as well as an alpha value that controls an element's
opacity. The
r
,
g
, and
b
numbers take a value between 0 and 255; the
alpha
parameter can be any value
between 0 to 1, where 0 means fully transparent and 1 means fully opaque. The following CSS rule shows
how to use
rgba()
:
