Pestañas con técnica Sliding Doors

Pestañas con técnica Sliding Doors

En este artículo aprenderemos una técnica para maquetar con CSS un sistema de pestañas o solapas (lo que se llama tabs en inglés), de una manera bastante sencilla, funcional y polivalente. Veremos paso a paso cómo crear las pestañas, desde el código HTML que utilizaremos, hasta las diferentes clases y estilos que definiremos para aplicar el aspecto final a las pestañas.Las interfaces de pestañas las hemos visto en infinidad de sitios y de programas, por lo que resultan muy sencillas de usar por parte de los usuarios, ya que están acostumbrados a trabajar con ellas. También aportan un atractivo estético bastante notable a los diseños de los sitios web, por lo que las convierte en un componente útil, atractivo y adecuado en la mayoría de casos.

Como sabemos, CSS nos permite hacer diseño de interfaces de usuario de una manera elegante y sencilla y en este artículo de DesarrolloWeb.com vamos a poner en práctica estas ventajas de CSS, ya que diseñaremos las pestañas manteniendo un código HTML sencillo y definiremos el aspecto únicamente con Hojas de Estilo en Cascada.

Para empezar, podemos ver lo que sería una interfaz de Pestañas en la siguiente imagen:

sliding-doors-1

Ahora que ya sabemos el resultado que pretendemos obtener, pasemos a ver paso a paso los componentes de este diseño.

HTML: las pestañas como elementos de listas, LI

Veamos el código HTML que hemos utilizado para definir los contenidos de las pestañas:

<div id=”pestanas”>
<ul>
<li><a href=”#”>DesarrolloWeb.com</a></li>
<li class=”activa”><a href=”#”>CriarWeb.com</a></li>
<li><a href=”#”>Comunidad</a></li>
<li><a href=”#”>Otro enlace más largo</a></li>
</ul>
</div>

Como se puede ver, hemos definido los distintos enlaces que aparecerán en las pestañas con una simple lista HTML, etiquetas UL y LI.

Todo el sistema de pestañas está metido en una capa con identificador (atributo id) “pestanas”, a la que daremos estilos luego con CSS. Además podemos fijarnos que uno de los elementos de la lista LI, tiene la clase (atributo class) “activa”, que nos servirá para hacer una pestaña con otro color, para simbolizar que es la pestaña activa.

Podemos comprobar que el código HTML es realmente simple. Lo bonito será aplicar estilos con CSS para convertir esta lista en unas pestañas.

Técnica Sliding Doors, Puertas Deslizantes

Técnica Sliding Doors, que en español significa Puertas Deslizantes.  Con esta técnica se conseguirá que el texto que hay dentro pueda crecer manteniendo el aspecto de las pestañas.Las pestañas tienen a los dos lados bordes redondeados, que haremos con imágenes que se colocarán como fondo con CSS, en cada uno de los laterales de las pestañas. En el medio estará el texto.

Los dos laterales serán las puertas deslizantes y a medida que crezca el texto los fondos serán desplazados a los lados.

sliding-doors-2

Las dos puertas son las imágenes que se colocan como fondos, anclados a la izquierda y la derecha. El texto, cuando crece, empuja los dos fondos de imagen a los lados, ya que están anclados. Comprendida esta idea,  seguidamente se ejempla cómo en realidad serán los fondos de las puertas deslizantes.

sliding-doors-3

Se van a utilizar dos fondos. El fondo de la derecha, asignado a los elementos de la lista, tendrá tanto el borde redondeado de la derecha como el fondo del centro de la pestaña. A la izquierda se tendrá el fondo del enlace, que será más estrecho (comprendiendo sólo lo que es el borde de la izquierda de la pestaña.El fondo de la lista, a la derecha, tiene que poder crecer tanto como el texto lo requiera. A más texto en la pestaña también el espacio del medio será mayor. Se debe crear una imagen lo suficientemente grande para que quepa un texto de cualquier longitud, o de lo contrario habría un hueco vacío entre los fondos de la izquierda y la derecha de la pestaña.

Dado que los enlaces están contenidos en los elementos de la lista, sus fondos (los que aparecen a la izquierda) se situarán por encima del fondo de la lista, con lo que se tapará el fondo de la lista, que no tiene el borde redondo.

Las dos imágenes que se van a utilizar para maquetar la pestaña serán como estas:

sliding-doors-4

Y para el caso de las pestañas activas se utilizan estas otras imágenes:

sliding-doors-5

CSS para hacer las pestañas

Estilos CSS para las pestañas, comenzando por la capa con id “pestanas”.#pestanas {

float:left;
width:100%;
line-height:normal;
font-size: 16px;
font-weight: bold;
}

Seguidamente hay varios estilos que alteran el aspecto del texto y la colocación de la página, pero nada demasiado importante.

Estilos generales de la lista (para la etiqueta UL).

#pestanas ul {
margin:0;
padding:0;
list-style:none;
}

Se deben de eliminar los márgenes y padding y además de indicar que no se quieren bullets para los elementos.

Aqui empieza a tener interés: los elementos de lista.   Tenemos que utilizar una imagen de fondo que se tenía que anclar a la derecha.

#pestanas li {
float:left;
margin:0 0 0 3px;
padding:0;
background:url(“p-der.gif”) no-repeat right top;
}

Los elementos tienen float:left para que se sitúen uno detrás del otro. El margin se pone en este caso es para que las distintas pestañas aparezcan separadas un poco. Y el fondo, como vemos en el atributo CSS background, está colocado para que se sitúe a la derecha del elemento de la lista, con no-repeat porque no queremos que haga un mosaico.

Seguidamente el estilo de los enlaces, que tenía una imagen como fondo anclada a la izquierda.

#pestanas a {
padding:3px 10px 3px 10px;
display:block;
background:url(“p-izq.gif”) no-repeat left top;
color: #fff;
text-decoration: none;
}

El padding es para que el enlace tenga espacio vacío alrededor, lo que hace que la pestaña gane algo de tamaño y quede más suelta. Todos los enlaces tienen display: block para que se traten como un bloque y la parte que se puede hacer clic sea todo el espacio (el enlace más el padding) y no sólo el texto. El fondo, como se puede apreciar, tampoco debe repetirse y se debe anclar a la izquierda.

Hay que crear la clase “activa”, con unas imágenes de fondo distintas, en otro color, que simbolizarán la pestaña activa.

#pestanas .activa a{
background-image:url(“p-izq-activo.gif”);
}
#pestanas .activa{
background-image:url(“p-der-activo.gif”);
}

No se cambia ningún otro atributo del elemento de la lista ni del enlace, solamente el archivo que tiene que utilizarse como imagen de fondo.

Seguidamente se tiene el ejemplo creado por completo.

<html>
<head>
<title>Pestañas maquetadas con listas y CSS</title>
<style type=”text/css”>
#pestanas {
float:left;
width:100%;
line-height:normal;
font-size: 16px;
font-weight: bold;
}
#pestanas ul {
margin:0;
padding:0;
list-style:none;
}
#pestanas li {
float:left;
margin:0 0 0 3px;
padding:0;
background:url(“p-der.gif”) no-repeat right top;
}
#pestanas a {
display:block;
background:url(“p-izq.gif”) no-repeat left top;
padding:3px 10px 3px 10px;
color: #fff;
text-decoration: none;
}
#pestanas .activa a{
background-image:url(“p-izq-activo.gif”);
}
#pestanas .activa{
background-image:url(“p-der-activo.gif”);
}
</style>
</head>
<body>
<div id=”pestanas”>
<ul>
<li><a href=”#”>DesarrolloWeb.com</a></li>
<li class=”activa”><a href=”#”>CriarWeb.com</a></li>
<li><a href=”#”>Comunidad</a></li>
<li><a href=”#”>Otro enlace más largo</a></li>
</ul>
</div>
</body>
</html>

Seguidamente se va a explicar cómo definir estilos a la lista y a los enlaces para que tuvieran el aspecto de pestañas o tabs. Entonces creamos dos tipos de pestañas, una para cuando la pestaña está activa o seleccionada y otra para cuando no está activa.

Fondo para la capa donde están las pestañas

Se debe crear un fondo de imagen para la capa donde están las pestañas. El fondo podrá ser como nosotros queramos, pero la imagen deberá tener en la parte de abajo una línea que sirva para cerrar las pestañas en la base de éstas. Por ejemplo, podríamos utilizar un fondo como el de la siguiente imagen:

En el ejemplo esta capa el id=”pestanas”, así que para especificar el fondo de este elemento se debe que alterar el CSS :

#pestanas {
float:left;
width:100%;
line-height:normal;
font-size: 16px;
font-weight: bold;
/*pongo un fondo para toda capa donde están las pestañas*/
background: transparent url(fondo-pestanas.gif) repeat-x bottom;
}

Mostrar, o no, la línea que cierra las pestañas

Se debe definir un padding en la base (bottom) de los enlaces para dejar ver, o no, la línea que cierra las pestañas. La pestaña activa no debe dejar verse el fondo con la línea que cierra las pestañas, para que parezca que está abierta.

Se debe definir dos padding-bottom distintos, para los enlaces de las pestañas en general y para el enlace de la pestaña activa en particular. El padding-bottom de la pestaña activa deberá ser tantos píxeles mayor como sea la altura de la línea que cierra las pestañas (que hemos definido en el fondo, en nuestro caso 1 píxel). Así conseguiremos que el enlace de la pestaña activa llegue hasta abajo del todo de la capa donde están las pestañas (id=”pestanas”), sobreponiéndose a la línea del fondo y sin permitir que se vea. Las pestañas desactivadas tendrán menos padding-bottom, con lo que no llegarán al fondo de la capa donde están las pestañas y dejarán entrever la línea del fondo que las cierra.

#pestanas a {
display:block;
background:url(“p-izq.gif”) no-repeat left top;
padding:3px 10px 3px 10px;
color: #fff;
text-decoration: none;
/*definimos un padding para los enlaces de las pestañas*/
padding-bottom: 2px;
}
#pestanas .activa a{
background-image:url(“p-izq-activo.gif”);
/*colocamos un padding 1 pixel mayor que el padding de los enlaces no activos*/
padding-bottom:3px;
}

Y estas son las únicas modificaciones que habría que hacer para que la interfaz de pestañas tenga una línea para delimitar las tabs no activas.

Contenedor para la pestaña activa

Para que se vea bien el efecto de pestaña activa, se coloca debajo de las pestañas una nueva capa que serviría como contenedor del contenido de la pestaña seleccionada. Este contenedor no haría falta para el ejemplo de pestañas, pero será mejor colocarlo para mostrar con más claridad el efecto explicado en este artículo.

El contenedor es una simple capa DIV con un texto, a la que se le debe de asignar algunos estilos CSS:

<div id=”contenedorpestanas”>
Aquí se mostraría el contenido de la pestaña activa…
</div>
#contenedorpestanas{
background-color: #ccb355;
padding: 10px;
clear: both;
}

Entre los estilos colocados hay dos que serían importantes. Primero el fondo del contenedor, que lo he colocado con el mismo color de la pestaña activa, para que se continúe el color desde ésta hacia el contenedor y parezca que formen parte de un mismo bloque. Luego necesitaba también un estilo clear:both, puesto que los elementos de la lista estaban con un “float” y esta nueva capa id=”contenedorpestanas” queremos que aparezca justo debajo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: