Create a Stylish Tab-Based Interface with CSS3

In this tutorial you will learn how to design a tab-based interface styled entirely with CSS3 and containing no images. This tutorial highlights some of the great features that CSS3 offers to enhance your web designs.


CSS3 Tab Interface

View the Demo

The HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS3 Tab Interface</title>
</head>
<body>
<div id="container">
<ul id="navlist">
<li><a class="current" href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a></li>
</ul>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et ligula eros. Quisque tellus nulla, sollicitudin id molestie rhoncus, pellentesque viverra leo. Aliquam ornare, odio ac lobortis congue, turpis diam elementum justo, nec euismod urna purus ac nibh. Suspendisse pellentesque malesuada lorem, quis molestie lectus mollis sit amet. Mauris ac lacus augue, vel ullamcorper eros. Duis eu ipsum ante, et scelerisque elit. Integer sed tortor quam. Aliquam a lorem id sem ullamcorper luctus sit amet eget enim. Nulla sem libero, sagittis ac venenatis sit amet, faucibus at arcu. Integer lacinia neque turpis, et faucibus sem. Sed in cursus odio. Fusce molestie, dolor quis fermentum iaculis, tellus risus bibendum risus, eget adipiscing turpis augue vitae quam. Praesent condimentum eros vel erat tincidunt cursus. Etiam at ligula et nunc tincidunt mattis. Aliquam pretium bibendum ultrices. Phasellus ac lobortis risus. Praesent ipsum sem, cursus ut aliquet ut, iaculis vestibulum ipsum. Ut vel eros ac nulla condimentum congue.
</p>
<p>
Integer porta, mi ut consequat elementum, est dui interdum ante, tincidunt placerat ligula libero sed odio. Fusce iaculis neque sit amet enim aliquam at rhoncus magna lobortis. Vivamus quis pretium felis. Suspendisse velit arcu, fringilla eget ultrices sed, blandit at purus. Praesent tristique facilisis neque, nec suscipit est scelerisque id. In arcu urna, tincidunt et vehicula et, consectetur id mauris. Aliquam in arcu ut augue cursus pulvinar et at metus. Nam ac enim eros. Sed in ullamcorper odio. Donec lacinia arcu eu augue luctus congue. Nam eu justo in nibh molestie faucibus. Donec sodales nisl scelerisque nibh tempor pretium. Proin at enim at justo condimentum eleifend. Vestibulum ac eros urna, vestibulum porta tellus.
</p>
</div>
</div>
</body>
</html>

As you can see, the HTML markup is pretty basic. We want to first create a container div to hold everything together and allow us to center the interface. Next, add a simple unordered list to create the tab navigation. Lastly, create a content div with whatever content you want to display: paragraphs, images, ect.

The CSS


body {
background-color: #aaa;
}

#container
{
margin: 0 auto;
padding: 10px 0px 0px 0px;
width: 800px;
}

#navlist li
{
list-style-type: none;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
width: 100px;
height: 50px;
display: block;
float: left;
margin-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
-moz-box-shadow: 0 1px 0 #A9422E, 0 -1px 0 #A9422E;
-webkit-box-shadow: 0 1px 0 #A9422E, 0 -1px 0 #A9422E;
background-color: #E95C41;
border-top: 1px solid #EE836F;
}

#navlist li a
{
text-shadow: 1px 1px 0 #444;
color: #fff;
text-decoration: none;
padding: 20px 0 0 0;
text-align: center;
width: 100px;
float: left;
}

#navlist li a:hover, #navlist li a.current
{
list-style-type: none;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
width: 100px;
height: 30px;
background-color: #f0674c;
display: block;
text-align: center;
}

#content
{
margin: 0px 0 50px 50px;
width: 540px;
background-color: #FFF;
float: left;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-box-shadow: 0px 0px 10px #555;
-webkit-box-shadow: 0px 0px 10px #555;
}

#content p {
padding: 5px 20px 5px 20px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 18px;
}

We’ll use the border-radius CSS3 property on the list items (#navlist li) to create the rounded corners at the top of each tab. The CSS3 box-shadow property is also used to create a small shadow just above each tab which adds some depth. The border-top property is used to create a small highlight at the top of each tab.

For the actual text inside the tab, (#navlist li a) we’ll add the text-shadow CSS3 property to create a slight drop shadow behind the text. The hover selector is used to create a highlight effect when each tab is moused over. You can also add a current selector to show which tab is currently active.

Lastly, we’ll use the border-radius and box-shadow properties to the content selector to round the bottom corners and add some more depth to the interface.

This sums up the style of the tab-based interface, keep in mind that this is just a template, feel free to customize and use however you see fit. Also remember that CSS3 is not fully compatible with every browser yet, (it’s best viewed in Firefox, Safari, and Chrome) so make sure you take that into account when styling with CSS3.

Related Posts