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.



Hay muchas formas de mostrar imágenes con efectos diversos utilizando sólo CSS; el problema que tienen muchos es que estas cosas suelen no ser "amigables", no es cosa de copiar y pegar para que …

Social Lego Contiene 20 íconos de 256x256, en formato PNG. descargar …

Según anuncian en su blog oficial, Google ha realizado otro cambio en su botón +1 para permitir que las entradas puedan enviarse y compartirse, de manera similar al botón compartir de …

Pure CSS3 Page Flip Effect es un experimento más de Román Cortés que, por la fecha de su realización, sólo funcionaba en Chorme pero, que con algunos pequeños agregados, también funcionará en otros …

Que optimizar los sitios es algo que debería ser una tarea constante, no cabe la menor duda. Si lo hacemos o no lo hacemos, es otra historia pero, nadie en su sano juicio diría que es mejor algo que …

Interensante artículo de CSS Tricks donde se muestran las diferencias que suelen confundirnos cuando creamos reglas de estilo; algo que no sólo ocurre con los principiantes sino con todos …

Yo dudo siempre de estas cosas porque uno, nunca sabe hasta cuando durarán pero claro, nadie sabe tampoco hasta cuando durará nada de nada y aquello que parecía que existiría para siempre, de un día …

Cada dos por tres tengo dramas con YouTube. Actualizo el plugin de Flash en Firefox y los videos de YouTube se tornan inaccesibles. No se cargan, se ve un rectángulo negro; fuera de allí, todo es …

Suele ser común que pregunten por qué no funcionan ciertos códigos que vemos en la plantilla cuando se intenta agregarlos en un elemento HTML, en una entrada o incluso en alguna parte distinta de la …

La propiedad line-height puede resultar algo confusa ya que, por lo general, es "invisible"; por ejemplo, si la agrego a un elemento inline como SPAN que tenga un color de fondo, no parece tener …

Mayan Vector Icon Pack Contiene 25 íconos de 792x512, en formato PNG. descargar …

Una forma sencilla de tener herramientas de diseño sin necesidad de instalar software o extensiones en los navegadores es utilizar bookmarklets que no son otra cosa que enlaces que ejecutan …

Esta entrada no pretende dar una respuesta sino mostrar las consecuencias de las distintas alternativas y permitir que cada uno decida qué hacer ya que en la web se ven soluciones que en realidad …

Una de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa …

Según anuncian en su página oficial, en los próximos días, YouTube comenzará a darnos la opción de seleccionar entre dos tipos de reproductores a insertar; el que vemos ahora y el nuevo que es de …

Este es un ejemplo de transiones que se aplican de modo diferente cuando colocamos el cursor encima del botón y cuando lo quitamos con lo que se genera una animación sin necesdad de utilizar …

ThemeShock Credit Cards Icons Contiene 48 íconos de 24x24, 32x32, 48x48 y 64x64, en formato PNG. descargar Textured Iconset Contiene 44 íconos de 32x32, en formato PNG. descargar Glossy Contiene …

Los botones contadores de las redes sociales están de moda. Este es el de StumbleUpon. Para crearlo, ingresamos a esta página, seleccionamos uno de elos modelos disponibles y listo, copiamos el …

Para quien tiene un blog en Blogger, las URLs generadas por el sistema son de poca importancia ya que no las controlamos más allá del título que tenga una …

Los códigos QR (Quick Response Barcode) se han ido transformando en algo común, muy usado en teléfonos móviles ya que ayuda a navegar de manera más segura (más información) Hay muchos sitios que …

Simple Blogger es un soft interesante y práctico para quien quiera publicar entradas en su blog sin demasiadas complicaciones. Se trata de un programa portable (no requiere ser instalado) que …

 
CERRAR