Crear un simple efecto rollover usando CSS
El efecto Rollover es quizá de esos efectos clásicos que uno aprende cuando empieza a usar HTML y Javascript. Para aquellos que no conocen en qué consiste les digo, el efecto trata de tener en principio dos imágenes, una es mostrada al principio del efecto, en un estado “normal” por así decirlo, después el mouse se acerca y la imagen cambia por otra que es cargada, de ese modo miles de sitios web muestran menús, opciones, botones de una forma diferente que no se podría hacer sólo con HTML.
En esta ocasión vamos a ver cómo crear el efecto rollover usando CSS, y una simple imagen, para que no tengamos que usar ni una coma de Javascript.
Entonces, ya sabemos lo que es un efecto rollover, ahora nos falta conocer que es un sprite. Un sprite es una imagen que está compuesta por estados o cambios de una figura, por ejemplo la siguiente:
La ventaja de usar estas imágenes en un diseño web es la posibilidad de usar una sola imagen, en vez de que se carguen dos, el uso inexistente de Javascript, y el uso de CSS, que hace que el efecto por lo tanto sea más rápido. Entonces comencemos:
Imagen
La imagen que vamos a utilizar en este tutorial la hice a base de un botón sencillo de apagado y encendido:
Pueden descargar la imagen y utilizarla para el tutorial. La imagen, como pueden ver está hecha de los dos botones que vamos a usar, la imagen tiene un ancho de 400px, lo que tenemos que hacer es tener la mitad de la imagen igual, es decir, los mismos espacios que hay del borde al botón azul deben ser los mismos espacios de la mitad de la imagen al botón rojo.
Entonces ahora si, vamos a empezar.
CSS
.boton {
display:block;
width:201px;
height:200px;
background:url(imagen.jpg);
}
.boton:hover {
background-position: top right !important;
}
Y este es el código, como saben, deben crear la etiqueta <style>, colocar el código y cerrarla con un </style>, todo esto dentro de la etiqueta <head>. El código es bastante sencillo, tengo dos estilos, son dos clases llamadas “.boton”, lo que hago es declarar que el elemento esté en bloque para que se pueda ajustar a la línea del documento; después específico las medidas del botón, que en este caso es de 200x200 pixeles, para poder esconder el botón rojo del sitio, por último agrego la imagen con un background.
El siguiente estilo sólo se activa cuando el mouse pase por encima del botón, lo que hará que el fondo, en este caso el botón, se mueva a la derecha, por lo que el botón rojo es el que va a aparecer.
HTML
Lo más lógico es usar la imagen que usamos como un botón, eso significa crear un link al cual le asignaremos una dirección y la clase que acabamos de crear, lo que quedaria así:
<a class="boton" href=”direccion web”></a>
Y con eso terminaríamos nuestro tutorial, debe resultarles como el siguiente(archivo, no demo). Cualquier duda no lo piensen y escríbanme un comentario.
Reviewed by Marcos Rivas Rojas
on
martes, julio 19, 2011
Rating:
