Variante de pestañas usando sólo CSS

JMiur [E]

Las pestañas que se crean usando sólo CSS, tienen una limitación, sólo es posible activarlas utilizando :hover ya que no existe la posibilidad de usar el evento click así que su contenido se muestra cuando ponemos el cursor encima y desaparece cuando lo sacamos pero, CSS-tricks ha encontrado una variante que nos permite controlar esa visibilidad de manera eficiente, utilizando etiquetas que normalmente no usaríamos; específicamente, las etiquetas input y label.

Veamos el HTML básico de un ejemplo con tres pestañas:
<div class="tabs">
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Primera</label>
       <div class="content"> el contenido de la pestaña 1 </div>
   </div>
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Segunda</label>
       <div class="content"> el contenido de la pestaña 2 </div>
   </div>
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tercera</label>
       <div class="content"> el contenido de la pestaña 3 </div>
   </div>
</div>
No. Nada de esto funcionará en las viejas versiones de Internet Explorer aunque podría intentarse hacer modificaciones y probar, cosa que no he hecho y no pienso hacer por ahora.

Ahora el CSS que ponemos antes de &head>
<style>

.tabs { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 200px;
position: relative;
width: 550px;
}
.tab { /* cada una de las pestañas */
float: left;
}
.tab label { /* la parte superior con el título de la pestaña */
background-color: #456;
border-radius: 5px 5px 0 0;
box-shadow: -3px 3px 2px #678 inset;
color: #DDD;
cursor: pointer;
left: 0;
margin-right: 1px;
padding: 5px 15px;
position: relative;
text-shadow: 1px 1px #000;
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio] { display: none; }

/* el contenido de las pestañas */
.content {
background-color: #678;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 23px;
}
/* y un poco de animación */
.content > * {
opacity: 0;

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

-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #678;
box-shadow: 0 3px 2px #89A inset;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
}

</style>



esta es la primera pestaña

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



Etiam tempor posuere risus, eget suscipit felis ultricies ac. Aenean mattis dignissim purus, at fringilla dui placerat ac. Ut sit amet pellentesque tellus. Aenean fermentum mattis mi. Nullam quis orci aliquam ante tincidunt dapibus sit amet id magna. Duis semper, dui vitae blandit lacinia, justo purus adipiscing purus, id mattis nulla.



Galería con efectos sólo con CSS

Social Lego icons

Otro cambio en el botón Google +1

Efecto Flip Page con CSS

Vísteme despacio que estoy apurado

Dudas y errores cuando se usa CSS

Life line

html5media: Audio y video sin complicaciones

Reproductor alternativo para YouTube

La plantilla de Blogger no es una página web

Tratando de entender la propiedad line-height

Second hand

Mayan icons

Dos bookmarklets para ayudar a diseñar webs

META description en Blogger ¿SI o NO?

Animando un poco la propiedad overflow

Cómo usar el reproductor negro de YouTube

Transiciones combinadas

Las tragedias minúsculas

Tres packs de íconos profesionales

Botón para compartir de StumbleUpon

Creando URLs dinámicas en Blogger

 
CERRAR