Crear pestañas solamente con CSS3 y HTML5

Ya hemos visto cuán fácil es crear pestañas con HTML5, CSS3 y jQuery. Sin embargo, es perfectamente posible hacerlo sin necesidad de escribir ningún código Javascript ni descargar ningún plugin de jQuery.

Los "botones de opción" (en inglés, "radio buttons") son elementos que se usan frecuentemente dentro de formularios web y permiten elegir una única opción dentro de un conjunto de varias opciones. Veremos cómo podemos aprovechar esta propiedad para crear pestañas (o "tabs") usando solamente reglas CSS3 y etiquetas HTML5.

Empecemos a explicar el código HTML5. La etqueta <h1> muestra el título principal. La etiqueta <div id="container"> es el contenedor principal de la página. Dentro de ella se colocan tres etiquetas <input id="tab-n" type="radio" name="tab-group"> de tipo "radio button" y tres etiquetas <label for="tab-n"> que serán los títulos de cada pestaña. Observemos que la primera pestaña muestra el atributo checked="checked", esto quiere decir que, por defecto, se ha seleccionado el primer "radio button" y la primera pestaña está activa.

Dentro de la etiqueta <div id="content"> hay tres etiquetas <div id="content-n"> que corresponden al contenido de cada pestaña. En la primera pestaña se mostrará dos párrafos con una imagen alineada a la izquierda. En la segunda pestaña se mostrará dos párrafos a dos columnas con una imagen en la cabecera. Y en la tercera pestaña se mostrará dos párrafos con una lista desordenada.

<body>
<!--Título-->
<h1>Crear pestañas solamente con CSS</h1>
<!--Contenedor-->
<div id="container">
<!--Pestaña 1 activa por defecto-->
<input id="tab-1" type="radio" name="tab-group" checked="checked" />
<label for="tab-1">Pestaña 1</label>
<!--Pestaña 2 inactiva por defecto-->
<input id="tab-2" type="radio" name="tab-group" />
<label for="tab-2">Pestaña 2</label>
<!--Pestaña 3 inactiva por defecto-->
<input id="tab-3" type="radio" name="tab-group" />
<label for="tab-3">Pestaña 3</label>
<!--Contenido a mostrar/ocultar-->
<div id="content">
<!--Contenido de la Pestaña 1-->
<div id="content-1">
<p class="left"><img src="http://ximg.es/160x120" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum sit reprehenderit iusto harum minima. Assumenda, accusamus, perspiciatis inventore tempora qui pariatur quisquam? Deleniti, placeat ea nostrum officiis obcaecati temporibus quod. Ullam, in, adipisci autem at fugit ab tempore enim ratione nesciunt alias corporis vitae quo quod nostrum itaque vero iure?</p>
<p class="left last"><img src="http://ximg.es/160x120" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, id blanditiis deserunt in molestiae excepturi incidunt molestias dolor sunt dolore obcaecati non repellat mollitia error placeat est exercitationem sit voluptates iure autem saepe voluptas harum unde perferendis modi provident labore voluptatum. Repudiandae, aspernatur sit harum quod vero quos sequi voluptas!</p>
</div>
<!--Contenido de la Pestaña 2-->
<div id="content-2">
<p class="column-left"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, est, nisi enim voluptates dicta quibusdam recusandae eveniet provident non at nostrum nesciunt laudantium omnis aliquam debitis magni expedita cumque tempore.</p>
<p class="column-right"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, molestiae, officia repellendus quasi cumque dolor eius deserunt possimus aliquid neque nam assumenda veniam soluta enim commodi aperiam reprehenderit quia incidunt.</p>
</div>
<!--Contenido de la Pestaña 3-->
<div id="content-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, aperiam, enim odit placeat minus ab vero molestiae ad fugit maiores eaque saepe debitis assumenda ut ipsam eius sit repellendus dolore.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in magni illo dolore dicta vero.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, minus, aspernatur voluptatem doloribus labore modi.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, exercitationem quia id accusamus beatae sunt? Dolorum mollitia sint debitis delectus.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, accusantium, provident ab quo sed blanditiis perspiciatis distinctio aut voluptatibus cum odio quaerat iure vel dolorum fugit explicabo suscipit tenetur. Sed!</p>
</div>
</div>
</div>
</body>

Ahora veamos cómo controlar las pestañas mediante las reglas de estilo CSS. La regla #container input establece visibility:hidden para ocultar los botones de opción, de manera que solamente se muestren los títulos de cada pestaña según la regla #container label.

La regla #content div establece opacity:0 y z-index:-100 para ocultar el contenido de la capa.

Las reglas #container input#tab-n:checked ~ #content #content-n establecen opacity:1 y z-index:100 para mostrar el contenido de la pestaña "n" solamente cuando se haya seleccionado el botón de opción "n". El resto de reglas CSS sirven para mejorar el aspecto visual de los elementos de la página.

* {
font-family: Arial, sans;
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
h1 {
margin: 1em 0;
text-align: center;
}
#container {
margin: 0 auto;
width: 50%; /* Ancho del contenedor */
}
#container input {
height: 2.5em;
visibility: hidden;
}
#container label {
background: #f9f9f9; /* Fondo de las pestañas */
border-radius: .25em .25em 0 0;
color: #888; /* Color del texto de las pestañas */
cursor: pointer;
display: block;
float: left;
font-size: 1em; /* Tamaño del texto de las pestañas */
height: 2.5em;
line-height: 2.5em;
margin-right: .25em;
padding: 0 1.5em;
text-align: center;
}
#container input:hover + label {
background: #ddd; /* Fondo de las pestañas al pasar el cursor por encima */
color: #666; /* Color del texto de las pestañas al pasar el cursor por encima */
}
#container input:checked + label {
background: #f1f1f1; /* Fondo de las pestañas al presionar */
color: #444; /* Color de las pestañas al presionar */
position: relative;
z-index: 6;
}
#content {
background: #f1f1f1; /* Fondo del contenido */
border-radius: 0 .25em .25em .25em;
min-height: 20em; /* Alto del contenido */
position: relative;
width: 100%;
z-index: 5;
}
#content div {
opacity: 0;
padding: 1.5em;
position: absolute;
z-index: -100;
}
#content-1 p {
clear: both;
margin-bottom: 1em;
}
#content-1 p.left img {
float: left;
margin-right: 1em;
}
#content-1 p.last {
margin-bottom: 0;
}
#content-2 p {
float: left;
width: 48.5%;
}
#content-2 p.column-right {
margin-left: 3%;
}
#content-2 p img {
display: block;
margin: 0 auto 1em auto;
}
#content-3 p,
#content-3 ul {
margin-bottom: 1em;
}
#content-3 ul {
margin-left: 2em;
}
#container input#tab-1:checked ~ #content #content-1,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3 {
opacity: 1;
z-index: 100;
}

El resultado final está disponible en este enlace. Espero que este procedimiento pueda ser un punto de partida para incluirlo en tus proyectos de diseño web.

Hasta la próxima. ¡Abur!

César Vargas-Machuca

César Vargas-Machuca

Desarrollador web (front-end). Creador de sitios web adaptables al entorno del usuario (responsive web design) y optimizados para los motores de búsqueda (posicionamiento SEO). Lector frecuente. Apasionado por la buena música. Aprendiz empedernido. Amigo de los animales. Excesivamente puntual. Detesto el spam. Soltero, ayer y hoy. Peruano, ¡siempre!