Puertas deslizantes con CSS

Una ventaja de CSS que rara vez se mencióna es la habilidad de poner las imágenes de fondo en capas, permitiendo que se deslicen para crear ciertos efectos. CSS2 requiere elementos HTML distintos para cada imagen de fondo. En muchos casos código semánticamente correcto ya provee estos distintos elementos, suficientes por lo tanto para aplicar este truco.

Uno de estos casos es la navegación con pestañas. Es hora de retomar el control sobre las pestañas cuya popularidad para la navegación primaria en muchos sitios esta creciendo. Ahora que CSS es aceptado ampliamente, podemos subir la calidad y el aspecto de las pestañas de nuestros sitios. Probablemente estén al tanto de que se puede usar CSS para dominar simples listas desordenadas . Quizás hasta hayan visto listas estilizadas como pestañas de una manera similar a esta:



Que dirían si les dijese que con el mismo código HTML de las pestañas de arriba, podemos hacer algo así:

Con estilos simples, podemos.

¿Dónde esta la innovación?

Muchas de la pestañas estilizadas con CSS que he visto tienen el mismo aspecto general: rectangulos cuadrados de color, quiza con un borde, quiza con un recuadro, un borde desaparece para la pestaña activa, el color cambia en el estado :hover . ¿Esto es todo lo que CSS nos puede brindar? ¿Un puñado de cajas de colores?

Antes de la expansión de CSS, comenzamos a ver un montón de innovación en el diseño de navegación. Formas creativas, fusion de colores e imitaciónes de interfaces físicas del mundo real. Pero estos diseños dependían de una construcción compleja de imágenes mezcladas con tablas. Modificando el texto o el orden de las pestañas requerían un gran esfuerzo. Cambiar el tamaño de letra era imposible o causaba grandes desperfectos en el diseño de la página.

Navegación por texto puro es mucho más simple y carga mas rápido que usando imágenes. Ademas, aunque podemos poner atributos alt a cada imagen, texto puro es mucho más accesible ya que se puede agrandar el tamaño de letra para gente con problemas de vista. No es ningún misterio porque la navegación hecha con texto esta volviendo a la escena. Pero la mayoría de estas pestañas estilizadas con CSS siguen estando un nivel por debajo de lo que antes se podía conseguir, obviamente nada que se pueda incluir en un portfolio. Una nueva tecnología (como CSS) debería permitirnos crear algo mejor, sin perder la calidad gráfica de los modelos antiguos con tablas e imágenes incorporadas.

La técnica de puertas deslizantes

Hermosuras, componentes de interfaz verdaderamente flexibles que se expanden y contraen con el tamaño del texto son posible con dos imágenes de fondo. Una para la izquierda y otra para la derecha. Piensen que estas imágenes son como dos puertas deslizantes que completan una entrada. Las imágenes se acercan y se superponen para llenar un espacio poco ancho, o se separan para llenar un espacio mas ancho, como muestra el siguiente diagrama:

Con este modelo, una imagen cubre una porción de la otra. Asumiendo que queremos algo especial en la parte exterior de cada imagen, como una esquina redondeada, no queremos que la imagen superior cubra complemtamente a la inferior. Para evitar esto hacemos que la imagen de la izquierda sea lo mas fina posible. Pero lo suficientemente ancha como para que se vea el detalle especial:

Usuarios que han visto este tema también han visto...

- Controlar el desbordamiento en una etiqueta con CSS
- Efectos en textos e imágenes con CSS
- Textscroll en CSS
- Menus simples con CSS y listas

- Versión imprimible de este documento
- Enviar por e-mail este documento