JMiur [E]

Flashy Links es un experimento original para crear enlaces animados utilizando GIFs y CSS.

Sólo necesitamos dos imágenes, la inicial (cfl_link_on.gif) y la animación (cfl_linkback.gif).

El código CSS lo ponemos antes de </b:skin> y sería el siguiente:
ul#cfl-menu { /* será un menú en una lista */
margin: 15px auto;
width: 200px;
}

ul#cfl-menu a { /* los enlaces del menú */
background: #669933 url(URL_cfl_link.gif);
color: #FFF;
cursor: pointer;
display: block;
font-weight: bold;
height: auto;
margin-bottom: 4px;
padding: 6px 30px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 140px;
}

ul#cfl-menu li { /* cada item de la lista */
list-style-type: none;
margin-bottom: 4px;
}

ul#cfl-menu a:hover, ul#cfl-menu a:focus, ul#cfl-menu a:active { /* el efecto de animación */
background: #669900 url(URL_cfl_linkback.gif);
color: yellow;
letter-spacing: 0.3em;
}
Y este es el código HTML:
<ul id="cfl-menu">
<li><a href="URL_enlace">Inicio</a></li>
<li><a href="URL_enlace">Página 1</a></li>
<li><a href="URL_enlace">Página 2</a></li>
<li><a href="URL_enlace">Página 3</a></li>
<li><a href="URL_enlace">Página 4</a></li>
</ul>

18 comentarios:

Anónimo  

Está genial.

Responder
Fabio Salinas  

Deacuerdo con Spamloco, esta muy bueno!

Responder
Jorge Ruiz  

Coincido con SpamLoco y con Fabio. Muy bueno el menú. Solo una pregunta: Abra otros colores aparte del verde que se muestra aquí?

Responder
Gem@  

Genial y sencillo, también personalizable respecto a color e imagen :)

Responder
Zinyck  

muy bueno. mi duda es la siguiente (he buscado por tu web y la de gema pero no encuentro nada..)
Como hacer que cuando pones el puntero encima en vez de cambiar de imagen presente más texto.
Básicamente que se convierta en un menú desplegable o algo asi... es posible con css?
Muchas gracias ^^

Responder
Zinyck  

weno, mejor k cuando pones el puntero encima molaria k fuera cuando clikas .... xD

Responder
Anónimo  

No funciona muy bien en internet explorer

Responder
JMiur  

A mi también me ha gustado la idea. La técnica es la normal pero le ha sacado provecho.

єι_мαиcнєɠσ:
Sí. Puede usarse cualquier imagen y color, no lo he cambiado para el ejemplo porque realmente lo han diseñado tan bien que me daba pena modificarlo pero puedes creae cualquier otro diseño gráfico.

Kira:
El CSS sólo controla las propeidades de las cosas y noel contenido. No sé muy bien que quieres hacer o si tienes algún ejmplo que hayas visto en alguna parte pero, para algo así necesitas usar JavaScript.

Responder
MiriMiriChan  

Muy vistoso! :D genial!

Responder
Anónimo  

Excelente-

Responder
Unknown  

Me ha gustado bastante!
Estoy pensando en cambiarlo por el que tengo...
Saludos!

Responder
Anónimo  

Saludos maestraso, dandome algo de time para leerte, te felcito este post esta bárbaro.

Responder
JMiur  

Saludos. Me algero que le interesara el tema. Es una linda idea, realmente.

Responder
Anónimo  

Excelente!

Responder
Unknown  

Hola me ha gustado mucho el menu y ya lo puse con otras imagenes y ha quedado muy bien.
Pero me gustaria saber como hacer para poner dos menus distintos (cada uno con imagenes distintas) como tendria que hacer? que tendria que cambiar como para que el "nuevo menu" tenga otras imagenes.
Desde ya muchas gracias.

Responder
JMiur  

Repetir lo que has hecho pero, cambiarle el nombre al ID, por ejemplo, en lugar de llamarlo id="cfl-menu", llamarlo id="otro-menu" y haver lo mismo con todo el CSS, en lugar de #cfl-menu poner #otro-menu

Responder
Proyecto BiBliOpEquE  

hola Jmiur, está fallando la imagen animada... remanentes de imageshack?

Buen fin de semana!

Responder
JMiur  

Una mezcla de remanentes de ImageShack y remanentes de Photobucket :-D

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