Cree una barra de pestañas plegable 3D con CSS3
| Autor: | teolee |
|---|---|
| Views Total: | 3,333 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 26, 2014 |
| Licencia: | Unknown |
Vista prévia
Descripción
Un widget de pestañas basado en CSS3 diseñado por < a href = "https://codepen.io/teolee/pen/qnfgH" target = "_ blank" rel = "noopener" > teolee que permite revelar el contenido con pestañas con una transformación 3D & efecto de transición cuando se desplaza el mouse.
Funcionamiento
Incluya la biblioteca de CSS prefijo-libre necesaria en la sección Head de la Página Web. Sin prefijo le permite utilizar sólo las propiedades CSS no prefijado, por ejemplo, la transformación y la transición en todas partes.
<script src="prefixfree.min.js"></script>
Cree una interfaz de pestañas usando la lista desordenada HTML de la siguiente manera.
<body class="ready"> <ul class="tabs"> <li> <div class="fold"> <h3> Title 1 </h3> <p> Description 1 </p> </div> <a href="#" class="more">More</a> </li> <li> <div class="fold"> <h3> Title 2 </h3> <p> Description 2 </p> </div> <a href="#" class="more">More</a> </li> <li> <div class="fold"> <h3> Title 3 </h3> <p> Description 3 </p> </div> <a href="#" class="more">More</a> </li> </ul>
Las reglas CSS3 requeridas.
.tabs {
display: block;
list-style: none;
margin: 0 auto;
padding: 0;
width: 800px;
}
.tabs * { transition: all 350ms cubic-bezier(.7, .5, .3, 1); }
.tabs li {
border-right: 1px solid #FFF;
counter-increment: tab;
display: inline;
perspective: 350px;
float: left;
height: 90px;
opacity: 0;
overflow: hidden;
padding-top: 100px;
position: relative;
transform-origin: 50% 0;
transform: translateY(400px);
transition: all 600ms cubic-bezier(.3, .7, .1, 1);
width: 33%;
vertical-align: top;
}
/* Initial transition */
.tabs li:nth-child(2) { transition-delay: 150ms; }
.tabs li:nth-child(3) { transition-delay: 300ms; }
.ready .tabs li {
opacity: 1;
transform: translateY(0);
}
.tabs li .fold {
backface-visibility: hidden;
transform-style: preserve-3d;
}
/* Tab heading */
.tabs li h3 {
backface-visibility: hidden;
background: #444;
color: #FFF;
font-size: 13px;
line-height: 50px;
margin: 0;
height: 50px;
text-transform: uppercase;
}
.tabs li h3:before {
background-repeat: no-repeat;
background-position: 50% 50%;
background-origin: content-box;
background-size: contain;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 100%;
color: rgba(255, 255, 255, .6);
content: counter(tab);
display: block;
float: left;
font-size: 12px;
font-weight: 400;
height: 24px;
line-height: 25px;
margin: 10px 10px 0 10px;
text-align: center;
width: 24px;
}
/* Revealed copy */
li .fold p {
backface-visibility: hidden;
background: #222;
color: #222;
font-size: 12px;
line-height: 140%;
height: 55px;
margin: -1px 0 0;
padding: 5px 15px 15px;
transform: rotateX(-60deg);
transform-origin: 50% 0;
}
/* Call to action */
.tabs li .more {
backface-visibility: hidden;
background: #EAEAEA;
bottom: 0;
border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: inset 0 4px 2px -3px rgba(0, 0, 0, .3);
color: #3A3F41;
font-size: 11px;
font-weight: bold;
height: 40px;
left: 0;
line-height: 43px;
text-decoration: none;
text-transform: uppercase;
position: absolute;
padding: 0 15px;
width: 100%;
}
.tabs li:before,
.tabs li:after {
background: #444;
backface-visibility: hidden;
content: '';
display: block;
width: 2px;
height: 6px;
position: absolute;
transform-origin: 50% 50%;
z-index: 2;
}
.tabs li:before {
bottom: 19px;
right: 20px;
transform: rotate(-45deg);
}
.tabs li:after {
bottom: 15px;
right: 20px;
transform: rotate(45deg);
}
/* Tab hover */
.tabs li:hover .fold { transform: translateY(-75px); }
.tabs li:hover h3 { background: #222; }
.tabs li:hover .more { color: #111; }
li:hover .fold p {
transform: rotateX(0deg);
background: #222;
color: #BBB;
outline: 1px solid transparent;
}
li:hover:before,
li:hover:after { background: #111; }
@media only screen and (max-width:800px) {
.tabs { width: 600px; }
.tabs li { width: 49%; }
.tabs li:nth-child(3) { display: none; }
}
