How to make Tab in html5 & css3
Creating beautifull tabs in css3 with html5
How to make Tabs in html5 with jquery
Creating Tab widget in html5
Creating responsive Tabs in html5 & css3
Create tabs in html5 & css3
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
font-family: Cambria, Arial;
background: #333;
}
.tabs {
width: 100%;
max-width: 600px;
margin: 100px auto;
}
input {
opacity: 0;
}
label {
cursor: pointer;
background: -webkit-linear-gradient(#666, #555);
color: #eee;
border-radius: 5px 5px 0 0;
padding: 1.5% 3%;
float: left;
margin-right: 2px;
font: italic 1em cambria;
}
label:hover {
background: -webkit-linear-gradient(#777, #666);
}
input:checked + label {
background: #fff;
color: #333;
}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child, .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
opacity: 1;
-webkit-transition: .3s;
}
.panels {
float: left;
clear: both;
position: relative;
width: 100%;
background: #fff;
border-radius: 0 10px 10px 10px;
min-height: 315px;
}
.panel {
width: 100%;
opacity: 0;
position: absolute;
background: #fff;
border-radius: 0 10px 10px 10px;
padding: 4%;
box-sizing: border-box;
}
.panel h2 {
margin: 0;
font-family: Arial;
}
</style>
</head>
<body>
<div class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
<div class="panel">
<h2>This is Panel Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
font-family: Cambria, Arial;
background: #333;
}
.tabs {
width: 100%;
max-width: 600px;
margin: 100px auto;
}
input {
opacity: 0;
}
label {
cursor: pointer;
background: -webkit-linear-gradient(#666, #555);
color: #eee;
border-radius: 5px 5px 0 0;
padding: 1.5% 3%;
float: left;
margin-right: 2px;
font: italic 1em cambria;
}
label:hover {
background: -webkit-linear-gradient(#777, #666);
}
input:checked + label {
background: #fff;
color: #333;
}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child, .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
opacity: 1;
-webkit-transition: .3s;
}
.panels {
float: left;
clear: both;
position: relative;
width: 100%;
background: #fff;
border-radius: 0 10px 10px 10px;
min-height: 315px;
}
.panel {
width: 100%;
opacity: 0;
position: absolute;
background: #fff;
border-radius: 0 10px 10px 10px;
padding: 4%;
box-sizing: border-box;
}
.panel h2 {
margin: 0;
font-family: Arial;
}
</style>
</head>
<body>
<div class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
<div class="panel">
<h2>This is Panel Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
</div>
</div>
</body>
</html>
Creating beautifull tabs in css3 with html5
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
background-color:#eee
}
.area-total-abas {
width: 630px;
margin: 100px auto;
min-height: 300px
}
.lista-abas, .lista-abas * {
margin:0;
padding:0;
outline:none;
border:0;
background:none
}
.lista-abas {
position:relative;
font-size:0;
text-align:left;
color:#666
}
.lista-abas > input {
position:absolute;
display:none
}
.lista-abas > label {
position:relative;
z-index:1;
display:inline-block;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding:1px;
padding-top:0;
padding-left:0;
font-size:13px;
line-height:45px;
cursor:pointer
}
.lista-abas > label span {
display:block;
padding:5px;
background:rgba(255, 255, 255, .9)
}
.lista-abas > label span span {
padding:0 14px;
background:transparent;
transition:background .3s, color .4s;
-o-transition:background .3s, color .4s;
-ms-transition:background .3s, color .4s;
-moz-transition:background .3s, color .4s;
-webkit-transition:background .3s, color .4s
}
.lista-abas > label:hover span span {
background:#3498db;
color:#fff
}
.lista-abas > input:checked + label span span {
background:#3498db;
color:#fff
}
.lista-abas > ul {
list-style:none;
position:relative;
display:block;
font-size:13px
}
.lista-abas > ul > li {
position:absolute;
top:0;
left:0;
width:626px;
overflow:auto;
padding:20px 25px 25px;
background:rgba(255, 255, 255, .9);
box-sizing:border-box;
-moz-box-sizing:border-box;
opacity:0;
-o-transform-origin:0% 0%;
-ms-transform-origin:0% 0%;
-moz-transform-origin:0% 0%;
-webkit-transform-origin:0% 0%;
-o-transition:opacity .8s, -o-transform .8s;
-ms-transition:opacity .8s, -ms-transform .8s;
-moz-transition:opacity .8s, -moz-transform .8s;
-webkit-transition:opacity .8s, -webkit-transform .8s
}
.lista-abas > .aba-1:checked ~ ul > .aba-1,
.lista-abas > .aba-2:checked ~ ul > .aba-2,
.lista-abas > .aba-3:checked ~ ul > .aba-3,
.lista-abas > .aba-4:checked ~ ul > .aba-4 {
position:relative;
z-index:1;
opacity:1
}
.conteudo {
width:600px;
position:relative;
line-height:20px
}
.pagina-url {
float:right;
margin-top:15px
}
.amimacao-flip > ul {
perspective:2000px;
-o-perspective:2000px;
-ms-perspective:2000px;
-moz-perspective:2000px;
-webkit-perspective:2000px;
perspective-origin:50% 50%;
-o-perspective-origin:50% 50%;
-ms-perspective-origin:50% 50%;
-moz-perspective-origin:50% 50%;
-webkit-perspective-origin:50% 50%
}
.amimacao-flip > ul > li {
-o-transform:rotateX(-90deg);
-ms-transform:rotateX(-90deg);
-moz-transform:rotateX(-90deg);
-webkit-transform:rotateX(-90deg)
}
.amimacao-flip > .aba-1:checked ~ ul > .aba-1,
.amimacao-flip > .aba-2:checked ~ ul > .aba-2,
.amimacao-flip > .aba-3:checked ~ ul > .aba-3,
.amimacao-flip > .aba-4:checked ~ ul > .aba-4 {
-o-transform:rotateX(0deg);
-ms-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-o-transition-delay:0.2s;
-ms-transition-delay:0.2s;
-moz-transition-delay:0.2s;
-webkit-transition-delay:0.2s
}
</style>
</head>
<body>
<div class="area-total-abas">
<div class="lista-abas amimacao-flip">
<input type="radio" name="lista-abas" checked id="aba-1" class="aba-1">
<label for="aba-1"><span><span>Simples slideshow</span></span></label>
<input type="radio" name="lista-abas" id="aba-2" class="aba-2">
<label for="aba-2"><span><span>Algoritmo de Levenshtein</span></span></label>
<input type="radio" name="lista-abas" id="aba-3" class="aba-3">
<label for="aba-3"><span><span>Barra de progresso</span></span></label>
<input type="radio" name="lista-abas" id="aba-4" class="aba-4">
<label for="aba-4"><span><span>Captcha com PHP</span></span></label>
<ul>
<li class="aba-1">
<div class="conteudo">
<h1>Simples slideshow</h1>
<p>Mais uma postagem simples e bem usual. Um sistema de slideshow fácil, rápido e leve, apenas com jQuery e CSS.</p>
<p>Poderá ser usado em banners laterais, animações de postagens e etc. </p>
<p>Iniciando, vamos montar o CSS que definará a estrutura final do slide... </p>
</div>
</li>
<li class="aba-2">
<div class="conteudo">
<h1>Algoritmo de Levenshtein</h1>
<p>Atualmente fazer buscas on-line tem se tornado algo muito comum, quase tudo na internet gira em torno de simples buscas. </p>
<p>Então decidi publicar um sistema simples, porém muito interessante que deixará seu sistema de busca muito legal. </p>
<p> O PHP possui uma função nativa, levenshtein. seu manual mostra todos os detalhes do seu uso e implementação. </p>
</div>
</li>
<li class="aba-3">
<div class="conteudo">
<h1>Barra de progresso</h1>
<p>Uma barra de progresso pode ser um processo importante ao ocultar o carregamento de páginas ou/e arquivos. </p>
<p>Então ter uma barra de progresso responsiva e sem usar Jquery, apenas usando CSS3 e JavaScript. Isso sem dúvida deixaria a sua aplicação um pouquinho mais leve. </p>
</div>
</li>
<li class="aba-4">
<div class="conteudo">
<h1>Captcha com PHP</h1>
<p>A postagem de hoje aborda um ponto importante para nós, que temos servidores públicos, que qualquer um pode acessar, comentar e etc.</p>
<p>Com esse sistema, sem dúvida seus formulários ganharão mais segurança contra spammers. </p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
background-color:#eee
}
.area-total-abas {
width: 630px;
margin: 100px auto;
min-height: 300px
}
.lista-abas, .lista-abas * {
margin:0;
padding:0;
outline:none;
border:0;
background:none
}
.lista-abas {
position:relative;
font-size:0;
text-align:left;
color:#666
}
.lista-abas > input {
position:absolute;
display:none
}
.lista-abas > label {
position:relative;
z-index:1;
display:inline-block;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding:1px;
padding-top:0;
padding-left:0;
font-size:13px;
line-height:45px;
cursor:pointer
}
.lista-abas > label span {
display:block;
padding:5px;
background:rgba(255, 255, 255, .9)
}
.lista-abas > label span span {
padding:0 14px;
background:transparent;
transition:background .3s, color .4s;
-o-transition:background .3s, color .4s;
-ms-transition:background .3s, color .4s;
-moz-transition:background .3s, color .4s;
-webkit-transition:background .3s, color .4s
}
.lista-abas > label:hover span span {
background:#3498db;
color:#fff
}
.lista-abas > input:checked + label span span {
background:#3498db;
color:#fff
}
.lista-abas > ul {
list-style:none;
position:relative;
display:block;
font-size:13px
}
.lista-abas > ul > li {
position:absolute;
top:0;
left:0;
width:626px;
overflow:auto;
padding:20px 25px 25px;
background:rgba(255, 255, 255, .9);
box-sizing:border-box;
-moz-box-sizing:border-box;
opacity:0;
-o-transform-origin:0% 0%;
-ms-transform-origin:0% 0%;
-moz-transform-origin:0% 0%;
-webkit-transform-origin:0% 0%;
-o-transition:opacity .8s, -o-transform .8s;
-ms-transition:opacity .8s, -ms-transform .8s;
-moz-transition:opacity .8s, -moz-transform .8s;
-webkit-transition:opacity .8s, -webkit-transform .8s
}
.lista-abas > .aba-1:checked ~ ul > .aba-1,
.lista-abas > .aba-2:checked ~ ul > .aba-2,
.lista-abas > .aba-3:checked ~ ul > .aba-3,
.lista-abas > .aba-4:checked ~ ul > .aba-4 {
position:relative;
z-index:1;
opacity:1
}
.conteudo {
width:600px;
position:relative;
line-height:20px
}
.pagina-url {
float:right;
margin-top:15px
}
.amimacao-flip > ul {
perspective:2000px;
-o-perspective:2000px;
-ms-perspective:2000px;
-moz-perspective:2000px;
-webkit-perspective:2000px;
perspective-origin:50% 50%;
-o-perspective-origin:50% 50%;
-ms-perspective-origin:50% 50%;
-moz-perspective-origin:50% 50%;
-webkit-perspective-origin:50% 50%
}
.amimacao-flip > ul > li {
-o-transform:rotateX(-90deg);
-ms-transform:rotateX(-90deg);
-moz-transform:rotateX(-90deg);
-webkit-transform:rotateX(-90deg)
}
.amimacao-flip > .aba-1:checked ~ ul > .aba-1,
.amimacao-flip > .aba-2:checked ~ ul > .aba-2,
.amimacao-flip > .aba-3:checked ~ ul > .aba-3,
.amimacao-flip > .aba-4:checked ~ ul > .aba-4 {
-o-transform:rotateX(0deg);
-ms-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-o-transition-delay:0.2s;
-ms-transition-delay:0.2s;
-moz-transition-delay:0.2s;
-webkit-transition-delay:0.2s
}
</style>
</head>
<body>
<div class="area-total-abas">
<div class="lista-abas amimacao-flip">
<input type="radio" name="lista-abas" checked id="aba-1" class="aba-1">
<label for="aba-1"><span><span>Simples slideshow</span></span></label>
<input type="radio" name="lista-abas" id="aba-2" class="aba-2">
<label for="aba-2"><span><span>Algoritmo de Levenshtein</span></span></label>
<input type="radio" name="lista-abas" id="aba-3" class="aba-3">
<label for="aba-3"><span><span>Barra de progresso</span></span></label>
<input type="radio" name="lista-abas" id="aba-4" class="aba-4">
<label for="aba-4"><span><span>Captcha com PHP</span></span></label>
<ul>
<li class="aba-1">
<div class="conteudo">
<h1>Simples slideshow</h1>
<p>Mais uma postagem simples e bem usual. Um sistema de slideshow fácil, rápido e leve, apenas com jQuery e CSS.</p>
<p>Poderá ser usado em banners laterais, animações de postagens e etc. </p>
<p>Iniciando, vamos montar o CSS que definará a estrutura final do slide... </p>
</div>
</li>
<li class="aba-2">
<div class="conteudo">
<h1>Algoritmo de Levenshtein</h1>
<p>Atualmente fazer buscas on-line tem se tornado algo muito comum, quase tudo na internet gira em torno de simples buscas. </p>
<p>Então decidi publicar um sistema simples, porém muito interessante que deixará seu sistema de busca muito legal. </p>
<p> O PHP possui uma função nativa, levenshtein. seu manual mostra todos os detalhes do seu uso e implementação. </p>
</div>
</li>
<li class="aba-3">
<div class="conteudo">
<h1>Barra de progresso</h1>
<p>Uma barra de progresso pode ser um processo importante ao ocultar o carregamento de páginas ou/e arquivos. </p>
<p>Então ter uma barra de progresso responsiva e sem usar Jquery, apenas usando CSS3 e JavaScript. Isso sem dúvida deixaria a sua aplicação um pouquinho mais leve. </p>
</div>
</li>
<li class="aba-4">
<div class="conteudo">
<h1>Captcha com PHP</h1>
<p>A postagem de hoje aborda um ponto importante para nós, que temos servidores públicos, que qualquer um pode acessar, comentar e etc.</p>
<p>Com esse sistema, sem dúvida seus formulários ganharão mais segurança contra spammers. </p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
How to make Tabs in html5 with jquery
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8" />
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,latin-ext);
body {
overflow-y: scroll;
}
.wrap {
marin: 0 auto;
}
ul.tabs {
width: 390px;
height: 80px;
margin: 0 auto;
list-style: none;
overflow: hidden;
padding: 0;
}
ul.tabs li {
float: left;
width: 130px;
}
ul.tabs li a {
position: relative;
display: block;
height: 30px;
margin-top: 40px;
padding: 10px 0 0 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #6edeef;
-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
border: 0px solid #000000;
-webkit-transition: padding 0.2s ease, margin 0.2s ease;
-moz-transition: padding 0.2s ease, margin 0.2s ease;
-o-transition: padding 0.2s ease, margin 0.2s ease;
-ms-transition: padding 0.2s ease, margin 0.2s ease;
transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
z-index: 3;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a {
z-index: 2;
}
.tabs li:last-child a {
z-index: 1;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
ul.tabs li a:hover {
margin: 35px 0 0 0;
padding: 10px 0 5px 0;
}
ul.tabs li a.active {
margin: 30px 0 0 0;
padding: 10px 0 10px 0;
background: #545f60;
color: #6edeef;
/*color: #ff6831;*/
z-index: 4;
outline: none;
}
.group:before,
.group:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.group:after {
clear: both;
}
#content {
width: 390px;
height: 200px;
margin: 0 auto;
background: #545f60;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
p{
font-family: 'Open Sans', sans-serif;
padding: 30px 40px;
color: #ffffff;
line-height: 26px;
font-size: 18px;
margin: 0;
}
#one {
}
#two {
}
#three {
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="wrap">
<ul class="tabs group">
<li><a class="active" href="#/one">Light &</a></li>
<li><a href="#/two">Sexy</a></li>
<li><a href="#/three">Tabs</a></li>
</ul>
<div id="content">
<p id="one">Some text about Light sit amet, consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur </p>
<p id="two">Sexy sexy consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur modi quod quo iureq</p>
<p id="three">Tabs , consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur modi quod quo iureq</p>
</div>
</div>
<script>
(function($) {
var tabs = $(".tabs li a");
tabs.click(function() {
var content = this.hash.replace('/','');
tabs.removeClass("active");
$(this).addClass("active");
$("#content > p").hide();
$(content).fadeIn(200);
});
})(jQuery);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,latin-ext);
body {
overflow-y: scroll;
}
.wrap {
marin: 0 auto;
}
ul.tabs {
width: 390px;
height: 80px;
margin: 0 auto;
list-style: none;
overflow: hidden;
padding: 0;
}
ul.tabs li {
float: left;
width: 130px;
}
ul.tabs li a {
position: relative;
display: block;
height: 30px;
margin-top: 40px;
padding: 10px 0 0 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #6edeef;
-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
border: 0px solid #000000;
-webkit-transition: padding 0.2s ease, margin 0.2s ease;
-moz-transition: padding 0.2s ease, margin 0.2s ease;
-o-transition: padding 0.2s ease, margin 0.2s ease;
-ms-transition: padding 0.2s ease, margin 0.2s ease;
transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
z-index: 3;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a {
z-index: 2;
}
.tabs li:last-child a {
z-index: 1;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
ul.tabs li a:hover {
margin: 35px 0 0 0;
padding: 10px 0 5px 0;
}
ul.tabs li a.active {
margin: 30px 0 0 0;
padding: 10px 0 10px 0;
background: #545f60;
color: #6edeef;
/*color: #ff6831;*/
z-index: 4;
outline: none;
}
.group:before,
.group:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.group:after {
clear: both;
}
#content {
width: 390px;
height: 200px;
margin: 0 auto;
background: #545f60;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
p{
font-family: 'Open Sans', sans-serif;
padding: 30px 40px;
color: #ffffff;
line-height: 26px;
font-size: 18px;
margin: 0;
}
#one {
}
#two {
}
#three {
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="wrap">
<ul class="tabs group">
<li><a class="active" href="#/one">Light &</a></li>
<li><a href="#/two">Sexy</a></li>
<li><a href="#/three">Tabs</a></li>
</ul>
<div id="content">
<p id="one">Some text about Light sit amet, consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur </p>
<p id="two">Sexy sexy consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur modi quod quo iureq</p>
<p id="three">Tabs , consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur modi quod quo iureq</p>
</div>
</div>
<script>
(function($) {
var tabs = $(".tabs li a");
tabs.click(function() {
var content = this.hash.replace('/','');
tabs.removeClass("active");
$(this).addClass("active");
$("#content > p").hide();
$(content).fadeIn(200);
});
})(jQuery);
</script>
</body>
</html>
Creating Tab widget in html5
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tabbed Widget</title>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #eee;
}
.widget {
position: relative;
margin: 30px auto 10px;
width: 320px;
background: white;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
}
.widget-tabs {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 9px 12px 0;
text-align: left;
direction: rtl;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
border-radius: 3px 3px 0 0;
}
.widget-tab,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child ~ .widget-tab,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) ~ .widget-tab,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child ~ .widget-tab {
position: relative;
display: inline-block;
vertical-align: top;
margin-top: 3px;
line-height: 36px;
font-weight: normal;
color: #999;
background: #fcfcfc;
border: solid #ddd;
border-width: 1px 1px 0;
border-radius: 5px 5px 0 0;
padding-bottom: 0;
bottom: auto;
}
.widget-tab > .widget-tab-link,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child ~ .widget-tab > .widget-tab-link,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) ~ .widget-tab > .widget-tab-link,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child ~ .widget-tab > .widget-tab-link {
margin: 0;
border-top: 0;
}
.widget-tab + .widget-tab {
margin-right: -1px;
}
.widget-tab:last-child,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2),
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child {
bottom: -1px;
margin-top: 0;
padding-bottom: 2px;
line-height: 34px;
font-weight: bold;
color: #555;
background: white;
border-top: 0;
}
.widget-tab:last-child > .widget-tab-link,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child > .widget-tab-link,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) > .widget-tab-link,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child > .widget-tab-link {
margin: 0 -1px;
border-top: 4px solid #4cc8f1;
}
.widget-tab-link {
display: block;
min-width: 60px;
padding: 0 15px;
color: inherit;
text-align: center;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.widget-list {
display: none;
padding-top: 50px;
}
.widget-list > li + li {
border-top: 1px solid #e8e8e8;
}
.widget-list:last-of-type {
display: block;
}
.widget-list:target {
display: block;
}
.widget-list:target ~ .widget-list {
display: none;
}
.widget-list-link {
display: block;
line-height: 18px;
padding: 10px 12px;
font-weight: bold;
color: #555;
text-decoration: none;
cursor: pointer;
}
.widget-list-link:hover {
background: #f7f7f7;
}
li:last-child > .widget-list-link {
border-radius: 0 0 3px 3px;
}
.widget-list-link > img {
float: left;
width: 32px;
height: 32px;
margin: 2px 12px 0 0;
}
.widget-list-link > span {
display: block;
font-size: 11px;
font-weight: normal;
color: #999;
}
</style>
</head>
<body>
<div class="widget">
<ol class="widget-list" id="managers">
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/47?f=y&s=64&d=identicon">
Manager #1 <span>481 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/47?f=y&s=64&d=identicon">
Manager #2 <span>5162 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/47?f=y&s=64&d=identicon">
Manager #3 <span>342 followers</span>
</a>
</li>
</ol>
<ol class="widget-list" id="designers">
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/5?f=y&s=64&d=identicon">
Designer #1 <span>481 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/5?f=y&s=64&d=identicon">
Designer #2 <span>5162 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/5?f=y&s=64&d=identicon">
Designer #3 <span>342 followers</span>
</a>
</li>
</ol>
<ol class="widget-list" id="developers">
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/6?f=y&s=64&d=identicon">
Developer #1 <span>481 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/6?f=y&s=64&d=identicon">
Developer #2 <span>5162 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/6?f=y&s=64&d=identicon">
Developer #3 <span>342 followers</span>
</a>
</li>
</ol>
<ul class="widget-tabs">
<li class="widget-tab">
<a href="#managers" class="widget-tab-link">Managers</a>
<!-- Omitting the end tag is valid HTML and removes the space in-between inline blocks. -->
<li class="widget-tab">
<a href="#designers" class="widget-tab-link">Designers</a>
<li class="widget-tab">
<a href="#developers" class="widget-tab-link">Developers</a>
</ul>
</div>
</body>
</html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tabbed Widget</title>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #eee;
}
.widget {
position: relative;
margin: 30px auto 10px;
width: 320px;
background: white;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
}
.widget-tabs {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 9px 12px 0;
text-align: left;
direction: rtl;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
border-radius: 3px 3px 0 0;
}
.widget-tab,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child ~ .widget-tab,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) ~ .widget-tab,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child ~ .widget-tab {
position: relative;
display: inline-block;
vertical-align: top;
margin-top: 3px;
line-height: 36px;
font-weight: normal;
color: #999;
background: #fcfcfc;
border: solid #ddd;
border-width: 1px 1px 0;
border-radius: 5px 5px 0 0;
padding-bottom: 0;
bottom: auto;
}
.widget-tab > .widget-tab-link,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child ~ .widget-tab > .widget-tab-link,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) ~ .widget-tab > .widget-tab-link,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child ~ .widget-tab > .widget-tab-link {
margin: 0;
border-top: 0;
}
.widget-tab + .widget-tab {
margin-right: -1px;
}
.widget-tab:last-child,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2),
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child {
bottom: -1px;
margin-top: 0;
padding-bottom: 2px;
line-height: 34px;
font-weight: bold;
color: #555;
background: white;
border-top: 0;
}
.widget-tab:last-child > .widget-tab-link,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child > .widget-tab-link,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) > .widget-tab-link,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child > .widget-tab-link {
margin: 0 -1px;
border-top: 4px solid #4cc8f1;
}
.widget-tab-link {
display: block;
min-width: 60px;
padding: 0 15px;
color: inherit;
text-align: center;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.widget-list {
display: none;
padding-top: 50px;
}
.widget-list > li + li {
border-top: 1px solid #e8e8e8;
}
.widget-list:last-of-type {
display: block;
}
.widget-list:target {
display: block;
}
.widget-list:target ~ .widget-list {
display: none;
}
.widget-list-link {
display: block;
line-height: 18px;
padding: 10px 12px;
font-weight: bold;
color: #555;
text-decoration: none;
cursor: pointer;
}
.widget-list-link:hover {
background: #f7f7f7;
}
li:last-child > .widget-list-link {
border-radius: 0 0 3px 3px;
}
.widget-list-link > img {
float: left;
width: 32px;
height: 32px;
margin: 2px 12px 0 0;
}
.widget-list-link > span {
display: block;
font-size: 11px;
font-weight: normal;
color: #999;
}
</style>
</head>
<body>
<div class="widget">
<ol class="widget-list" id="managers">
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/47?f=y&s=64&d=identicon">
Manager #1 <span>481 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/47?f=y&s=64&d=identicon">
Manager #2 <span>5162 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/47?f=y&s=64&d=identicon">
Manager #3 <span>342 followers</span>
</a>
</li>
</ol>
<ol class="widget-list" id="designers">
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/5?f=y&s=64&d=identicon">
Designer #1 <span>481 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/5?f=y&s=64&d=identicon">
Designer #2 <span>5162 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/5?f=y&s=64&d=identicon">
Designer #3 <span>342 followers</span>
</a>
</li>
</ol>
<ol class="widget-list" id="developers">
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/6?f=y&s=64&d=identicon">
Developer #1 <span>481 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/6?f=y&s=64&d=identicon">
Developer #2 <span>5162 followers</span>
</a>
</li>
<li>
<a class="widget-list-link">
<img src="http://www.gravatar.com/avatar/6?f=y&s=64&d=identicon">
Developer #3 <span>342 followers</span>
</a>
</li>
</ol>
<ul class="widget-tabs">
<li class="widget-tab">
<a href="#managers" class="widget-tab-link">Managers</a>
<!-- Omitting the end tag is valid HTML and removes the space in-between inline blocks. -->
<li class="widget-tab">
<a href="#designers" class="widget-tab-link">Designers</a>
<li class="widget-tab">
<a href="#developers" class="widget-tab-link">Developers</a>
</ul>
</div>
</body>
</html>
Creating responsive Tabs in html5 & css3
<!DOCTYPE html">
<html>
<head>
<script src="jquery.js"></script>
<meta charset="UTF-8" />
<style>
@import url("http://fonts.googleapis.com/css?family=Roboto:100");
.myTabs {
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-shadow: 0 0 1px rgba(0,0,0,0.5);
margin: 20px;
overflow: hidden;
box-shadow: 4px 6px 10px 0 rgba(0,0,0,0.5);
}
ul.myTabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.myTabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
font-weight: bold;
overflow: hidden;
background-color: #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
ul.myTabs li:hover {
background: #CCCCCC;
}
ul.myTabs li.active{
background: rgba(0,0,0,0.1);
}
.tab_container {
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
line-height: 1.5em;
}
@media screen and (max-width: 600px) {
ul.myTabs li {
clear:both;
width: 100%;
padding-left:2%;
cursor: pointer;
font-weight: bold;
background-color: #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
}
@media screen and (max-width: 400px) {
ul.myTabs li {
clear:both;
text-align:center;
width: 100%;
padding-left:2%;
cursor: pointer;
font-weight: bold;
background-color: #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
}
.myTabs.red { background-color: #E74C3C; }
.myTabs.green { background-color: #519E2A; }
.myTabs.blue { background-color: #0072C6; }
.myTabs.orange { background-color: #FF3D0D; }
.myTabs.purple { background-color: #800080; }
</style>
</head>
<body>
<div class="myTabs">
<ul class="myTabs">
<li class="active" rel="tab1"> Call of Duty</li>
<li rel="tab2"> Mortal Combat</li>
<li rel="tab3"> Halo</li>
<li rel="tab4"> Portal</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>
<strong>
Call of Duty: Black Ops bears the series' standard superbly,
delivering an engrossing campaign and exciting competitive multiplayer.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p>
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p> <p>
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p>
<p>
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p> <p>
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p>
<strong>
Halo: Reach is the culmination of the superlative combat, sensational
multiplayer, and seamless online integration that are the hallmarks
of this superb series.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p>
<strong>
Portal 2 is an action shooter game from Valve Software that draws
from the original formula of innovative gameplay, story, and music,
which earned the original Portal more than 70 industry accolades.
</strong>
</p>
</div><!-- #tab4 -->
</div> <!-- .tab_container -->
</div>
<script>
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.myTabs li").click(function() {
$("ul.myTabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
</body>
</html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="UTF-8" />
<style>
@import url("http://fonts.googleapis.com/css?family=Roboto:100");
.myTabs {
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-shadow: 0 0 1px rgba(0,0,0,0.5);
margin: 20px;
overflow: hidden;
box-shadow: 4px 6px 10px 0 rgba(0,0,0,0.5);
}
ul.myTabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.myTabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;
font-weight: bold;
overflow: hidden;
background-color: #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
ul.myTabs li:hover {
background: #CCCCCC;
}
ul.myTabs li.active{
background: rgba(0,0,0,0.1);
}
.tab_container {
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
line-height: 1.5em;
}
@media screen and (max-width: 600px) {
ul.myTabs li {
clear:both;
width: 100%;
padding-left:2%;
cursor: pointer;
font-weight: bold;
background-color: #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
}
@media screen and (max-width: 400px) {
ul.myTabs li {
clear:both;
text-align:center;
width: 100%;
padding-left:2%;
cursor: pointer;
font-weight: bold;
background-color: #FFFFFF;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
}
.myTabs.red { background-color: #E74C3C; }
.myTabs.green { background-color: #519E2A; }
.myTabs.blue { background-color: #0072C6; }
.myTabs.orange { background-color: #FF3D0D; }
.myTabs.purple { background-color: #800080; }
</style>
</head>
<body>
<div class="myTabs">
<ul class="myTabs">
<li class="active" rel="tab1"> Call of Duty</li>
<li rel="tab2"> Mortal Combat</li>
<li rel="tab3"> Halo</li>
<li rel="tab4"> Portal</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>
<strong>
Call of Duty: Black Ops bears the series' standard superbly,
delivering an engrossing campaign and exciting competitive multiplayer.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p>
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p> <p>
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p>
<p>
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p> <p>
<strong>
Mortal Kombat returns after a lengthy hiatus and puts players
back into the Tournament for 2D fighting with gruesome combat.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p>
<strong>
Halo: Reach is the culmination of the superlative combat, sensational
multiplayer, and seamless online integration that are the hallmarks
of this superb series.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p>
<strong>
Portal 2 is an action shooter game from Valve Software that draws
from the original formula of innovative gameplay, story, and music,
which earned the original Portal more than 70 industry accolades.
</strong>
</p>
</div><!-- #tab4 -->
</div> <!-- .tab_container -->
</div>
<script>
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.myTabs li").click(function() {
$("ul.myTabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
</body>
</html>
Create tabs in html5 & css3
<!DOCTYPE html">
<html>
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul { overflow:hidden; float:left; padding-left:48px;}
#tabbed {
width:80%;
min-width:400px;
margin:0 auto;
padding-top:68px;
border-bottom:4px solid #8fa11d;
overflow:hidden;
}
li {
display: block;
float: right;
padding: 10px 24px 8px;
background-color: #6a7a0f;
border-radius:8px 8px 0 0;
margin-right:46px;
z-index:2;
position:relative;
cursor:pointer;
color:#cfd08b;
text-transform:uppercase;
font:bold 12px/20px Arial, Helvetica, sans-serif;
text-shadow:rgba(0,0,0,.16) -1px -1px;
}
li:before, li:after {
display:block; content:" "; position:absolute; top:0; height:100%; width:44px;
background-color: #6a7a0f;
}
li:before {
right:-24px;
transform: skew(30deg, 0deg) ;
-webkit-transform: skew(30deg, 0deg) ;
-moz-transform: skew(30deg, 0deg) ;
-o-transform: skew(30deg, 0deg) ;
-ms-transform: skew(30deg, 0deg) ;
border-radius:0 8px 0 0;
box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
}
li:after {
left:-24px;
transform: skew(-30deg, 0deg) ;
-webkit-transform: skew(-30deg, 0deg) ;
-moz-transform: skew(-30deg, 0deg) ;
-o-transform: skew(-30deg, 0deg) ;
-ms-transform: skew(-30deg, 0deg) ;
border-radius:8px 0 0 0;
box-shadow:rgba(0,0,0,.1)-3px 2px 5px, inset rgba(255,255,255,.09)1px 0;
}
li:hover, li:hover:before, li:hover:after {
background-color:#5C6A0D;
}
.active, .active:before, .active:after, .active:hover, .active:hover:before, .active:hover:after { background-color:#8fa11d; color:#fff;}
.active {z-index:3;}
</style>
</head>
<body>
<div id="tabbed">
<ul>
<li>Nice Tabs</li>
<li>But</li>
<li class="active">Ugly Colors</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul { overflow:hidden; float:left; padding-left:48px;}
#tabbed {
width:80%;
min-width:400px;
margin:0 auto;
padding-top:68px;
border-bottom:4px solid #8fa11d;
overflow:hidden;
}
li {
display: block;
float: right;
padding: 10px 24px 8px;
background-color: #6a7a0f;
border-radius:8px 8px 0 0;
margin-right:46px;
z-index:2;
position:relative;
cursor:pointer;
color:#cfd08b;
text-transform:uppercase;
font:bold 12px/20px Arial, Helvetica, sans-serif;
text-shadow:rgba(0,0,0,.16) -1px -1px;
}
li:before, li:after {
display:block; content:" "; position:absolute; top:0; height:100%; width:44px;
background-color: #6a7a0f;
}
li:before {
right:-24px;
transform: skew(30deg, 0deg) ;
-webkit-transform: skew(30deg, 0deg) ;
-moz-transform: skew(30deg, 0deg) ;
-o-transform: skew(30deg, 0deg) ;
-ms-transform: skew(30deg, 0deg) ;
border-radius:0 8px 0 0;
box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
}
li:after {
left:-24px;
transform: skew(-30deg, 0deg) ;
-webkit-transform: skew(-30deg, 0deg) ;
-moz-transform: skew(-30deg, 0deg) ;
-o-transform: skew(-30deg, 0deg) ;
-ms-transform: skew(-30deg, 0deg) ;
border-radius:8px 0 0 0;
box-shadow:rgba(0,0,0,.1)-3px 2px 5px, inset rgba(255,255,255,.09)1px 0;
}
li:hover, li:hover:before, li:hover:after {
background-color:#5C6A0D;
}
.active, .active:before, .active:after, .active:hover, .active:hover:before, .active:hover:after { background-color:#8fa11d; color:#fff;}
.active {z-index:3;}
</style>
</head>
<body>
<div id="tabbed">
<ul>
<li>Nice Tabs</li>
<li>But</li>
<li class="active">Ugly Colors</li>
</ul>
</div>
</body>
</html>
Comments
Post a Comment