With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing.

The HTML

<div id="csstabs">

<div id="tab1">
<h3>Most Recent Posts</h3>

<ul class="tabcontent">
<!-- tabcontent //-->
</ul>
</div><!--end #tab1//-->

<div id="tab2">

<h3>Most Popular Posts</h3>
<ul class="tabcontent">
<!-- tabcontent //-->
</ul>

</div><!--end #tab2//-->

<br class="clearboth"/><!--stops things going funny in IE7//-->

</div><!--end #csstabs//-->

 

We have:

• one containing div that has all the content in – #csstabs
• two divs containing tab content and title – #tab1 #tab2
• h3 tags for headings (can be changed to span or other heading tags)
• tabcontent lists (these can be divs if you wanted)

The CSS

#csstabs{
position:relative;
width:300px;
height:290px;
}
#csstabs h3{
padding:5px;
height:30px;
text-align:center;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.tabcontent{
padding:10px 0 0 40px;
width:100%;
background:#fff;
border:1px solid #000;
}

We give the CSS tabs a relative positioning so we can position things absolutely inside and then add a width and height to it. We then add to the h3 a height and borders on 3 sides and we give the tab content some padding and a background and border.

#tab1 .tabcontent{
z-index:2;
position:absolute;
left:0;
top:42px;
background:#fff;
height:230px;
}
#tab1 h3{
z-index:3;
width:150px;
position:absolute;
left:0;
top:0;
background:#fff;
}

#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:40px;
height:230px;
}
#tab2 h3{
width:150px;
position:absolute;
left:180px;
top:0;
}

We then assign values to the individual tabs.

.tabcontent gets a z-index with the higher number going to the tab that will be shown on the front in this case #tab1. They are then both given the same absolute positioning with the top value, placing the .tabcontent box just under the h3 tags so that on hover they cover a bit of the .tabcontent border.

They then get a background color and a height.

The h3 tags get a z-index of 3 to make sure they’re always on top, they get position absolutley to the top of the tabs with an appropriate left indent and are given a fixed width.

Then comes the hover bits

#csstabs:hover h3,
#csstabs:focus h3,
#csstabs:active h3{
background:none;
}

#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3{
z-index:4;
background:#fff;
}
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
}

#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3{
z-index:4;
background:#fff;
}
#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
}

Firstly when we hover over the containing div all h3 tags lose their background, that ensures the border line shows up underneath.
Then for tab1 and tab2 depending on which heading we’re hovering on the h3 get’s a z-index of 4 and a background color. The tabcontent gets the same but a z-index of 3. So both elements are brought to the front with the h3 further forward.
Because the h3 overlaps the tabcontent box by 1px you can move seemlessly from the h3 element into the tabcontent without losing the focus, it also means that the current header will cover the border of the tabcontent box making it look connected.

CSS3
But wait, what’s that? You have a webkit browser? Well how about some CSS3 tricks. It’s not much but a little fade between the tabs? Oh ok then.

So first things first add opacity:0 to any .tabcontent boxes that aren’t shown intially.

#tab2 .tabcontent{
z-index:1;
position:absolute;
left:0;
top:42px;
height:230px;
opacity:0;
}

Then under your #csstabs:hover h3 declaration add this.

#csstabs:hover .tabcontent,
#tabs:focus .tabcontent,
#tabs:active .tabcontent{
opacity:0;
-webkit-transition : opacity .75s ease-in;
}

That will fade out the .tabcontent areas in 0.75 seconds easing into the animation, pretty self explanitory really!

Finally for the .tabcontent hover classes we need to add a fade in.

#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}

#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
z-index:3;
background:#fff;
opacity:1;
-webkit-transition : opacity 2s ease-in;
}

So that will fade in the .tabcontent that is being hovered over in 2 seconds again easing in.

So there you go you’re now using CSS3, exciting isn’t it!