css

Introducción

Hace mucho tiempo atrás, cuando las hojas de estilos (CSS) estaban en pañales y no se habían popularizado eran pocas formas de lograr efectos visuales interesantes en HTML. Había que ser un experto en JavaScript o utilizar algunos de los cientos de script que daban vueltas por algunos sitios y adaptarlos para uso propio.

Entre ellos, estaba un comportamiento que se popularizó a partir de Dreaweaver 4: lo que se dio en llamar imagen de sustitución o rollover image. Su lógica es muy sencilla: utilizar una imagen en un enlace y cuando el usuario coloca el mouse encima de ella cambiarla por otra, que generalmente es igual a la primera con algún efecto visual añadido como sombras, cambio de color de fondo, entre otras.

Esta solución práctica tiene dos problemas:

• Redundancia de la información. Por cada enlace hay dos imágenes que la mayoría de las veces son iguales con sólo un pequeño cambio añadiendo algún efecto visual.
• Actualización poco práctica. Si queremos actualizar un enlace o agregar uno nuevo hay que modificar dos imágenes. No es un gran problema pero imaginemos que en un menú con 7 opciones cambiar el color de la tipografía implica modificar ¡14 imágenes!

¿De qué modo resolver esto? A través de las hojas de estilo o CSS (Cascade Steel Sheet).

Para ello tenemos dos posibilidades: realizar un botón enteramente con CSS prescindiendo de las imágenes o emplear CSS para modificar algunos de sus atributos. Vamos a seguir esta segunda opción.

HTML y CSS

El efecto que haremos será modificar el color de fondo de la imagen y agregarle un borde de color para destacarla. La lógica a emplear es bastante sencilla: armar una imagen con fondo transparente y crear una clase CSS para que el fondo y el borde cambie cuando el usuario coloque el mouse encima del enlace.

Para ello tendremos dos archivos: uno llamado boton.html donde pondremos el código para mostrar el botón y otro efecto.css que contendrá los estilos para producir el efecto.

La implementacion de las hojas de estilo CSS en Internet Explorer (IE) difiere bastante de la del resto de los navegadores. No vamos a entrar en la polémica sobre cuál es mejor o cuál se adapta más a los estándares de la W3C. Simplemente intentaremos solucionar el problema del mejor modo: crear una serie de clases para IE y otra serie de para el resto de los navegadores. Veamos entonces…

Crear la imagen

Para el ejemplo emplearemos un clásico botón de inicio como este:

Como dijimos antes, la única condición es que tenga el fondo transparente. Podemos usar el formato GIF o el PNG. En mi caso voy a emplear el primero.

Un detalle a tener en cuenta es evitar el borde dentado de la imagen mediante la opción «mate» del editor gráfico que vayamos a usar, en la cual indicamos el color de fondo sobre el cual se colocará la imagen. Para este ejemplo el blanco será el color fondo original y el amarillo el fondo para cuando se «active» la imagen.

El HTML y la hoja de estilos

Vamos a crear un selector ID dentro del cual colocaremos todas las imágenes del menú. Lo haremos con la etiqueta DIV. El código del archivo HTML a ponder a continuación de la etiqueta BODY es muy sencillo:

En la hoja de estilos (efecto.css) definimos que todos los enlaces -es decir, todo lo que esté encerrado en la etiqueta A- tenga las siguientes propiedades:

Color de fondo blanco y borde gris como estado original.

Color de fondo amarillo y borde amarillo para cuando el usuario coloque el mouse.

El código CSS quedaria algo así:

#menu a {
border: 1px solid #f0f0f0;
background-color: #fff;
}
#menu a:hover {
border: 1px solid #fc0;
background-color: #ffc;
}

¡Y está! La imagen cambiará de color de fondo y su borde al pasar el mouse sobre ella.

Solamente hay que tener en cuenta que estas propiedades afectarán a todos los elementos que sean enlaces y estén dentro de la sección menu (la cual definimos con la etiqueta DIV). Por ello no hay que colocar aquí enlaces de hipertexto porque tendrán el mismo efecto que las imágenes.

Estilo para el resto de los navegadores

Aquí se nos plantea un problema: ¿Cómo escribir un código en CSS que no interprete el Internet Explorer? La solución está en emplear una serie de bugs que este navegador tiene a la hora de interpretar CSS. A esta técnica también se la conoce como hack y consiste en escribir un código que el IE no lo procese.

No vamos a entrar en detalles sobre esto sino simplemente aplicar esta técnica

Pero antes de esto debemos considerar una cuestión: todos los navegadores han interpretado el código anterior. Para evitar problemas en la visualización deberemos resetear o poner los valores anteriores en cero.

Lo hacemos del siguiente modo:

html>body>#menu a {
border: 0;
background-color: transparent;
}
html>body>#menu a:hover {
border: 0;
background-color: transparent;
}

Ahora sí el camino está despejado para que definir las clases:

html>body>#menu a .imgMenu {
border: 1px solid #f0f0f0;
background-color: #fff;
}
html>body>#menu a:hover .imgMenu {
border: 1px solid #fc0;
background-color: #ffc;
}

El toque final

Lo que resta hacer es insertar la imagen de ejemplo en la página HTML. Dentro de la etiqueta de IMG vamos a indicar que se usuará la clase imgMenu que definimos para todos los navegadores a excepción del IE. Para este último simplemente indicamos el cambio de colores para todo elemento de la etiqueta A

El código:

¡Listo! Ya tenemos nuestro botón con efectos añadidos mediante CSS. Ahora solamente hay que reemplazar el valor javascript del atributo HREF por la página a la cual enlazaremos y la imagen de ejemplo por la nuestra.

Ver el ejemplo en funcionamiento

Si alguien conoce alguna manera mejor de hacer esto o quiere compartir algún secreto adicional no tienen más que escribir un comentario.

¡Hasta la próxima!