Using CSS3 Gradients

I recently explained how to create a drop-down navigation menu for your web apps. Now, I’d like to build on that tutorial just a bit, and teach you some techniques to improve the overall appearance of your menu.

Today, I’ll show you how to use CSS3 gradients to give your menu a polished look and feel. In the past, adding a gradient to our menu would’ve required an image. While images work just fine, they do have a couple of drawbacks:

1-They increase the overall page size. The more images used in a web app or page, the larger the page size. A heavy page loads slower, which is especially important if it’s accessed on a mobile device.

2-They’re inflexible: CSS3 gradients will adjust to the size of the element. Images won’t. For instance, if my header is 50px high and uses an image in the background, I have to create a new image if the header height changes.

Let’s get started

Before we get started, take a look at both demo pages.

Here’s the menu we created last time.

Today, we’ll be adding a gradient to that menu, which will give us a menu that looks like this.

That menu looks much better with the gradient, doesn’t it? The best part is, the process is really simple. Ready to learn how? Let’s get started.

How it’s done

We’re going to add a gradient to the top blue rectangle in the demo. It will fade from a dark shade of blue to a lighter shade of blue, giving it a curved effect. To do this, we’ll only need to alter this style:

Code:

 
#wrap	{
		width: 100%;
		height: 50px; 
		margin: 0; 
		z-index: 99;
		position: relative;
		background-color: #366b82;
		}

Now, writing the actual syntax for the gradient is sort of tricky. Each browser handles gradients differently, so you would need to write a separate style for each. You would also need to know the RGB code for each color used in the gradient, which is a real pain.

The good news: We don’t have to do any of that! There are some great CSS3 gradient generators out there that let you create a custom gradient and then generate all the syntax for you. I personally prefer this one, which is what we’ll use today.

To create my gradient, I choose the starting color and the ending color, plug them into the gradient generator, and copy the code. For this demo, I’m starting with a dark shade of blue (#104566) and ending with a lighter shade of blue (#528db2). When I plug those colors into the generator, it creates a set of styles that I can then apply to the “#wrap” element, which looks like this:

Code:

 
#wrap	{
		width: 100%;
		height: 50px; 
		margin: 0; 
		z-index: 99;
		position: relative;
		background: rgb(82,141,178); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(82,141,178,1) 0%, rgba(16,69,102,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(82,141,178,1)), color-stop(100%,rgba(16,69,102,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(82,141,178,1) 0%,rgba(16,69,102,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(82,141,178,1) 0%,rgba(16,69,102,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(82,141,178,1) 0%,rgba(16,69,102,1) 100%); /* IE10+ */
		background: linear-gradient(top,  rgba(82,141,178,1) 0%,rgba(16,69,102,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#528db2', endColorstr='#104566',GradientType=0 ); /* IE6-9 */
                Zoom: 1;
	}

(Can you see why I wouldn’t want to type all of that in manually?)

To complete the menu bar gradient, just remove the background color from the “.navbar li” element. Now, the menu bar has a nice gradient! (One quick note: I’ve added “zoom: 1;” immediately after the “filter” style. This is ensures that it works with IE7. )

Finally, I want to apply a gradient to each menu item when they are hovered over. It’s the same process: I just plug my starting and ending colors into the gradient generator, and apply the results to the style listed below:

Code:

 
.navbar li:hover > a	{
			color: #104566;
			background: rgb(239,236,202); /* Old browsers */
			overflow: visible;
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efecca', endColorstr='#a7a37e',GradientType=0 ); /* IE6-9 */
			zoom: 1;
			background: -moz-linear-gradient(top,  rgba(239,236,202,1) 0%, rgba(167,163,126,1) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,236,202,1)), color-stop(100%,rgba(167,163,126,1))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  rgba(239,236,202,1) 0%,rgba(167,163,126,1) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  rgba(239,236,202,1) 0%,rgba(167,163,126,1) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  rgba(239,236,202,1) 0%,rgba(167,163,126,1) 100%); /* IE10+ */
			background: linear-gradient(top,  rgba(239,236,202,1) 0%,rgba(167,163,126,1) 100%); /* W3C */					
}		

Now we have a nice gradient on our menu bar, which changes when any menu item is hovered over. There is one small problem though: When we move the cursor down through the drop-down menu, we lose the gradient on the menu item. To fix this, we’ll just need to alter the “.navbar li” element. Just change the height from “auto” to “50px”, and this problem should disappear. One more thing: Since the drop-down items were sharing the height of the menu items, we need to add “height: auto;” to the “.navbar li ul li” element. I’m also going to change that element’s background color to “#528db2”, but that part is entirely up to you.

Conclusion

That’s it! Thanks to the help of the gradient generator, this is a very simple job. In just a few minutes, you can dramatically improve the look and feel of your web apps using CSS3 background gradients!

Related Posts:

  • No Related Posts

One thought on “Using CSS3 Gradients

Leave a Reply

Your email address will not be published. Required fields are marked *