Cursor personalizado en CSS

10/Ene/2008 CSS 5 Comentarios

Mediante CSS podemos modificar el comportamiento del cursor. De una forma básica mediante las las opciones básicas que nos ofrece CSS para cursores o bien indicando un cursor personalizado.

Lo primero para crear un cursor personalizado en CSS será hacernos con un cursor. Estos archivos tienen la extensión .cur. Si bien, la especificación CSS no entra a especificar el formato del cursor. Incluso indica que podría ser un formato SVG.

Una vez que tengamos el cursor en una URL accesible desde la página, procedemos a personalizar el cursor en nuestra página.

Para ello tendremos que utilizar la propiedad cursor y como valor, mediante la función url(), indicarle la URL donde está el cursor.

  1. cursor:url("micursor.cur");

Esta propiedad se la podremos asignar al elemento de la página donde queremos que aparezca el cursor. Puede ser sobre un enlace (A), sobre toda la página (BODY),... En el caso de que sea sobre toda la página, el código sería el siguiente:

  1. <style type="text/css">
  2. body{
  3. cursor:url("micursor.cur");
  4. }
  5. </style>

Después del cursor es una buena práctica el que se indique un cursor de los básicos, para que, en caso de haber problemas con la carga del cursor personalizado, pueda aparecer un cursor.

  1. <style type="text/css">
  2. body{
  3. cursor:url("micursor.cur"),crosshair;
  4. }
  5. </style>

En este caso hemos indicado el cursor "crosshair" por defecto.

Algunos navegadores no cargar en cursor personalizado si no se ha indicado el cursor por defecto. Así que es bueno seguir esta práctica.

Ya tenemos todo el código necesario para tener un cursor personalizado en CSS.

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 comentarios en “Cursor personalizado en CSS”

Víctor Cuervo

andres

Víctor Cuervo

Daniel

Para editar cursores se puede usar el AniFX.

Víctor Cuervo

charlie

comop puedo convertir mi imagen en .cur? hay algún lugar en internet que sea free o debo instalar algun programa en mi ordenador?
he puesto codigos para hacerlo que he encontrado en javascript.com.mx, pero no se ve, unicamente el recueadro con la x, pero la imagen si la tengo guardada en la carpeta correcta.
Gracias!

Víctor Cuervo

lineadecodigo

@anibal,

Poniendo el código

<style type=”text/css”>
body{
cursor:url(“micursor.cur”),crosshair;
}
</style>

Dentro del HEAD de tu página te valdría. Tienes que asegurarte que el fichero micursor.cur está en el mismo directorio que la página en la cual pones el código.

Víctor Cuervo

anibal

no comprendo nada me gustaria ponerle un cursor perzonalisado ami blog http://detodoyalgomas.hazblog.com/ mi correo es anibalzapatarivera@live.com

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*