0
Gracias

Unas palabras de agradecimiento nunca están de más.

Cambiar el aspecto del cursor con CSS

La propiedad de CSS, cursor, permite cambiar el aspecto del cursor sobre uno de los elementos presentes en una página web y, por tanto, modificar el que aparece por defecto. De este modo, el cliente visualizará de manera automática el tipo de cursor que hayas elegido para tu sitio web. En este artículo te enseñamos cómo hacerlo.




Cómo cambiar el aspecto de tu cursor

Veamos en primer lugar un modelo de cómo pondríamos un cursor en forma de cruz en el cuerpo de una página:

body{ cursor:crosshair; }


Es posible dar diferentes estilos a varios elementos de la misma página. Por ejemplo, una cruz. O, como hemos visto antes para el cuerpo, un cursor en forma de reloj de arena para las imágenes y una mano para los enlaces:

body{ cursor: crosshair; } img{ cursor: wait; } a:link{ cursor: pointer; }


También es posible asignar un cursor personalizado a una página. Para ello, solo hay que poner en el código CSS la etiqueta deseada y acceder a la carpeta en la cual se encuentra tu cursor:

cursor: url(tu_cursor_personalizado.cur'), pointer;


Existen muchos programas capaces de crear cursores personalizados, pero te recomendamos partir de aquellos que están ya hechos y modificarlos a tu gusto. Eso sí, siempre teniendo cuidado de hacer una copia de seguridad antes de comenzar (en Windows, ello puede hacerse en C:windowscursors).

Algunos ejemplos de estos programas son: CursorFX, IconArt y ArtCursors.

Nota: El tamaño de los cursores no debe superar 32x32 px.

Lista de atributos posibles de esta propiedad

Aceptados por todos los navegadores

  • auto: Aspecto idéntico al del cursor predeterminado en la etiqueta que posee el atributo, no cambia nada.

  • default: Cursor predeterminado del navegador.
  • pointer: Cursor en forma de mano.
  • text: Cursor de edición de texto.
  • help: Cursor de ayuda.
  • wait: Cursor de espera.
  • progress: Cursor de progresión.
  • move: Cursor de desplazamiento.
  • crosshair: Cursor en forma de cruz.

Cursores de redimensionamiento

  • n-resize: Flecha apuntando hacia el norte o hacia arriba.
  • s-resize: Flecha apuntando al sur o hacia abajo.
  • e-resize: Flecha apuntando a la derecha.
  • w-resize: Flecha apuntando a la izquierda.
  • ne-resize: Flecha apuntando al noreste.
  • nw-resize: Flecha apuntando al noroeste.
  • se-resize: Flecha apuntando al sudeste.
  • sw-resize: Flecha apuntando al sudoeste.

No aceptado por todos los navegadores

Firefox y Opera, entre otros, ignoran estas directivas:

  • inherit: Cursor similar al de la etiqueta de la misma familia.

  • not-allowed: Cursor circular con una barra diagonal.

  • no-drop: Cursor en forma de mano con los dedos extendidos y un círculo con una barra diagonal.

  • col-resize: Cursor compuesto de una línea vertical con una flecha en cada extremo.

  • row-resize: Cursor compuesto de una línea horizontal con una flecha en cada extremo.



Foto: © Unsplash
0
Gracias

Unas palabras de agradecimiento nunca están de más.

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net y director digital en el Grupo Figaro. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.
El documento « Cambiar el aspecto del cursor con CSS » se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.

0 Comentario