HTML and CSS Reference
In-Depth Information
1.
<div class="alert-success">
2.
Woo hoo! Congratulations, you did it!
3.
</div>
CSS
1.
.alert-success {
2.
background: #67b11c;
3.
background: linear-gradient(#72c41f, #5c9e19);
4.
border: 2px solid #467813;
5.
border-radius: 5px;
6.
color: #fff;
7.
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
8.
padding: 15px 20px;
9.
}
In Practice
With gradient backgrounds now in the mix, let's create a new row for our Styles Conferen-
ce website, this time using a gradient.
1.
We'll create a new row with a gradient
background
by using the class of
row-
alt
. Because the new row will share the same
min-width
property and value as
the
row
class selector, we'll combine these two selectors.
1.
.row,
2.
.row-alt
{
3.
min-width: 960px;
4.
}
Next we'll want to create new rule sets to apply styles specifically to the
row-
alt
class selector. These new styles will include a gradient
background
that
starts with green and transitions to yellow, from left to right.
Using the
linear-gradient()
function with the appropriate values and
vendor prefixes, we'll add the gradient
background
to the
row-alt
class rule
set. We'll also include a single
background
color before the gradient
back-
ground
as a fallback, just in case a browser doesn't support gradient back-
grounds.
Lastly, we'll also add in some vertical
padding
.
Our updated row section now looks like this:
Search WWH ::
Custom Search