Cambiar el Cursor con CSS para Mejorar Experiencia de Usuario

Con CSS se puede controlar la apariencia de un cursor. Hay un montón de opciones disponibles que podemos incluir y las hemos cubierto bastante a fondo en este tutorial donde se incluyen todos los códigos.

Sin embargo, es fácil pasar por alto los cursores y su impacto en la experiencia del usuario de nuestros sitios. Si sabes algo de CSS sabes que la regla ::selection se puede utilizar para personalizar el color de fondo de las selecciones de texto. La personalización de los cursores es igual de fácil y añade ese toque extra de discreción cuando se usa correctamente.

En esta entrada vamos a ver dos formas para controlar el cursor con CSS y mejorar la experiencia del usuario.

Usando el cursor correcto en un elemento

Algunos cambios de cursor están incorporados en el User Agent Stylesheet. Mira los enlaces de < a > como ejemplo. Incluso si no hacemos nada más en nuestro CSS, los enlaces tendrán color: color: blue; y text-decoration: underline;. Ese es un indicador visual fiable de que se puede hacer clic en el texto con hipervínculo.

Los navegadores lo llevan un poco más lejos. Pasa el cursor sobre el enlace y el cursor cambiará de la flecha predeterminada a una mano con su dedo índice extendido, también conocido como puntero.

En algunas ocasiones, el comportamiento del cursor predeterminado del User Agent Stylesheet no lo corta. En estos casos, deberíamos cambiar el cursor a algo que refleje la interacción esperada del usuario en ese elemento.

Toma la función jQueryUI draggable( ). Podemos aplicar esto a un elemento y permitirá que un usuario haga clic y arrastre ese elemento alrededor de la ventana gráfica, pero el usuario nunca sabe si el cursor permanece en su estado predeterminado. Añadiendo el cursor: move; Al elemento ayudaría a resolver esto.

See the Pen
jQuery Draggable by Geoff Graham (@geoffgraham)
on CodePen.

Lo mismo es aplicable para cualquier tipo de escenarios, ya sea que se trate de entradas de formularios, imágenes o cualquier otra cosa que puedas imaginar. Siempre aproveche la oportunidad para hacer coincidir el cursor de un elemento con su comportamiento cuando la flecha predeterminada no es una pista suficiente. Aquí hay una demostración de todo lo que está disponible actualmente:

See the Pen
The Cursors! by Chris Coyier (@chriscoyier)
on CodePen.

Uso de un cursor personalizado para mejorar un elemento

¿Qué pasa con los cursores personalizados? Por ejemplo de una imagen de tu propia creación que toma el lugar de un cursor. Por supuesto que hacer esto es posible

Podemos apuntar la propiedad cursor a una imagen de la siguiente forma:

.module

{ cursor: url('nombre-imagen.png'), auto;

}

Este tipo de personalización es útil cuando se añade solo un toque de personalización, pero el usuario no lo espera. Por ejemplo, un formulario donde la respuesta a una pregunta corresponde a una emoción específica:

See the Pen
qZjwGe by Geoff Graham (@geoffgraham)
on CodePen.

Puedes ver que trabajar con emojis es un truco en sí mismo. Puedes copiar y pegar un emoji desde un sitio como este, luego pegarlo en un editor de texto y guardarlo como un PDF, que mas tarde puede abrirse en Illustrator. Desde ahí, puedes seleccionar la imagen, pegarla en Gimp o Photoshop y crear una imagen PNG con un fondo transparente. Y listo.

Para aquellos de vosotros que tengan curiosidad por incluir un archivo SVG, podemos decir que es posible. La propiedad cursor acepta archivos SVG sin ningún problema. Sin embargo, lamentablemente no es posible con un GIF animados.

See the Pen
QNgoQW by Geoff Graham (@geoffgraham)
on CodePen.

Por desgracia no hay cursores animados, a menos que hagas algo loco como ocultar el cursor ( cursor: none; ), rastrear la posición del mouse con JavaScript y mostrar algo completamente personalizado.

Como por ejemplo esto:

See the Pen
Animation following cursor by tamm (@tamm)
on CodePen.

Para WordPress puedes usar tres plugins gratuitos si no quieres meterte en jaleos innecesarios con el código.

Plugins para personalizar el cursor del ratón con WordPress

Cursor Trail

Pequeño plugin simple que añade un efecto de cursor al puntero del mouse. Incluye un toque divertido a tu sitio o solo durante las temporadas festivas.

Con este plugin puedes elegir:

• La imagen al final para mostrar lo que sigue al cursor (por defecto es una flecha del ratón).
• Ajuste la velocidad de desvanecimiento de la pista y la velocidad de visualización.
• Elige cuándo comenzar o dejar de mostrar el rastro del mouse (por ejemplo, solo durante una temporada de vacaciones).

En la carpeta del plugin, también hay un icono de San Valentín, cambia el pointer.png en la opción de imagen del cursor a Valentines.png y tendrás disponible el nuevo cursor.

Animated Mouse Cursor Trail

Hermoso cursor de ratón animado para tu sitio web de WordPress

• El PlugIn ocupa muy poco espacio en el hosting.
• No es necesario editar configuraciones o hacer otra cosa.
• Solo la activación del plugIn es suficiente para hacer los cambios para todo el sitio web

Beautify Cursor

Embellece el estilo de tu cursor en función de la gran variedad de iconos disponibles.
También puedes elegirlo para el enlace o el enfoque de entrada.