Digg like navigation bar with CSS3 (almost)

I wonder how easy it is to create a digg like navigation bar with CSS3. No JavaScript, no images. The basic feature provided by CSS3 for such navigation bar is border-radius.

Currently, firefox and all webkit based browsers support this feature. For firefox, we use -moz-border-radius and for webkit based browsers we use -webkit-border-radius. So here it is…

The HTML:
<div id="nav">
<a class="current" href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Products</a>
<a href="#">Solutions</a>
<a href="#">Contact</a>
</div>

The CSS:
#nav {
background: #90b557;
height: 32px;
padding: 12px 0 0 10px;
}

#nav a {
padding: 4px 8px;
margin: 0 10px;
color: #334D0F;
font-family: Trebuchet MS,Arial,sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#nav a:hover {
background: #deeec2;
}

#nav a.current {
background: #deeec2;
color: #000000;
}

digg-nav

With a little more tweaking I was able to make a navigation bar just like smashingmagazine.com. Here is the CSS:
#nav {
background: #404040;
height: 32px;
padding: 12px 0 0 10px;
border-top: 4px solid #eb4c07;
}

#nav a {
padding: 4px 8px;
margin: 0 10px;
color: #ffffff;
font-family: Trebuchet MS,Arial,sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#nav a:hover {
background: #5a5a5a;
}

#nav a.current {
background: #eb4c07;
}

smashingmagazine-nav

I have tested it on Firefox 3.0.5 and 3.1 Beta 2 and it works. I hope it also works well with all Webkit based browsers. Other browsers will not be able to render curved corners but otherwise OK.

Advertisements