Pure CSS3 Tab Content Slider

Pure CSS3 Tab Content Slider Created by Pradip Kumar Tiwari

HTML

<div class="slider">
  <div id="sd1">
    <div id="sd2">
      <div id="sd3">
        <div class="nav"><a href="#sd1" id="tab1">Tab 1</a><a href="#sd2" id="tab2">Tab 2</a><a href="#sd3" id="tab3">Tab 3</a></div>
        <div class="sliderblock">
          <div class="slide" id="sld1">1</div>
          <div class="slide" id="sld2">2</div>
          <div class="slide" id="sld3">3</div>
        </div>
      </div>
    </div>
  </div>
</div>
    
<br style="clear:left;"><br>
Created By: Pradip Kumar Tiwari (twitter.com/pradipktiwari)

CSS

body {
	font:normal 1em Arial, Helvetica, sans-serif;
}
p span {
	color:#999;
	font-size:70%;
}
.slider {
	width:800px;
	margin:0 auto;
	border:1px solid #000;
}
.slider .nav {
	border-bottom:1px solid #666;
	height:22px;
	background:#CCC;
	position:relative;
	z-index:2;
}
.slider .nav a {
	display:inline-block;
	margin-right:2px;
	padding:0 10px;
	background:#333;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	font-size:78%;
	line-height:22px;
	-webkit-transition:1s background;
	-moz-transition:1s background;
	-o-transition:1s background;
	transition:1s background;
}
.slider .nav a:hover, .slider .nav a:first-child, #sd1:target a#tab1, #sd2:target a#tab2, #sd3:target a#tab3 {
	background:#900;
}
#sd1:target a#tab2, #sd1:target a#tab3, #sd2:target a#tab1, #sd2:target a#tab3, #sd3:target a#tab2, #sd3:target a#tab1 {
	background:#333;
}
#sd1, #sd2, #sd3 {
	position:relative;
	height:143px;
	overflow:hidden;
}
.sliderblock {
	width:800px;
	height:120px;
	text-align:center;
	position:absolute;
	top:23px;
	left:0px;
	z-index:1;
	-webkit-transition:1s top;
	-moz-transition:1s top;
	-o-transition:1s top;
	transition:1s top;
}
.sliderblock .slide {
	width:100%;
	height:100%;
}
.sliderblock #sld2 {
	background:#CC6;
}
.sliderblock #sld3 {
	background:#FCF;
}
#sd1:target .sliderblock {
	top:23px;
}
#sd2:target .sliderblock {
	top:-97px;
}
#sd3:target .sliderblock {
	top:-217px;
}