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:
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>
17 comentarios:
Está genial.
Deacuerdo con Spamloco, esta muy bueno!
Coincido con SpamLoco y con Fabio. Muy bueno el menú. Solo una pregunta: Abra otros colores aparte del verde que se muestra aquí?
Genial y sencillo, también personalizable respecto a color e imagen :)
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 ^^
weno, mejor k cuando pones el puntero encima molaria k fuera cuando clikas .... xD
No funciona muy bien en internet explorer
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.
Muy vistoso! :D genial!
Excelente-
Saludos maestraso, dandome algo de time para leerte, te felcito este post esta bárbaro.
Saludos. Me algero que le interesara el tema. Es una linda idea, realmente.
Excelente!
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.
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
hola Jmiur, está fallando la imagen animada... remanentes de imageshack?
Buen fin de semana!
Una mezcla de remanentes de ImageShack y remanentes de Photobucket :-D
¿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 ...