Requerimientos de este tutorial:
Flash (cualquier versión) o un editor de imágenes con soporte de gifs animados
Un navegador que soporte backgrounds animados (Firefox, Mozilla, IE6, Safari presenta sólo la primera frame)
Un editor de texto o html (Dreamweaver, Notepad, BBEdit, lo que sea)
Antes que nada, unas palabras de precaución: no estoy muy bien versado en cuestiones de Cascading Style Sheets. Mis conocimientos son todavía muy básicos. Si cometo algún error garrafal, no duden en destrozarme en los comentarios.
Ahora, más palabras de precaución: es muy fácil abusar de este tipo de hacks. Recuerdan el tag de blink? Ante la duda, opten por lo sutil
Aquí hay un ejemplo de cómo no se debe de utilizar:
Ya advertido esto, pongamos manos a la obra.
Hay muchas maneras de hacer un gif animado, yo utilice Fireworks pero puedes utilizar cualquier otro programa que te plazca. Photoshop no soporta gifs animados, pero Imageready sí. Si tienes una Mac y no tienes estos programas, baja el Graphic Converter, de por si es una herramienta que no debe de faltar en una Mac, seas diseñador o no. No sé de programas gratuitos para PC, ojalá alguien pueda recomendar alguno, seguramente existen. también puedes utilizar Flash y exportar como gif animado
Para este tutorial vamos a utilizar Flash porque muchísima gente lo tiene instalado, y si no lo tienes instalado, puedes bajar el demo de 30 días sin restricciones.
Lo primero que hay que hacer es cambiar los parámetros del documento conforme lo muestra esta captura de pantalla:
El tamaño va a ser de 10 x 10 pixeles, y el Frame Rate de 30. El Frame Rate es la cantidad de cuadros por segundo que va a tener nuestro gif. Es importante que sean 30, de esta manera el efecto se ve fluído. Si utilizamos el default de 12 frames por segundo el efecto se va a ver cortado.
Posteriormente hacemos Zoom al 400% (para ver nuestro documento mejor), seleccionamos la herramienta de recuadro, quitamos el color del stroke y ponemos el color de relleno que queramos para el link. Luego hacemos un cuadro que exceda ligeramente las dimensiones de nuestro stage, como lo indica esta captura de pantalla:
En este caso yo utilicé un color naranja, pero puede ser cualquiera. Deben de tomar en cuenta el color del texto que van a elegir para los links en a:hover, si va a ser un color claro, el fondo debe de ser obscuro, si el texto va a ser obscuro, el fondo deberá de ser claro
Después deben de convertir el recuadro en un símbolo (F9) y metan las keyframes como sigue (se asumen conocimientos básicos de Flash):
Importante: Usen el modificador de Tint con el color de fondo que tengan en su página, en mi caso yo utilizo blanco, por lo tanto el color del tinte es blanco. La opción lógica de alpha no se debe de usar porque al exportarlo como gif, flash no toma en cuenta el alpha y vamos a tener un gif aparentemente estático.
La primera parte que no tiene un motion tween se debe a que en este caso quería que el gif animado tuviera una pequeña pausa. Nada de esto es obligatorio, cambien las keyframes de lugar y pruébenlo con Manzana (PC: alt) Enter.
Ya casi acabamos con el gif animado. Lo último es exportar como gif. Menú File->Export Movie->Opción de Animated Gif->Save y luego ocupen estos parámetros:
Indispensable: La repetición del gif deberá de estar en 0 para que se repita indefinidamente. Si hacemos que se repita menos veces, el efecto funcionará sólo una vez en toda la página
Veamos cómo quedó nuestro gif animado:
Perfecto, eso es todo con el gif animado, pasamos al código
Si sabes un poco de CSS, vas a entender esto inmediatamente:
a {
text-decoration: underline;
white-space: nowrap;
color: #F60;
}
a:link {color: #F60;}
a:visited {color: #F90;}
a:hover {color: #FFF; background: url(nombre.gif); text-decoration: none; }
a:active {color: #F60;}
La propiedad de white-space: nowrap se utiliza para que no se corte el link en dos renglones, y es opcional. Yo prefiero ponerle nowrap proque no me gusta como se ve en dos renglones.
Como pueden ver, es un método completamente acorde con los estándares web, no es un hack ni nada por el estilo. El único problema es que no todos los navegadores despliegan gifs animados en el background. En ese caso, el navegador utiliza la primera frame del gif animado, lo cual explica porqué empezamos con el color "fuerte" y no con el claro.
No tiene problemas de uso, lo puedes utilizar en links de cualquier tamaño:
PruebaCon un poco de creatividad y listas podrías armar una navegación:
Si tienes alguna duda, crítica o corrección déjala en los comentarios