CSS Tabs

I’ve written a couple of examples of CSS Tabs in the past but both are a little outdated now so I thought it was a good time to revisit these and rewrite them using CSS3 that degrades gracefully and works in all browsers.

CSS Tabs Demo

Here’s an example of what this HTML and CSS will generate:

This version of the CSS3 Tabs menu doesn’t use any images so it’s very easy to adapt and use different colours if required.

CSS Tabs HTML

Here’s the HTML you’ll need:

<div class="demo tabs">
<nav>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

It’s essentially, a simple unordered list within an HTML5 nav element, which should be familiar to anyone used to writing HTML5.

Tabs CSS

.demo.tabs {
font-family:helvetica,arial,sans-serif;
font-size:13px;
}
.demo.tabs a {
-moz-border-radius:5px 5px 0 0;
background-color:#ddd;
background-image:-moz-linear-gradient(#f0f0f0,#ddd);
background-image:-ms-linear-gradient(#f0f0f0,#ddd);
background-image:-webkit-linear-gradient(#f0f0f0,#ddd);
background-image:linear-gradient(#f0f0f0,#ddd);
background-repeat:repeat-x;
border:1px solid #555;
border-color:#eee #ccc #ccc #eee;
border-radius:5px 5px 0 0;
color:#333;
float:left;
padding:5px 15px;
text-decoration:none;
}
.demo.tabs a:hover {
background-color:#ddd;
background-image:-moz-linear-gradient(#e0e0e0,#ccc);
background-image:-ms-linear-gradient(#e0e0e0,#ccc);
background-image:-webkit-linear-gradient(#e0e0e0,#ccc);
background-image:linear-gradient(#e0e0e0,#ccc);
background-repeat:repeat-x;
}
.demo.tabs li {
bottom:-1px;
float:left;
margin:0 3px 0 0;
position:relative;
}
.demo.tabs li.current a {
background:#fff;
border-bottom:1px solid #fff;
}
.demo.tabs li.current a:hover {
background:#fff;
border-bottom:1px solid #fff;
}
.demo.tabs nav {
border-bottom:1px solid #ccc;
padding:0 0 0 10px;
zoom:1;
}
.demo.tabs nav:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.demo.tabs ul {
list-style:none;
margin:0;
padding:0;
}

We’re using CSS3 border radius on the anchor along with a background colour and borders, however we’re also using CSS3 gradients to colour the tabs.

The gradients and border radius won’t work in older browsers but they will still be completely functional albeit with a solid background colour and square borders.

Although this means that people with older browsers won’t get quite as nice an experience when viewing the page, it does mean that the loading time for the page will be much quicker due to the lack of images required to otherwise achieve this and it’s also much more flexible if the client decides they want to change the colour of these tabs, change the spacing or change the font for example.