Tutorials

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.

STEP 1:

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.

STEP 2:

 

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.

css" type="text/css"/>
DEMO :: Simple Navigation using CSS3 Styling

STEP 3:

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

body{
	background: #666;
    font-family: Helvetica, arial, sans-serif;
}

#nav {
	width: 500px;
	margin: 50px auto;
}

#nav ul {
	float: left;
	list-style-type: none;
	width: 450px;
	height: 44px;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

	background: #e3e3e3;
	background: -moz-linear-gradient(top, #ccc, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));

	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333;

	text-shadow: 0 1px 0 white;
}

#nav ul a{
	display: block;
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	float: left;
	color: #454545;
	font-size: 20px;
	text-decoration: none;
}

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.

Syntax:

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

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

STEP 4:

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

 

 

#nav ul a:hover{
	display: block;
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	float: left;
	color: #ddd;

	text-shadow: 0 1px 0 black;

	background: #555;
	background: -moz-linear-gradient(top, #444, #555);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}

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 comments
  1. Maux

    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. Sivaranjan

    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. homepage

    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.
    Cheers!

Leave a Reply to Septian Cancel reply

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

Editor's choice