ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

Cambiar el Cursor con CSS para Mejorar Experiencia de Usuario

13 febrero, 2019 por Pedro Mendez 2 comentarios

Tabla de Contenidos

  • Usando el cursor correcto en un elemento
  • Uso de un cursor personalizado para mejorar un elemento
  • Plugins para personalizar el cursor del ratón con WordPress

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.

Si quieres saber como subir archivos SVG en WordPress lo puedes ver aquí

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.

..Entradas Relacionadas

  • Los 4 Mejores Plugins para Personalizar el Cursor de WordPress
  • Como crear un Tema de WordPress desde una plantilla HTML
  • Como Cambiar el Color de los Botones en WooCommerce
  • 5 plugins editores de CSS gratis para la edición en vivo en WordPress
  • 11 Videojuegos Retro Creados con HTML5, JavaScript y CSS

Publicado en: Diseño, Wordpress Etiquetado como: css, cursor

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  1. juan dice

    12 enero, 2021 a las 7:45 PM

    Es clave, me encanta.

    Responder
    • Pedro Mendez dice

      15 enero, 2021 a las 12:52 PM

      Me alegro Juan 😉

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (511)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)