Create Simple Navigation using CSS3 Styling

HTML5 and CSS3 are considered as the future of the web. Now you can make your website the way you want using just HTML and CSS. You can use Shadows to text, box, use of gradients, simple animations, embedding Videos and much more. HTML5 and CSS3 have just changed the way; web developers look at coding the site.

In this tutorial we are going to use some of the basic techniques of the CSS3. We are creating simple navigation menu with linear gradient created in CSS3 style sheet. We are also going to use text-shadow effect to give our text a nicer look.

So let’s start with the HTML first.


Create a new HTML file and add an unordered list containing the menu elements.

Save the file and preview it in browser, it should look like this.



Now create new Cascaded Style Sheet (CSS) and save it in the same folder as of HTML file.


Attach the CSS file to above HTML file.


Add the following style in the CSS file to give your navigation some clean look.

Applying Shadow:

-moz-box-shadow is used for Mozilla. Syntax is
-moz-box-shadow: x-offset y-offset blur color;
-webkit-box-shadow is used for Webkit. Syntax is
-webkit-box-shadow x-offset y-offset blur color;
box-shadow is used for Standard Browsers. Syntax is
box-shadow: x-offset y-offset blur color;


Applying Gradient:

For Mozilla client gradient is applied using the following syntax

background: -moz-linear-gradient(position of start, from color, to color);

and for Webkit it is

background: -webkit-gradient(type of gradient, position of start, position of stop, from color, to color);

Creating Rounded Corners:

This is one of the most beautiful addition to CSS3. You can create rounded corners with just a two lines of code.


-moz-border-radius: radius size in px;

-webkit-border-radius: radius size in px;


Let’s add some hover effect. Add the following code in CSS file to get cool hover effect.



Try with different color combination to get exciting results.
You can download my file below for experimenting.

By using our network+ certification and 640-864 e-book facility, you can carry your 642-681 prep solutions anywhere along with you. The 70-681 dumps and E20-322 exam tutorials are also accessible with free downloadable feature.

22 thoughts on “Create Simple Navigation using CSS3 Styling

  1. Great job, Nikhil! And we shouldn’t waiting for the IE9 accept the CSS3. They
    And we should not wait for IE9. They, ‘Microsoft’, is that they must adapt to the new standards!

  2. This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time. I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. 🙂

  3. Lovely post, i had been struggling to find something like this for quite a while. Thanks a lot for sharing. I am going to add it to my CSS aggregator site.

  4. I do not even understand how I finished up right here,
    but I thought this submit used to be good. I do not recognize who you might
    be however definitely you’re going to a famous blogger for those who are not already.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.