Clean Tab Bar Digg-like using CSS

Do you like Digg comments tabbed bar with sliding doors effect for each tab?

This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover). The result is something like this:

Download the source code ready to use in your projects:

Download this tutorial


Tab bar anatomy
Before illustrating the code, a little explanation about our Tab Bar. How you can see in this image, whe have three main elements:

- Active element (Home)
- Standard tab (Community, Messages, Contact)
- Hover element (Blog)

Each element has rounded corners and adapts its width to the text conteined inside it.

Ok, if this is clear how can you do it using CSS and HTML? A good way to implement it is using a <span> element within an <a> element and apply to both elements a background image with rounded corners:

Take a look a this post for more infos about rounded corners in liquid elements for a better explanation about this topic.

Background image with rounded corners
How I said some row above, we'll use just one background image to manage active, standard, hover tab status. The image is the following:

We'll use position properties for CSS background attribute to change the state of each tab (active, standard, hover) in this way:

- Active, background top position: top
- Standard, background top position: 30px
- Hover, background top position: 60px

HTML Code
HTML code for each tab will be something like this:

<a href="community.html"><span>Community</span></a>

... and in this specific case each tag is a <li> element of an <ul> list:

<li><a href="community.html"><span>Community</span></a>>/li>

How you can see, HTML is a simple list:

<ul class="tab">
<li class="active"><a href="home.html"><span>Home </span></a></li>
<li><a href="community.html"><span>Community </span></a></li>
<li><a href="blog.html"><span>Blog </span></a></li>
<li><a href="messages.html"><span>Messages </span></a></li>
<li><a href="contact.html"><span>Contact </span></a></li>
</ul>

When you want an element set to active, you have to add the class "active" to the list element (in bold in the previous code).

CSS code
CSS is a little more complex respect HTML code, but no fear is not so difficult to understand:

ul, li{border:0; margin:0; padding:0; list-style:none;}
ul{

border-bottom:solid 1px #DEDEDE;
height:29px;
padding-left:20px;

}
li{float:left; margin-right:2px;}

.tab a:link, .tab a:visited{

background:url(img/tab-round.png) right 60px;
color:#666666;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;

}
.tab a span{

background:url(img/tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;

}
.tab a:hover{

background:url(img/tab-round.png) right 30px;
display:block;

}
.tab a:hover span{

background:url(img/tab-round.png) left 30px;
display:block;

}

/* -------------------------------- */
/* ACTIVE ELEMENTS */
.active a:link, .active a:visited, .active a:visited, .active a:hover{

background:url(img/tab-round.png) right 0 no-repeat;

}
.active a span, .active a:hover span{

background:url(img/tab-round.png) left 0 no-repeat;

}

It's all. Ready to use in your projects, if you want only changing the background image to adapt it to your custom layout.

Download this tutorial