CSS puede controlar la apariencia de un cursor. Hay un montón de opciones disponibles para nosotros y las hemos cubierto bastante a fondo en el viejo Almanaque aquí en CSS-Tricks.
Aún así, es fácil pasar por alto los cursores y su impacto en la experiencia del usuario de nuestros sitios. Recuerda cuando aprendimos ::selection ¿Qué pasó y todos los sitios comenzaron a usarlo para personalizar el color de fondo de las selecciones de texto? Personalizar los cursores es igual de fácil y agrega un toque extra de estilo discreto cuando se usa correctamente.
En esta publicación, cubriré dos formas en las que creo que controlar el cursor en CSS puede mejorar la experiencia del usuario.
Usar el cursor correcto en un elemento
Algunos cambios de cursor están integrados en la hoja de estilo del agente de usuario. Mirar <a> enlaces como ejemplo. Incluso si no hacemos nada más en nuestro CSS, los enlaces tendrán color: blue; y text-decoration: underline;. Ese es un indicador visual sólido de que se puede hacer clic en el texto con hipervínculo.
Los navegadores lo llevan un poco más lejos. Coloca el cursor sobre el enlace y el cursor cambia de la flecha negra predeterminada a una mano con el dedo índice extendido, también conocido como puntero.
Hay ocasiones en las que el comportamiento predeterminado del cursor de la hoja de estilo del agente de usuario no es suficiente. En estos casos, debemos cambiar el cursor a algo que refleje la interacción esperada del usuario en ese elemento.
Toma el jQueryUI draggable() función. Podemos aplicar eso a un elemento y le permitirá al usuario hacer clic y arrastrar ese elemento alrededor de la ventana gráfica, pero el usuario nunca lo sabrá si el cursor permanece en su estado predeterminado. Añadiendo cursor: move; al elemento ayudaría a resolver eso.
Vea el Pen QNqMRp de Geoff Graham (@geoffgraham) en CodePen.
Lo mismo es cierto para cualquier número de escenarios, ya sea que estemos hablando de entradas de formulario, 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 sea una pista suficiente. Aquí hay una demostración de todo lo que está disponible actualmente:
Vea la pluma ¡Los cursores! por Chris Coyier (@chriscoyier) en CodePen.
Usar un cursor personalizado para mejorar un elemento
¿Qué pasa con los cursores personalizados, preguntas? Como en una imagen de su propia creación que toma el lugar de un cursor. ¡Por supuesto que es posible!
Podemos señalar el cursor propiedad a una imagen como esta:
.module {
cursor: url('path-to-image.png'), auto;
}Encuentro que esto es útil cuando se agrega un toque de personalización, pero es posible que el usuario no lo espere. Por ejemplo, un formulario donde la respuesta a una pregunta corresponde a una emoción específica:
Vea el Pen qZjwGe de Geoff Graham (@geoffgraham) en CodePen.
Encontré que trabajar con emoji es un truco en sí mismo. Puede copiar y pegar emoji de un sitio como este, luego pegarlo en un editor de texto y guardarlo como PDF, que luego se puede abrir en Illustrator. A partir de ahí, pude seleccionar la imagen, pegarla en Photoshop y crear una imagen PNG con un fondo transparente. ¡Auge!
Para aquellos de ustedes que tengan curiosidad sobre SVG, ¡me complace decirles que es una oportunidad! El cursor La propiedad acepta archivos SVG en todo su esplendor. Sin embargo, no hay GIF animados, lamentablemente.
Vea el Pen QNgoQW de Geoff Graham (@geoffgraham) en CodePen.
Entonces, lamentablemente, no hay cursores animados, a menos que haga algo loco como ocultar el cursor (cursor: none;), rastrea la posición del mouse con JavaScript y muestra algo completamente personalizado.
¡Um, así!
Vea la animación de lápiz que sigue al cursor por tamm (@tamm) en CodePen.
Otros ejemplos de la web
Es más difícil encontrar buenos ejemplos de cursores personalizados de lo que piensa. Tal vez no se use tan ampliamente como otras características de CSS o es algo que todavía estamos tratando de averiguar, pero aquí hay algunos sitios en los que se le ha dado un buen uso.
- Cartera de Denis Rouve
- Cursor emoji de los 90
- Cursor pegajoso
- Cursores de el Cairo
- jQuery Awesome Cursor
Lectura adicional
- Cursor en el Alamanac
- Usar valores de URL para la propiedad del cursor en MDN
- Módulo de interfaz de usuario básica CSS, nivel 3
- Demostración de todos los cursores disponibles