HTML and CSS Reference
In-Depth Information
Click here to view code image
1. <div class="alert-success">
2. Woo hoo! Congratulations, you did it!
3. </div>
Click here to view code image
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-
Lastly, we'll also add in some vertical padding .
Our updated row section now looks like this:
Search WWH ::

Custom Search