CSS: shadowed tabbed menu

With the new release of Internet Explorer 9 we can start using all the recently added features of CSS3. Among these features, box shadows are certainly the most interesting from a web design perspective. In this post I'm going to show you how to create a tabbed menu having shadows on each tab item. First of all, let's start with our markup:

<ul id="navigation">

 <li><a href="#">Home</a></li>
 <li><a href="#">Articles</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contacts</a></li>

</ul>

Now we can add our CSS styles:

#navigation {
 height: 100%;
 margin: 0;
 padding: 1em 1em 0 1em;
 list-style: none;
 border-bottom: 1px solid #999;
 overflow: hidden;
}

#navigation li {
 height: 100%;
 float: left;
 margin-right: 0.5em;
 background: #ffc;
 box-shadow: inset 4px 1px 4px rgba(204, 204, 204, 0.5);
 border-radius: 6px 0 0 0;
 font-size: 1.4em;
}

#navigation a {
 float: left;
 height: 100%;
 color: #c00;
 text-decoration: none;
 border-radius: 0 6px 0 0;
 box-shadow: 4px 1px 4px rgba(204, 204, 204, 0.5);
 padding: 0.5em;
}

On each list item, we've used the inset keyword of the box-shadow property so that the rendered shadow will appear outside the box edge. On the contrary, on each link we've used this property without any keyword to create the final effect of two side shadows on each tab. To smooth this effect, we've also used the RGBA notation by specifying a semi-transparent light grey color (equal to #ccc using the hexadecimal notation). You can see the demo below.

Demo

Live demo