#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Efectos imágenes
Gourmet
Slider de imágenes con jQuery
Cambia el enlace de Leer Más en blogger
Modo de arranque rápido en Windows 10
Generador de Tooltip
Teclado Windows 10
Menu vertical jGlideMenu
 Poner un botón "Ir arriba" con jQuery
Eliminar fondo de una imagen rapidamente
Tener dos cuentas de WhatsApp en un solo movil
Formato Condicional para Excel- Resaltar fines de semana

Tabs animados solo con CSS

Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.






Código HTML

<div class=”tabs”>

<div class=”tab”>
<input type=”radio” id=”tab-1″ name=”tab-group-1″ checked>
<label for=”tab-1″>Tab 1</label>

<div class=”content”>
<p>Aquí va algún contenido para el tab 1</p>
</div>
</div>

<div class=”tab”>
<input type=”radio” id=”tab-2″ name=”tab-group-1″>
<label for=”tab-2″>Tab 2</label>

<div class=”content”>
<p>Aquí va algún contenido para el tab 2</p>

<img src=”http://lorempixum.com/200/100/technics/”>
</div>
</div>

<div class=”tab”>
<input type=”radio” id=”tab-3″ name=”tab-group-1″>
<label for=”tab-3″>Tab 3</label>

<div class=”content”>
<p>Aquí va algún contenido para el tab 3</p>

<img src=”http://lorempixum.com/200/100/nightlife/”>
</div>
</div>

</div>






Código CSS

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}


Publicar un comentario

0 Comentarios