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 {
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:// , fo r example).
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() :
Search WWH ::

Custom Search