Crear cursores personalizados con CSS3

Hay muchas formas de personalizar una página para darle un toque especial respecto a las de la competencia. Uno de los elementos que tenemos la posibilidad de cambiar pero que la mayoría de las ocasiones obviamos es el puntero del ratón. Parece una tontería, pero puede quedar bastante bien utilizar un icono u otro dependiendo de la zona en la que nos encontremos de la web.

Por ejemplo, si estamos delante de una imagen y queremos indicar al usuario que la podemos aumentar, podríamos hacer que al entrar en ella, en vez de aparecer la típica fecha o la mano, apareciese una lupa o cualquier otro elemento.

Hacer esto hoy en día es muy sencillo gracias a las muchas propiedades que nos ofrece CSS3. En este caso, disponemos de la propiedad “cursor” al que le indicaremos la imagen que queremos utilizar para ello.
Veamos un ejemplo de cómo realizar el cambio del cursor mediante esta propiedad.


body {
cursor: url('mi-cursor.ico'), default;
}


En este caso le estamos indicando que dentro del body utilice siempre como cursor la imagen “mi-cursor.ico”. Si nos fijamos, también le indicamos un cursor por defecto, para que en caso de que fallase, se mostrase el que incorpora el navegador.

Al utilizar la propiedad “cursor”, también debemos tener en cuenta que dependiendo del navegador que utilicemos, la imagen se podrá ver de una u otra forma. Así, en el caso de Firefox, tiende a ajustar la imagen a un tamaño más pequeño que por ejemplo en el caso del navegador Chrome.

También hay que tener en cuenta, que si lo vamos a utilizar en nuestros proyectos, al utilizar técnicas basadas en CSS3, los navegadores más antiguos no reconocerán esta propiedad.
COMPARTE ESTA NOTICIA

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +