Hoy he aprendido algo nuevo (¡guau!) mientras navegaba por una página que tenía unos logotipos bastante majos que se “iluminaban” cuando pasabas el ratón sobre ellos. Tenía ganas de ver cómo funcionaba así que he estado mirando el código de su página y su css para entenderlo.
Donde lo encontré parecía estar generado con un plugin y, como prefería saber como controlarlo y hacer mis propios botones, he investigado un poco más. Al final he encontrado una buena explicación de cómo hacerlo (yo he seguido su manual) en el blog randomnessf1.
El truco está en definir una zona donde utilizaremos un fondo mediante css [con la propiedad background: url(ejemplo.png);]. Esta imagen de fondo tendrá las dos partes del botón, iluminado y sin iluminar, como dos frames de una animación. Cuando pasemos el ratón sobre su zona, cambiaremos las coordenadas de la imagen de fondo, lo que provocará que se muestre el otro “frame”, dando la ilusión de que la imagen ha cambiado. Ejemplo:
Actualizado: la imagen de ejemplo ya no está en esta web.
Pasa el ratón sobre la imagen para comprobar el efecto.
En el código de la web únicamente tenemos que identificar el elemento mediante una clase y un id, como en este ejemplo:
<a id="fb_icon" class="trick" title="FeedBurner!" href="http://www.feedburner.com"></a>En nuestra hoja de estilos css, identificaremos la clase y el elemento mediante estas etiquetas:
.trick { overflow: hidden; display:block; float: left; } #fb_icon { background: url(images/feedburner.png); } a#fb_icon { background-position: -47px 0px; height: 35px; width: 40px; } a:hover#fb_icon { background-position: 0px 0px; }
Lo que nos interesa es cambiar las coordenadas de background-position dependiendo del momento (cuando tenemos el ratón encima o fuera). Hay que tener en cuenta cuál de los dos frames tengamos primero en la ilustración, claro, si el iluminado o el sin iluminar. Dependiendo de la opción, modificaremos las coordenadas en hover o en el estado normal.
Etiquetas: Css, desarrollo web
Nota: Lo curioso es que el mini tutorial del blog randomness es de hace apenas unos dias, pero una busqueda en google sobre este tema ya lo referenciaba…
Funciona correctamente en IE7, Firefox 3 sobre Windows y Firefox 3 sobre Linux (Ubuntu). No he probado otros navegadores o versiones.
Recién veo esto. Me alegra que te funcionara.
Es un truco sencillo y fácil.
La referencia aparecía desde antes porque sin querer lo publiqué sin haberlo terminado.
Así pasa…
Un saludo.
Oh…y me olvidaba. En realidad para el caso tuyo de los íconos de arriba, sólo hubieras aplicado la propiedad de opacidad y el filtro para IE.
#fb_icon{
opacity: 0.7; /*FF and other browsers*/
filter:alpha(opacity=70); /*IE*/
}
#fb_icon:hover{
opacity: 1;
filter:alpha(opacity=100);
}
Muchas gracias por los comentarios!!
Aun tengo el blog en mitad de su diseño, pero ya he empezado a escribir contenidos
y la explicacion de como hacer esto me ha sido muy util 
Me apunto tambien lo del comentario sobre opacidad y el filtro IE, aunque no suelo ser muy partidario de soluciones concretas para distintos navegadores si hay alguna que permita hacerlo generico
Bueno, eso último que dices es también muy cierto. Igualmente se podría poner en condicionales y listo.
En fin, me alegra que te haya servido lo explicado.
Un saludo.