JMiur [E]

Los efectos rollover nos permiten cambiar el formato de un vínculo cuando pasamos el cursor del ratón sobre ellos son muy conocidos:


Normalmente, se modifica el color, la fuente, se agregan o eliminan subrayados pero, sin embargo, las posibilidades no se agotan ahí ¿qué pasa si al efecto le agregamos una imagen?

BloggerGoogleVagabundia

Hacerlo es bastante simple, sólo necesitamos crear un GIF animado, en este caso, unos pocos frames de colores planos:


y luego, simplemente creamos una clase CSS que agregamos a la hoja de estilo, por ejemplo:
a.colores {
text-decoration: none;
font-weight: bold;
font-family: Georgia;
}

a.colores:link, a.colores:visited {
text-decoration:none;
font-size:26px;
color:#FF0000;
background-image: none;
}

a.colores:active, a.colores:hover {
background-image:url('URL_imagen');
color:#FF9933;
}
Que utilizaremos de la siguiente manera:

<a class="colores" href="URL">Vínculo</a>

6 comentarios:

Eduardo Perezchica  

wow! se ve muy bueno el efecto!
quizá lo pruebe en mi blog.

Muy útiles tus consejos, nos vemos.

Responder
JMiur  

Gracias Eduardo, espero verlo implementado pronto :)

Responder
Gem@  

Supongamos que en vez de añadir un texto en enlace añadimos una imagen tipo botón, entonces el efecto que muestra es para el fondo. ¿Es así?

Responder
JMiur  

En principio, si. Todo dependerá de ambas imágenes y de que la "interior" (el texto o botón) sea más pequeña que el fondo, claro.

Responder
YTQE  

Hola!, una consulta.. en que parte del código debo agregar la clase de CSS que pones?, saludos.

Responder
JMiur  

Lo más sencillo es ponerlo antes de </b:skin>

Sino, puedes colocarlo antes de </head> entre etiquetas STYLE:

<style>
................. las propiedades
</style>

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR