HTML and CSS Reference
In-Depth Information
Working with Gradients
With CSS3 you can easily create a gradient by setting the
background-image
attribute using the
linear-gradient
function. With this function you can specify the beginning and ending color as well as the angle that the gradient
should be applied. You'll use a gradient in the main heading, which has the
intro
class.
Add the following rule at the end of the
style
element:
/* Gradients */
.intro
{
border: 1px solid #999999;
text-align: left;
padding-left: 15px;
margin-top: 6px;
border-radius: 25px;
background-image: -webkit-linear-gradient(45deg, #ffffff, #6699cc);
background-image: linear-gradient(45deg, #ffffff, #6699cc);
}
■
The intellisense in WebMatrix doesn't recognize the
linear-gradient
attribute and will show this as a
Css validation error. you can ignore this.
Note
This will apply the gradient as a 45° angle. This also creates a rounded border. The page should now look like
Figure
4-9
.
Figure 4-9.
Using a gradient background
Creating Tables
It is generally considered bad practice to use tables in your markup for formatting purposes. This type of
formatting is better done in the style sheet. You can then update the style if a different format is needed. You
might have noticed that the current web page has the
aside
element following the main content instead of the
two aligned side-by-side. You'll setup a table now using CSS to correct that.
Add the rules shown in Listing 4-4 at the end of the
style
element:
