Whenever we think about tabs, we think about JavaScript. But tabs can be created using CSS only as well. Even the transitions can be achieved using CSS. These tabs behave like general JavaScript Tabs. I am using the Navigation Menu which I created a while ago, the navigation menu gives the ability to link to specific tabs through hash tags in the URL. 
The Code
The CSS
body {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
background: #545454;
margin: 0;
border-top: 7px solid #52a8e8;
text-shadow: 0 0 3px rgba(0, 0, 0, 1);
letter-spacing: 2px;
font-size: 20px;
background: #fff url(grain.png);
}
a {
text-decoration: none;
color: #fff;
}
header {
width: 870px;
margin-left: auto;
margin-right: auto;
}
header nav a {
position: relative;
float: left;
width: 150px;
text-align: center;
padding-top: 23px;
padding-bottom: 30px;
margin-right: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
background: #52a8e8;
background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #4984ce));
background: -moz-linear-gradient(center top, #52a8e8 20%, #4984ce 100%);
background: -o-linear-gradient(#52a8e8, #4984ce);
}
header nav a:hover {
padding-top: 53px;
padding-bottom: 60px;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
}
h1 {
clear: both;
text-align: center;
font-size: 45px;
}
blockquote {
font: 16px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #222;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.50);
}
.author {
float: right;
padding-right: 75px;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.50);
}
#box {
margin: 150px auto;
width: auto;
text-align: left;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
#boxes {
width: 925px;
margin-left: auto;
margin-right: auto;
position: relative;
min-height: auto;
}
.box:target,
.box:first-child {
opacity: 1;
-moz-opacity: 1;
}
.box {
opacity: 0;
-moz-opacity: 0;
position: absolute;
top: 0;
left: 0;
width: auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.box:target span {
height: auto;
width: auto;
background: #fff;
display: block;
position: absolute;
top: -32px;
z-index: 0;
}
.box ul,
.box p {
line-height: 1.5em;
padding-top: 1em;
}
#boxes a {
color: #52a8e8;
text-shadow: 0 1px 1px rgba(0, 0, 0, 1);
}
.box li a {
display: block;
line-height: 2.2em;
font-size: 14px;
margin-bottom: 6px;
padding-left: 10px;
}
#boxes ul li a:hover {
color: #fff;
font-weight: bold;
text-decoration: none;
}
.container {
height: 300px;
width: 925px;
margin-left: auto;
margin-right: auto;
background: #fff url(lines.png);
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
The HTML
<header>
<nav> [TAB 1][1] [TAB 2][2] [TAB 3][3] [TAB 4][4] [TAB 5][5] </nav>
</header>
<div id="box">
<ul id="boxes">
<li id="1" class="box">
<div class="container">
<h1>
<a href="https://priteshgupta.com/" target="_blank">Tab 1</a>
</h1>
<blockquote>
As an example to others, and not that I care for moderation myself, it has always been my rule never to smoke when asleep, and never to refrain from smoking when awake <br />
</blockquote>
<em class="author">~ Mark Twain</em>
</div>
<span></span>
</li>
<li id="2" class="box">
<div class="container">
<h1>
<a href="https://priteshgupta.com/" target="_blank">Tab 2</a>
</h1>
<blockquote>
Anger is an acid that can do more harm to the vessel in which it is stored than to anything on which it is poured <br />
</blockquote>
<em class="author">~ Mark Twain</em>
</div>
<span></span>
</li>
<li id="3" class="box">
<div class="container">
<h1>
<a href="https://priteshgupta.com/" target="_blank">Tab 3</a>
</h1>
<blockquote>
A man's character may be learned from the adjectives which he habitually uses in conversation <br />
</blockquote>
<em class="author">~ Mark Twain</em>
</div>
<span></span>
</li>
<li id="4" class="box">
<div class="container">
<h1>
<a href="https://priteshgupta.com/" target="_blank">Tab 4</a>
</h1>
<blockquote>
Biographies are but the clothes and buttons of the man. The biography of the man himself cannot be written <br />
</blockquote>
<em class="author">~ Mark Twain</em>
</div>
<span></span>
</li>
<li id="5" class="box">
<div class="container">
<h1>
<a href="https://priteshgupta.com/" target="_blank">Tab 5</a>
</h1>
<blockquote>
But who prays for Satan? Who, in eighteen centuries, has had the common humanity to pray for the one sinner that needed it most? <br />
</blockquote>
<em class="author">~ Mark Twain</em>
</div>
<span></span>
</li>
</ul>
</div>
Adding New Tabs
Adding new tabs is really easy, you can add as many tabs as you want, just add another hyperlink within <strong><nav></strong> with the anchor link as the hash-tag that matches the ID of the Tab. And then, to add the Tab(Content), add something like:
<li id="ID" class="box">
<div class="container">
<h1><a href="https://priteshgupta.com/" target="_blank">Some Heading</a></h1>
<blockquote>Biographies are but the clothes and buttons of the man. The biography of the man himself cannot be written <br> </blockquote>
<em class="author">~ Mark Twain</em>
</div>
<span></span>
</li>
Within <ul id="boxes">, where ‘ID’ is is the ID of the Tab.
Compatibility
For Working:
- Firefox 3+
- Safari 3+
- Chrome (any)
- Opera 10+
- Internet Explorer 9+
For Transitions:
- Firefox 4+
- Safari 4+
- Chrome 4+
- Opera 10.5+
