#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Tooltip
Iniciación con Photopea
Photopea, editor de imágenes gratis
Plantilla ClickMag-2
Introducción al HTML
Hacer tooltip con una imagen
Rutinas The Ordinary
Personalizar la primera letra de las entradas del blog
Convertidor PDF, JPG, Word, Excel, PNG...
Efectos imágenes para las entradas de nuestro blog
Plantilla Vogue
Cómo Insertar un PDF en excel

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