Guía de cursores personalizados en CSS: valores y ejemplos prácticos

En CSS, la propiedad cursor permite modificar la apariencia del puntero del ratón al situarlo sobre elementos interactivos de una página web, ofreciendo una retroalimentación visual clara al usuario y mejorando la usabilidad. Este artículo, publicado el 19 de julio de 2023 por Andrea Lluch Cruz en el sitio Eniun, explica de forma detallada cómo utilizar esta propiedad y presenta una amplia variedad de valores estándar disponibles.

Entre los cursores más comunes se encuentran ‘pointer’ para indicar elementos clicables, ‘text’ para zonas seleccionables de texto, ‘wait’ o ‘progress’ para mostrar que el sistema está ocupado, y ‘not-allowed’ para denegar acciones. También se incluyen opciones más específicas como ‘crosshair’ para precisión, ‘move’ y ‘grab’/’grabbing’ para interfaces de arrastrar y soltar, cursores de redimensionamiento (‘ew-resize’, ‘ns-resize’, ‘nesw-resize’, etc.) útiles en editores o tablas, y efectos de zoom (‘zoom-in’, ‘zoom-out’). Otros valores interesantes son ‘help’, ‘alias’, ‘copy’, ‘no-drop’ o ‘context-menu’.

El texto incluye una tabla descriptiva con más de 20 valores junto a su función principal, y menciona la posibilidad de usar cursores personalizados mediante imágenes. Además, se destaca un ejemplo interactivo donde el usuario puede pasar el ratón por diferentes contenedores para ver en tiempo real el cambio de cursor. Se advierte sobre posibles diferencias de compatibilidad entre navegadores y la importancia de consultar la especificación oficial de CSS y la documentación de cada navegador para detalles avanzados.

Este contenido forma parte de la sección de CSS nivel intermedio y resulta especialmente útil para desarrolladores web y diseñadores que buscan mejorar la experiencia de usuario mediante detalles visuales sutiles pero efectivos.