In Blog

Crear efectos para imágenes con CSS

Escrito el 07.06.2005 por Sebastián Thüer 16 Comments

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!

    • jonathan

      Muy bueno me encanto , saludos

    • http://nada q ti

      este sitio deberia traer mas codigos

    • julio

      interesante, ¿puedo usarlo en mi Web?

    • http://www.thuer.com.ar Seba Thüer

      ¡Claro, ningún problema! Suerte con tu sitio ;-)

    • Carlos Javier

      Hola Seba:

      Cacharreando en mi blog y tratando de aprender un poco más a diario, me metí una idea entre ceja y ceja, cual fue la de crear un menú con función rollover. Ya lo estuve intentando con CSS, pero pasa que lo que yo quiero es a la larga cambiar literalmente una imagen por otra cuando se pose el mouse sobre la primera de ellas…pero no he podido lograrlo. No se si haya una función en CSS que en lugar de modificar el background me permita sobreponer un objeto al original…de esa forma creo que podría resolverlo. Ojalá pueda ayudarme.

    • aldo

      a ver si esto se puede, yo quiero lograr con CSS que al pasar por encima del vinculo se me cambie la imagen que esta en la cabecera de mi web.

      gracias

    • cristian

      muy buen ejemplo

    • fernin

      El ejemplo ya no carga y es lo primero que solemos ver los diseñadores para ver si realmente nos hace falta o nos vendría bien en la web.
      Además ya sabes que google penaliza los enlaces muertos, si quieres posicionar la web esto lo tendrán en cuenta el robot de google.

      Saludos.

    • http://www.thuer.com.ar Sebastián Thüer

      @fernin: Gracias por avisar, ya está arreglado ;)

    • http://www.infogchu.com.ar infogchu

      muchas gracias

    • http://globopop.com javiera

      no entendi nada pero igual gracias

    • http://guilletube.com Juan

      Gracias por el aporte lo entiendo. Muy esencial para dar efectos a los enlaces.

    • http://phpnuke-espanol.net Juan

      bueno esta bien el ejemplo, al final da resultado tu aporte un saludo

    • http://weycl.com luis

      Bueno muy concreto tu aporte lo probare en mi web.

    • imprentas en cordoba

      gracias por la informacion!!!!

    • Jonathan

      me gustaria que explique con mayores fundamentos saludos

    Pin It on Pinterest