Variante de pestaña usando solo CSS

Variante de pestaña usando solo CSS

Buenas, ahora con un tutorial, trata de las pestañas que se crean usando sólo CSS, estas 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.

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>

El resultado:

Primera

el contenido de la pestaña 1, en todas cualquier tipo de contenido

Segunda

el contenido de la pestaña 2

Tercera

el contenido de la pestaña 3

1.  ¿Te gusto el tutorial? → Siguenos en nuestras redes sociales para más!. 
2. Comentar es Agradecer.

¡Compártelo!

Tweet