Hi there. This post is going to cover adding a gradient to our menu from Part I.
This is what the final menu will look like after Part III:
And here is what the gradient will look like added to my menu, after we wrap up Part II:
A note about browser support: IE 10 and current versions of Chrome, Firefox, Safari, and Opera support CSS gradients. IE 9 and prior IE versions do not. To add gradients to prior IE versions, check out filter.
A couple of non-gradient style items:
I added a defined width to the menu because we are going to be looking at border-radius and box-shadows in Part III. I also centered the menu to be able to view it easier. I also added a bit of padding so the gradient fills the space.
CSS:
.nav {
width: 800px;
margin: 0 auto;
}
ul {
padding: 5px;
For the gradients, first I set a fallback background-color (for older browsers and instead of using filter for IE). This is a color I am using in the gradient and will look just fine if gradient is not supported in the users browser.
CSS:
background-color: #dedede;
Now, I am going to add the color stops, or the colors that are going to show in my gradient. I just want two color stops, a light gray (#dedede) and a darker gray (#b3b3b3).
You can add as many colors as you need, the direction of the gradient, as well as the percentage of space each color occupies. These are separated by a comma. Also, keep in mind I am covering a basic linear-gradient here, but you can also use radial-gradient and repeating gradient as the need arises.
CSS:
background-image: linear-gradient(#dedede, #b3b3b3)
But I cannot forget the vendor prefixes that will help my gradient look the way I intend, on older browsers.
CSS:
background-image: -webkit-linear-gradient (#dedede, #b3b3b3);
background-image: -moz-linear-gradient (#dedede, #b3b3b3);
background-image: -ms-linear-gradient (#dedede, #b3b3b3);
background-image: -o-linear-gradient (#dedede, #b3b3b3);
And viola! Check out the live code here.
I used several resources in building this article including:
gradients on MDN
gradient generator