JMiur [E]

El artículo de kamikazemusic.com nos muestra una forma de crear pestañas o tabs sin JavaScript, utilizando sólo propiedades CSS que, con las limitaciones del caso, funcionarán incluso en Internet Explorer.

El código HTML es simplísimo y lo pondremos donde se nos ocurra:
<div id="csstabs">
<!-- la primera pestaña -->
<div id="tab1" class="tabbox">
<h3>TITULO 1</h3>
<div class="tabcontent">
....... aquí pondremos el contenido .......
</div>
</div>
<!-- la segunda pestaña -->
<div id="tab2" class="tabbox">
<h3>TITULO 2</h3>
<div class="tabcontent">
....... aquí pondremos el contenido .......
</div>
</div>
</div>
El esquema lo repetimos con cualquier cantidad de pestañas y en este ejemplo, sólo hay dos.

Ahora, el CSS que tiene una parte que es genérica y otra que es individual, para cada una de las pestañas. Lo ponemos antes de </head>:
<style>

/* debemos dimensionar el área donde se mostrarán */
#csstabs {
height: 370px;
margin:0 auto;
position:relative;
width: 350px;
}
#csstabs div {
padding: 10px;
}
#csstabs h3 { /* los títulos de las pestañas */
color: #ABC;
cursor: pointer;
display: block;
font-size: 20px;
font-weight: normal;
height: 25px;
line-height: 25px;
margin: 0;
padding: 5px;
text-align: center;
width: 160px;
}
.tabcontent {  /* el contenido de las pestañas */
display: block;
height: 320px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 40px;
width: 100%;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
z-index: 0;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
opacity: 0;
z-index: 0;
}

/* las definiciones de cada pestaña que pueden ser iguales o diferentes */

#tab1 .tabcontent {
background-color: #234;
z-index: 2;
}
#tab1 h3 {
left: 0;
position: absolute;
top: 0;
z-index: 3;
}
#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
background-color: #234;
color: #DEF;
z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
opacity: 1;
z-index: 3;
}

#tab2 .tabcontent {
background-color: #E6EAF3;
opacity: 0;
z-index: 1;
}
#tab2 h3 {
left: 180px;
position: absolute;
top: 0;
}
#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
background-color: #E6EAF3;
color: #565A63;
z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
opacity: 1;
z-index: 3;
}

</style>

Pestaña 1

Nullam vitae lacinia risus. In hac habitasse platea dictumst. Curabitur dapibus magna sed lorem mollis sagittis.

Suspendisse imperdiet; erat id iaculis aliquet, erat tellus commodo libero, sed commodo arcu felis at enim. Integer nec neque arcu, ut bibendum tortor. In dolor lorem, molestie vitae viverra sit amet, elementum vel orci! Etiam tincidunt erat vel sem venenatis lobortis.

Mauris elit urna, molestie a bibendum non, iaculis non magna.

Quisque lectus tortor, lobortis vel porta a, tempus eget lorem? Aenean diam tellus, tristique quis consequat et, ornare id dui.

Pestaña 2

18 comentarios:

MamaNunes  

:O Impressionante!! Estou apaixonada por CSS (rsss) Oh Dios!!!
Gracias por compartir maestro!

Responder
JMiur  

Yo también :D Realmente, se abren nuevas posibilidades.

Responder
Quique  

me dejas de piedra maestro! me estas diciendo que ya puedo tirar todos los scripts que ralentizan la pagina y dejar este simple y maravilloso CSS? ohh! eres un genio!!! ya tengo trabajito para esta semana! :)

Responder
JMiur  

No he dicho tal cosa, Quique pero, vale la pena ir probando cosas nuevas y ver que resulta :D

Responder
Quique  

bueno ya he hecho la primera pruebay con este css puedo hacer lo mismo que hacia hasta ahora con el jquery... asi que ya puedo probar de reemplazarlo :)

Responder
JMiur  

Adelante y suerte :D

Responder
Maite  

Me la guardo en favoritos sin duda!!! :D gracias por explicarlo tan claritooooo :D

Responder
JMiur  

Este es bastante fácil de armar y es increiblemente efectivo :D

Responder
NotiColombiaPress  

JMiur: Y no habrá uno igual para hacer un índice automático? Felicitaciones,

Allende La Paz

Responder
JMiur  

Hay algunas formas de haer eso. En esta entrada hay un modo y en este sitio algo similar.

Responder
Anónimo  

Estimado.
con este css usted puso darle este aspecto a su pagina o es una plantilla de blogger? disculpe la pregunte pero estoy queriendo darle a mi blog/pagina (recien lo pase a dominio .com) un aspecto un poco mas profesional.
Muy amable

Responder
JMiur  

No entendí la pregunta.

Responder
Taillard  

Jmiur a Elke Batista de Brasilia Brasil ensina como colocar 3 tabs usando css sem entrar em conflito com nadia.
Mas mesmo assim obrigada!

Responder
Guido  

Me gusta mucho todas las cosas que pones, y muchas antes las hacía con... bueno, mejor dicho, no las hacía! Pero ahora puedo hacer trancisiónes con CSS!!! Es una ventaja, gracias! El balcón de Jaime (Lamentablemente finalizado) y Vagabundia (Por supuesto!) son unos de los mejores blogs con cosas de HTML o CSS, me ayudan mucho a personalizar mi blog (click aquí para visitarlo).
PD: Lo que me gustó y ya se como hacerlo, es cambiar el color del seleccionador o subrayador de texto!

Responder
anthala  

Hola que tal!!.
Primero agradecerte tu tiempo y tu dedicación
Referente a este ejemplo de pestañas ¿se podría cambiar el efecto hover, al mostrar el contenido por el efecto click ? osea que al hacer clik en una pestaña se mostrara el contenido

Antonio
Un saludo

Responder
JMiur  

El CSS no tiene esa función, para eso se requiere JavaScript.

Responder
Martin Oviedo  

NO andan bien hay que arreglar el tema del hover, cuando pasas el mouse no funciona bien.

JMiur  

No veo que haya problema alguno.

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