Uso de cursores con CSS

Con la propiedad cursor que veremos a continuación podemos cambiar el aspecto del cursor sobre ciertos elementos en nuestra web ; normalmente cuando visitamos un sitio web nuestro cursor toma la forma de una flecha; pero esta cambia al situarlos sobre ciertos elementos por ejemplo un input de tipo "text"; en donde toma la forma de edición de texto normalmente.

Cursores en la web con CSS

El uso de cursores personalizados en una aplicación web puede mejorar la experiencia del usuario final; en esta entrada veremos como usar los cursores provistos por CSS y cursores personalizados.

Para utilizar cursores ya predefinidos debemos de colocar el valor a la propiedad CSS que queramos; mientras que con el cursor personalizado debemos utilizar una imagen como valor, que representará el cursor.

Sintaxis básica de los cursores en CSS

Con CSS podemos establecer el tipo de cursor a utilizar usando la siguiente sintaxis:

/*donde 'cursor' es la propiedad y 'valor' es el valor*/
cursor: valor;

Cursores básicos en CSS

Aquí tenemos algunos ejemplos de cursores ya definidos por el sistema operativo o el navegador; puede que algunos de ellos no carguen; todo dependiendo del sistema operativo o el navegador que utilices; así que mucho cuidado al momento de escoger uno:

/*cursores por defecto*/
.alias           { cursor: alias; }
.auto            { cursor: auto; }
.cell            { cursor: cell; }
.copy            { cursor: copy; }
.context-menu    { cursor: context-menu; }
.crosshair       { cursor: crosshair; }
.default         { cursor: default; }
.help            { cursor: help; }
.move            { cursor: move; }
.none            { cursor: none; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.wait            { cursor: wait; }

.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }

.all-scroll      { cursor: all-scroll; }

.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }

.e-resize        { cursor: e-resize; }
.n-resize        { cursor: n-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }

.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

Cursores personalizados con CSS

Para establecer nuestros propios cursores (personalizados) basta con indicar la URL de la imagen que representará nuestro cursor; se pueden indicar varias URL para que CSS intente cargar varias imágenes; si la primera imagen del puntero no se carga (no existe el cursor por ejemplo) o no la soporta el navegador, se pasa a la siguiente imagen; veamos un ejemplo:

/*cursores personalizados*/
.pointer-custom { 
  cursor: url(pointer-custom.gif),
  url(pointer-custom.png), pointer 
}
pointer-custom 

Conclusiones

En conclusión es una opción más que tenemos para mejorar la experiencia del visitante en nuestra aplicación; pero tenga siempre en cuenta que el cursor a escoger no debería ser demasiado diferente a los ya estándares si deseas que su aplicación sea fácil de usar.