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.



69 comentarios:

Graciela  

Muy muy bueno Jmiur, felicitaciones!!!

Me sacaste unas risas con las animaciones :P

Responder
Adrián J. Messina  

Es realmente muy útil y el efecto no se pierde en lo más mínimo.
Un abrazo.

Responder
alianza lima vs universitario  

Hola JMiur,
he visto que algunas paginas en lugar de usar css para las curvas usan imagenes encurvadas, de ser asi como se hace? te paso un ej:

http://allrecipes.com/Recipe/Tiramisu-Toffee-Dessert/Detail.aspx#

Responder
Karla  

Excelente entrada JMiur!; interesante, y me encantan las animaciones que se logran con las bondades del CSS3.

Es fastidioso estar probando en las versiones viejas de IE verdad?, pero bueno conforme vaya pasando el tiempo tal vez esas versiones desaparezcan en lo mas profundo del universo ahhaa!

;)Muchas Gracias y saludos!

Responder
Karla  

JMiur otra vez estoy aquí para preguntarte si ya vistes que la Nueva interfaz de Blogger ya esta disponible desde tu escritorio, y con algunos cambios y novedades que seguramente te agradaran ;) (eso espero).

Por lo pronto yo ya tengo mis impresiones y si!, son buenas :).

Responder
JMiur  

Graciela:
Animaciones apra divertirse :D

Adrián J. Messina:
A mi me gustó la idea y no es complicada. ;uy original.

laMar:
No tengo idea pero, las propeidades depende del navegador y n odel sistema operativo.

alianza lima vs universitario:
Para eso, se usan imágenes de fondo. hay muchas formas. En esta entrada hay una idea general de cómo es el método a aplicar.

Karla:
Sí, es fastidioso y como estoy impedido de usar IE9 porque no funciona en XP, me siento algo perdido y a veces no me dan ganas de buscar alternativas. Seguramente debe haber pero, en este caso, he abandonado el intento.

Hace un ratito, acabo de recibir el pop-up y amablemente, decliné la invitación porque no me gusta para nada nada nada nada. Ya la había probado en Draft y huí raudamente :D

Por suerte, sobre gustos no hay nada escrito o mejor dicho, sobre gustos se escribe de todo y así debe ser :D

Responder
Mikersson  

Yo uso 6 navegadores por necesidad de verific<ción de mis diseños, pero la verdad que Internet Explorer 9 me ha decepcionado.. y pensar qúe you daba por hecho que por fin Microsoft se había encarrilado... pero no.. ninguno de los efectos de esta y muchas otras páginas que usan CSS3 y HTML funvcionan en este bendito navegador.
Firefox, Chrome, Safari,Opera y Rockmelt pasan la prueba... pero Explorer 9.... pfffffff

Responder
Pato  

Muchas gracias por tu entrada, estoy usando tu tutorial para un sitio web.
Yu're a genius!

Responder
Adrián Suárez  

Muy de acuerdo con Mikersson.... decepción grande con el explorer, no funciona el efecto....

Responder
skeletonjack  

Hola me funciona perfecto, muchas gracias por compartirlo,
Tengo dos dudas:
1- Puedo usar un archivo css en vez de colocarlo sobre el head, es que lo intente y sale deforme.
2-Como cambio el color de las fonts de las pestañas y de los recuadros

Gracias de nuevo

Responder
JMiur  

Sí, puedes usar una rchivo CSS externo con este ejemplo o con cualquier otra regla de estilo. Lo que debes hacer es verificar que se cargue correctamente.

Las reglas de las pestañas son las de la clase tab label, allí ipuedes establecer colores y fuentes.

El contenido no tiene. Puedes usar content o bien agregar HTML con reglas propias.

Responder
skeletonjack  

Esta bien gracias, ya le di color con html. Muy bueno el post, me salvo, los demas tabs que vi necesitan *.js y son muchos problemas

Responder
luzyfer  

Gracias por tu idea. En esta "fan page" de facebook:
www.facebook.com/compartim : he creado una pestaña llamada "punts de recollida" , el control de los tabs es tal como has indicado en tu articulo con lo cual he ahorrado el javascript.

Responder
EmmaX  

buenas queria preguntar que significa "content > *" porque no me salen los efectos y creo que puede ser por eso.. estoy intentando instalarlo en un foro, las tabs me funcionan a la perfeccion lo unico que no puedo ver es el efecto.. no es mi navegador ya que puedo ver el efecto en esta entrada pero no en mi foro.. te agradeceria que me explicaras que funcion cumple esa clase

JMiur  

El DIV content es el contenido de cada pestaña; el nombre de la clase es indistinto, puede usarse cualquier otro nombre; tal vez, ese nombre de clase está usado en alguna otra parte del foro y por eso no ves nada. Sin verlo, es imposible decirte mucho más.

EmmaX  

disculpa JMiur pero creo que no me entendiste lo que te quise preguntar.. yo al contenido lo puedo controlar a la perfeccion con la clase content, pero no logro que me funcionen los efectos de esta clase

.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;
}

no me funciona ni la opacidad ni la transicion ni nada.. lo que me parecio raro es que en el nombre de la clase usaras un " > * "

Responder
EmmaX  

perdon ya esta solucionado, el problema era que para que se vean los efectos tenia que ponerle un contenido algo extenso ya que si era muy liviano, hacia tan rapido la transicion que no se alcanzaba a apreciar. saludos

Responder
i.nmuñoz  

como hago para quitar el margen izkierdo del contenido de la tabla?, gracias

JMiur  

¿A qué tabla te refieres?

Responder
RafaMon  

Hola amigo, excelente pero me gustaría que la etiqueta .tabs se adaptara a la altura de cada contenido, he probado cambiando su altura a
height: 100% !important;
position: absolute;

tambien he probado cambiando .content y no doy con lo que quiero. Con la primera opción me reserva el espacio para la pestaña de más altura pero me mantiene ese tamaño para pestañas con menos contenido.

JMiur  

Tendrás que experimentar con el sistema indicado en esta entrada o algo similar y ver si llegas a algún resultado que te satisfaga ya que height 100% no significa que ese elemento ocupe el 100% de su contenido que es variable sino el 100% de su contenedor.

RafaMon  

ok, felicidades por tu gran capacidad, al final siempre acabo en tu blog

Responder
aaron marquez  

Jmiur existe una posibilidad de que pudiera agregar un botone de Next y cada que lo apriete me manda hacia la tab que siga.?
En realidad me serviria de mucho.

JMiur  

Con CSS exclusivamente, lo dudo, para eso, creo que debería usar JavaScript.

Responder
antonio sanchez  

Hola,

¿Alguien ha encontrado alguna solución para que funcione en Internet Explorer 9?

Es una pena pero si no funciona con ese explorador es como decir que no le funciona al 50% de la población.

Felicidades por ese simple pero efectivo código.

Saludos

Responder
bettyboopz  

Hola JMiur,

podría decirme como hacer este esfecto de tabs que encontre en http://www.iwin.com/

Aparecen 3 imagenes por pestaña. Me gustaría mucho implementarlo en mi blog.

Saludos y mucho éxito.

JMiur  

Eso puede hacerse con cualquier sistema de pestañas ya que depende del contenido que pongas en ellas. No hay una forma genérica para eso, dependerá del contexto donde lo hagas.

bettyboopz  

Hola de nuevo,

podrías darme una ayudita, esque soy muy burra y se me complica mucho esto de las pestañas.
Sé que tienes mucho que hacer, ¿pero por dónde empiezo?
Si no puedes ayudarme más se agradece igual.

Saludos y gracias por contestarme.

JMiur  

Primero que nada deberías colocar las pestañas en tu blog sin importar el contenido de ellas. Para e, puedes usar este ejemplo o cualquier otro.

Responder
kawsaqi  

hola JMiur, siempre haciendo uso de tu blog, de antemano tenga un cordial saludo,,no logro entender por qué no me funciona en un blog de prueba antes de implementarlo http://kbperuano.blogspot.com/2012/09/blog-post.html esto y todo lo pongo antes de /head y este otro de prueba después de head y antes de ]]> http://kbperu.blogspot.com/ ,, y no logro implementar, es justo lo que necesito, espero tu respuesta, desde ya muchas gracias por compartir tus conocimiento, es siempre de gran ayuda. saludos

JMiur  

Saludos, kawsaqi.

Lo que noto en el home del sitio es que todo está bien pero, parecería que el CSS lo has agregado dentro de <b:skin> </b:skin> incluyendo las etiquetas <style> </style> y de allí que no se apliquen todas las propiedades sino sólo algunas.

Debes eliminar las etiquetas <style> y </style> porque no deben ser incluidas dentro de esa parte de Blogger. Con borrarlas, todo debería solucionarse.

kawsaqi  

agradesco tu respuesta, lo intenté pero no sale del todo bien, ahora coloqué probando como usted lo explica, antes del /head , y el resultado es http://kbperu.blogspot.com/ ,, como que se va todo el contenido de la web y lo deja en blanco.. a qué se puede deber. de antemano muchas gracias.

JMiur  

Lo que ocurre es que las clases content, tabs y tab ya están siendo usadas para otras cosas dentro de tu plantilla; cámbiales el nombre a las clases de las pestañas o tendrás reglas de estilo mezcladas.

Responder
Gianpierre Herrera Poggi  

Auxilio..! Me podrias ayudar para que ese codigo funcione tambien en IE? o tendras algun otro codigo que si funcione ahi?

Gracias

JMiur  

En versiones anteriores a la 9, no funcionará en IE simplemente proque easa versiones no interpretan las propeidades de CSS3

Responder
Toooooony  

Gracias por el aporte muy bueno, pero voy de nuevo con el "> *" no me funciona la animación así. Puse más contenido pero eso tampoco resolvió el problema (incluso cambié la velocidad).

La única forma es removiendo los selectores "> *" y hacer unos ajustes. Pero me gustaría entender mejor el funcionamiento de éstos.

Responder
Marco  

Muy buena pestaña, el problema sería si quisieras meter un type=radio
no lo reconocería ya que con el css lo estas ocultando.

JMiur  

Bastaría que establecieras las reglas de estilo particulares para esos controles; por ejemplo, si estuvieran dentro del DIV content:

.content [type="radio"] {display: block;}

y así con el resto de las que sean necesarias modificar.

Responder
Andréa Smirna  

Olá venho lhe agradecer mais uma Vez e também dizer que coloquei VAGABUNDIA no meu recomendo do meu Blog [Ai Space]

Responder
Andréa Smirna  

Você tem o efeito desse site de textos ocultos aqui no Vagabundia paracido como o desse site

[image 1]
[image 2]

também Não sei o nome do efeito . Grata!

JMiur  

No sabría decirte porque no veo tal cosa en esa página que indicas:
http://www.centralgospelmusic.com.br/

Andréa Smirna  

Entrando no site. há um slite com rostos dos cantores, selecionar um deles.
Depois vai abrir um lugar Selecione Discográfia.
..Ai chega na página que falai para você. que vem com as letras das músicas ocultando
ME AJUDA VAI!!!
cONFIRMO É E STE [GENTRAL GOSPEL GUSIC]

JMiur  

Ahora lo vi. Hay muchas formas de mostrar y ocultar cosas, si usas jQuery, hay formas sencillas pero no hay ninguna solución universal; dependerá de cada caso.

Responder
Alejandro Pérez  
Este comentario ha sido eliminado por el autor.
JMiur  

No sé a que te refieres con eso; allí hay propiedades definidas en el CSS1, el 2 y el 3; como en casi todo estilo.

Responder
Richard Puma C.  

Genial me sirvió de mucho para diseñar una web

Responder
Francisco Rappazzo  

Hay alguna posilibidad que el contenido del box, tome la altura de acuerdo a la informacion que la contiene, yo estoy colocandole adentro un listado que va variando.
gracias

JMiur  

No con este sistema. La altura debe ser fijada.

Responder
Luis Gomez  

me gustaria saber como cambiar el color de fondo, no encuentro la propiedad en el css si me puedes decir te lo agradeceria, muy buen post :D

JMiur  

La propiedad es background-color; allí están:

.tab label {
background-color: #456;

.content {
background-color: #678;

[type="radio"]:checked ~ label {
background-color: #678;

Responder
Juan J Azpiroz  

Gracias JMiur. Buscaba una solución sencilla al tema de poner pestañas en formularios de entrada de datos y me lo has resuelto de maravilla. Funciona muy bien, al menos en navegadores serios.Saludos

JMiur  

Perfecto, Juan :-)

Responder
David Rivas  

oye que buen tuto.

tengo uan pregunto como se hace para que la info salga arriba del tab y no debajo??

de antemano gracias

JMiur  

Tendrás que experimentar con eso. Habría que pensarlo todo desde cero.

Responder
francisco bordes  

Fantástico aporte JMiur.

Curiosamente ayer me tuve que enfrentar a que una página que estoy haciendo tuviese usuarios de internet explorer, y al ver que no dabas soporte para IE <= 8 tuve que ingeniármelas. He hecho un pequeño script y considero oportuno compartirlo por si algún usuario lo necesita.

Este script funciona con IE versión igual o superior a 8 y requiere jQuery:

1º Añadimos un evento onclick en los label de las pestañas:

<label for="tab-1" onclick="javascript:cambiaPestañaIE('tab1');">...</label>
<label for="tab-2" onclick="javascript:cambiaPestañaIE('tab2');">...</label>
<label for="tab-3" onclick="javascript:cambiaPestañaIE('tab3');">...</label>

2º Creamos la función cambiaPestañaIE:

function cambiaPestañaIE(tab){
var is_ie = navigator.userAgent.toLowerCase().indexOf('msie ') > -1;
if (is_ie){
$(".tab1").css("display","none");
$(".tab2").css("display","none");
$(".tab3").css("display","none");
$("." + tab).css("display","block");
}
}

Responder
francisco bordes  

Se me olvidaba, hay que añadir la clase tab1 tab2... al div content:
<div class="content tab1">
<div class="content tab2">
<div class="content tab3">

Responder
zxciceron  

gracias por el tuto he conseguido poner las pestañas abajo y todo bien, pero me gustaaria poner dentro del conteenido de las pestañas un video de youtube, en cada pestaña me podrias decir como? por lo menos no consigo poner el video, pero imagenes si.

JMiur  

En principio, sólo poniendo la etiqueta object o iframe.

Responder
zxciceron  

hola hay alguna manera de que cuando se de a la siguiente pestaña el video que se esta reproduciendo en la anterior se pare. Un saludo

JMiur  

Eso no puede hacerse con CSS.

Responder
Rafael Ramirez  

Hola, como puedo hacer que el cuadro se ajuste al contenido de cada pestaña, ya que lo inserte en mi blog, pero hay entradas que tienen mayor contenidos que otros pero no se ajustan, itente colocando el alto que esta en px al 100% pero se deforma en las entradas y queda por debajo de los comentarios, espero que me puedas ayudar, desde ya muy buenos aportes en tu blog, saludos...

JMiur  

El esquema que muestra esta entrada no tiene esa posibilidad, la altura debe ser fija.

Responder
Maldito Cretino  

Saludos, sé que ha pasado mucho tiempo desde que has escrito todo esto, pero hasta ahora no le he necesitado. Mi consulta es que cuando añado más pestañas, estas no se abren. ¿Cómo podría solucionarlo?

JMiur  

Imposible saberlo sin ver el ejemplo.

Responder
Dj's Club  

que tal amigo, como estas? como tendria q hacer para agregar mas pestañas? intente pero la cuarta pestaña me sale debajo de la numero 3 y no al lado , necesito como 5. gracias

Responder
Dj's Club  

Hola amigo, discupa las molestias , intente de agregarle una pestaña mas y me sale debajo, te paso el link http://thdjsclub.blogspot.com/p/radio.html con chrome me sale mal y con mozilla me sale al lado , habra alguna solucion ? en total encesito 5 pestañas :/ gracias!!

Responder
Dj's Club  

listo amigo , me habia faltado un /div> jeje muy bueno tu blog , siempre consulto , al igual aun consulto el blog de una genia q se fue entre nosotros escaparate de rosa ...
queria hacerte una pregunta fuera de este tema , ustd podria decirme porque me aparecen estas comillas en la parte debajo del home de mi blog ? <<
>>

sera error de algun gadget ? estoy aprendiendo y eso me trae dolor de cabeza porq a veces esas comillas hacen q el blog se estire mucho. T agradezco

Responder
Fernando Gonzalez  

Buen dia, muy util el tutorial, solo que, justamente, tengo que poner radio buttons dentro del content. Ya hice lo que dijiste (.content [type="radio"] {display: block;}) y ya veo los circulitos, pero las etiquetas de cada circulo lo muestra en caja. Que otras opciones tendria que reescribir para que se vea sin diferencias al resto del formulario?
Gracias

JMiur  

No sé cuál es tu ejemplo ni que etiquetas estás usando o como está armado ese formulario.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR