ENLACES CON EFECTOS

Este es el típico efecto que seguro que muchos habéis visto en multitud de sitios, consiste en que cuando el cursor se sitúa encima de un vínculo se crea un efecto en su parte posterior, a modo de animación con el objetivo de resaltar que es un vínculo. De esta forma se da un toque bastante especial a nuestro blog o web ya que podremos añadirle cualquier tipo de fondo animado. Si que es cierto que hay que ser muy riguroso a la hora de elegir este fondo ya que se aplicará a todos nuestros vínculos y si no somo capaces de hacer una buena elección puede ser que se dificulte la lectura en lugar de dar un toque original a nuestro sitio.

Crear el efecto es muy simple, por lo que podréis probar a hacerlo y en el caso de que no quede de vuestro agrado eliminarlo facilmente, sinceramente la parte mas complicada es buscar un fondo visualmente agradable, yo os mostraré un par de ejemplos que podréis aplicar para observar el resultado en vuestro sitio.

Aplicaremos el efecto de la siguiente manera:

Iremos a la plantilla de nuestra web o blog y buscaremos a:link { , una lineas mas abajo unas 8 lineas aproximadamente, dependiendo del código nos encontraremos con a:hover { justamente debajo de esta línea insertaremos una nueva linea de la siguiente forma:

background:url(URL.gif);


URL.gif hace referencia a la dirección de la imagen gif que queremos que aparezca como fondo en los vínculos. Podéis probar con estos 2 ejemplos y observar el resultado.

Ejemplo1 (Efecto estrellitas):

background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);

Ejemplo2 (Efecto corazones):



background:url(http://i229.photobucket.com/albums/ee233/cmp-stuff/animados/fondos/01_heatscolorfulls.gif);

Podéis añadirle cualquier gif de fondo unicamente modificando la dirección donde está ubicado el gif, espero que os guste.