Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
It's cool and also you can do lots of crappy this with it :
CSS :
<style >
#site { background: #FFF; }
#tabs {
border: 1px solid #DEDEDE;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
min-height: 200px;
position: relative;
overflow: hidden;
margin: 25px;
}
.tabs-content {
padding: 25px;
height: 120px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.tabs {
overflow: hidden;
background: #e1e1e1;
background: -moz-linear-gradient(center top , #f2f2f2, #e1e1e1);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e1e1e1));
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: 0 1px 0 #FFF inset;
-moz-box-shadow: 0 1px 0 #FFF inset;
box-shadow: 0 1px 0 #FFF inset;
}
.tabs a {
display: block;
float: left;
font: 15px/35px Arial, Helvetica, Sans-serif;
padding: 0 20px 0 40px;
color: #999;
text-shadow: 0 1px 0 #FFF;
border-left: solid 1px rgba(0,0,0,0.05);
border-right: solid 1px rgba(255,255,255,0.7);
position: relative;
overflow: hidden;
}
.tabs a:first-child {
border-left-width: 0;
}
.tabs a:last-child {
border-right-width: 0;
}
.tabs a:after {
content: '✔';
position: absolute;
top: 0;
left: 10px;
line-height: 21px;
font-size: 10px;
width: 21px;
text-align: center;
margin: 7px 10px 5px 0;
background: #000;
font-size: 12px;
-moz-border-radius: 21px;
-webkit-border-radius: 21px;
border-radius: 21px;
background: #bdbdbd;
background: -moz-linear-gradient(center top , #d4d4d4, #bdbdbd);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#bdbdbd));
-webkit-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
-moz-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
text-shadow: 0 1px 0 #999;
color: #ffffff;
}
#tab1:after { content: '1'; }
#tab2:after { content: '2'; }
#tab3:after { content: '3'; }
#tab3 { border-right-width: 0; }
.tabs a:target {
background: #FFF;
border-left-color: #CCC;
}
.tabs a:target:after {
background: #038bd5;
background: -moz-linear-gradient(center top , #2dc3fc, #038bd5);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2dc3fc), color-stop(100%,#038bd5));
text-shadow: 0 1px 0 #096c9e;
-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85);
-moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85);
box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85)
}
.tabs a:target + section.tabs-content {
display: block;
}
</style>
HTML :
<div id="tabs">
<nav class="tabs">
<a id="tab1" href="#tab1">Widget Craft</a>
<section class="tabs-content">
You can learn creating this CSS tabs at Widcraft.blogspot.com.
</section>
<a id="tab2" href="#tab2">Author</a>
<section class="tabs-content">
This blog is created by Hardeep Asrani from India he is a commerce student but doing this is his passion.....i mean my passion :p .
</section>
<a id="tab3" href="#tab3">WWE</a>
<section class="tabs-content">
I'am a huge WWE Fan and owner of India's number one WWE News Website.
</section>
</div>
That's It
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
