HTML and CSS Reference
In-Depth Information
To create a linear gradient:
◗
1.
Return to the
effects.css
file in your text editor. At the bottom of the file, insert
the following style rule as shown in Figure 8-27:
/* Style rule to add a dark green vertical gradient to the
background of the article element */
article {
background: -o-linear-gradient(black, rgb(51,101,51) 20%, white
80%);
background: -ms-linear-gradient(black, rgb(51,101,51) 20%, white
80%);
background: -moz-linear-gradient(black, rgb(51,101,51) 20%, white
80%);
background: -webkit-linear-gradient(black, rgb(51,101,51) 20%,
white 80%);
background: linear-gradient(black, rgb(51,101,51) 20%, white 80%);
}
figure 8-27
Defining a linear gradient
vertical linear gradient
starting with the color
black, placing dark
green 20% down the
gradient, and ending
with white 80% down
the gradient
◗
2.
Save your changes to the file, and then reopen the
treebook.htm
file in your
browser. Figure 8-28 shows the vertical gradient as it appears in the Google
Chrome browser.
