Animated Tabs With CSS3
In this tutorial i will let you know guys, how to create Animated Tabs With CSS3.Here we are using Javascript and CSS3 for this.
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Animated Tabs with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Animated Tabs with CSS3" />
<meta name="keywords" content="Anitaed tabs, Animated tabs With css3, Tabs Animation With css3" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
<!--[if lt IE 9]>
<style>
.content{
height: auto;
margin: 0;
}
.content div {
position: relative;
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">About</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Services</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">Work</label>
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<h2>About us</h2>
<p>Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.</p>
<h3>Who We Are</h3>
<p>Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text. </p>
</div>
<div class="content-2">
<h2>Services</h2>
<p>Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.</p>
<h3>technology</h3>
<p>Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text. </p>
</div>
<div class="content-3">
<h2>Portfolio</h2>
<p>Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.</p>
<h3>Examples</h3>
<p>Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text.Hi this is a sample text. </p>
</div>
</div>
</section>
</div>
</body>
</html>
CSS3:
body{
background: #de6464;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.tabs {
position: relative;
margin: 40px auto;
width: 750px;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 120px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}
.tabs input#tab-2{
left: 120px;
}
.tabs input#tab-3{
left: 240px;
}
.tabs input#tab-4{
left: 360px;
}
.tabs label {
background: #ccc;
font-size: 15px;
line-height: 40px;
height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
width: 80px;
color: #777;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
.tabs label:after {
content: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}
.tabs input:hover + label {
background: #de6464;
}
.tabs label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
.tab-label-2 {
z-index: 3;
}
.tab-label-3 {
z-index: 2;
}
.tabs input:checked + label {
background: #fff;
z-index: 6;
}
.clear-shadow {
clear: both;
}
.content {
background: #fff;
position: relative;
width: 100%;
height: 370px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}
.content div {
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3{
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
}
.content div h2,
.content div h3{
color: #000;
}
.content div p {
font-size: 14px;
line-height: 22px;
text-align: left;
margin: 0;
color: #808080;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}
One reply on “Animated Tabs With CSS3”
Thanks for your sharing,I appreciate this.keep up the good work.