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.

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

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

Hello,
this CSS code is great, but i’ve a problem with Internet Explorer.
IE don’t recognize the nav background neither the police.
Does anyone has an idea or a solution?
Of course, i’m not using IE, but so much people ‘re still using it…

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!