#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Botón subir arriba
Calcular el porcentaje
Hacer una tarjeta de navidad
Ventanas modales para nuestras entradas
Imágenes con texto desplegable
Efecto de desvanecer las imagnes de nuestro blog al pasar el cursor.
Agrandar imagenes al pasar el cursor sobre ellas
 Plantilla Feminist Blogger Template
Plantillas Blog
Gadget etiquetas tipo menu
Un indice con JQuery para tu blog
La base de cotización

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