JMiur [E]

Alguna vez escribí algo sobre el uso de GIFs animados como alternativa a los efectos onmousover sobre los enlaces. De hecho, uso algo de eso en el blog y no me avergüenzo ... demasiado verguenza

Ahora, en 3point Design veo una variante para hacer lo mismo con los menús.
.solapamenu li a, .solapamenu li a:visited {
background: transparent url(URL_imagenFija) center center repeat-x;
[... propiedades de color, bordes y fuentes ...]
}

.solapamenu li a:hover {
background: transparent url(URL_imagenAnimada) center center repeat-x;
[... propiedades de color y fuentes ...]
}



Todo lo que debemos hacer es establecer la propiedad background del enlace con una imagen de fondo fija para las solapas y cambiarla por una imagen animada usando el evento hover:
#main_nav a {
background: url(URL_imagenAnimada);
display: block;
width: 150px;
height: 150px;
}
#main_nav a:hover {
background-position: -150px 0;
}

7 comentarios:

MiriMiriChan  

Ohh que lindo efectooo!! >.< si mi blog no estubiera tan lleno de colores lo usaría... xD en el próximo cambio de plantilla! :D

Responder
JMiur  

Jajajaja. Perfecto :D

Responder
Alejandro H.  

Una nueva forma de acabar con los menu, echos en Flash. Que bien.

Responder
Protegon  

wow se ve genial, se puede utilizar solo con algunos enlaces, por ejemplo, en un post queremos decorar enlaces, entonces ya en la plantilla está preestablecido cierto valor, utilizamos algun tag especifico, y con ello ya algunos enlaces saldrán con esto tan curado ? :D

Gracias este blog es genial ;P

Responder
JMiur  

Puedes usar modelos así donde quieras, basta definir una clase CSS y colocarla antes de </b;skin>. Por ejemplo:

a.enlaceBrillo {... las propiedades ...}
a.enlaceBrillo:hover {... las propiedades ...}

Y luego colocas esa clase en el enlace que quieres que tenga el efecto:

<a class="enlaceBrillo" ........................ >

Responder
Protegon  

Muchas gracias JMiur, el enlace me gustó tanto que lo he linkeado desde mi blog con una nueva entrada.

Estaré revisando el blog de vagabundia, gracias por contestar mis dudas, buenas noches :p

Responder
Selena  

Estupendo el Blog! Saludos

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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