10.1 Propiedad cursor
CSS proporciona la habilidad de cambiar la apariencia del cursor al pasar sobre elementos usando la propiedad cursor.
Esta propiedad permite establecer diferentes tipos de cursores, mejorando la interactividad y atractivo visual de las páginas web.
La propiedad cursor define la apariencia del cursor del ratón cuando está sobre un elemento. Los valores pueden ser
predefinidos o imágenes personalizadas.
Sintaxis:
element {
cursor: value;
}
Valores:
La propiedad cursor soporta numerosos valores, que pueden dividirse en predefinidos y personalizados.
Valores predefinidos:
default: cursor por defectopointer: cursor en forma de mano, usualmente usado para enlacestext: cursor en forma de texto (forma de I), usualmente usado para campos de textomove: cursor para moverwait: cursor en forma de reloj de arena o indicador de esperahelp: cursor en forma de signo de interrogacióncrosshair: cursor en forma de miranot-allowed: cursor en forma de signo de prohibido (círculo tachado)grabygrabbing: cursores para arrastrar elementos
Ejemplo de uso de valores predefinidos:
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
<div class="default-cursor">Cursor por defecto</div>
<div class="pointer-cursor">Cursor de puntero</div>
<div class="text-cursor">Cursor de texto</div>
10.2 Valores personalizados (cursores personalizados)
La propiedad cursor también soporta el uso de imágenes personalizadas como cursores.
Para esto se usa el valor url.
Sintaxis:
element {
cursor: url("custom-cursor.png"), fallback;
}
Donde:
url('custom-cursor.png'): indica la ruta a la imagen del cursorfallback: valor predefinido que se usa si la imagen personalizada no puede ser cargada
Ejemplo de uso de cursores personalizados:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Cursor personalizado</div>
</body>
Especificaciones y limitaciones para cursores personalizados:
- Formatos de imagen: se soportan los formatos
.cur,.png,.jpg,.gif. - Tamaños de imagen: se recomienda usar imágenes de 32x32 píxeles o menores para mejor rendimiento y compatibilidad.
- Coordenadas del punto de clic: en la imagen del cursor se pueden establecer las coordenadas del punto de clic (hotspot). Por defecto es la esquina superior izquierda (0,0).
10.3 Detalles del uso de cursores personalizados
Formatos de imagen
Los cursores personalizados pueden estar en varios formatos, como PNG, GIF, JPG y SVG. Se recomienda usar formatos con soporte de transparencia (por ejemplo, PNG) para que el cursor se vea correctamente en cualquier fondo.
Tamaños de imagen
Las imágenes de cursores no deben ser demasiado grandes. Los tamaños recomendados son 32x32 píxeles o menores. Las imágenes grandes pueden no mostrarse correctamente en algunos navegadores.
Especificación de las coordenadas del foco
Se pueden especificar las coordenadas del foco (punto caliente) del cursor usando valores adicionales después de la URL de la imagen.
Sintaxis
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Donde:
xyy: coordenadas del foco relativo a la esquina superior izquierda de la imagen.
Ejemplo de uso con coordenadas del foco:
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor-focus">Cursor personalizado con foco</div>
</body>
Explicación del código:
.custom-cursor-focus: establece un cursor personalizado con coordenadas de foco (16, 16), que hace que el centro de la imagen sea el punto caliente
Aplicaciones prácticas:
- Mejora de UI/UX: el uso de cursores personalizados puede mejorar significativamente la interfaz de usuario, haciéndola más intuitiva y estéticamente agradable.
- Elementos interactivos: los cursores personalizados pueden aplicarse a elementos interactivos, como botones, enlaces, iconos, etc.
- Juegos y aplicaciones: en juegos y aplicaciones web, los cursores personalizados ayudan a crear un estilo y atmósfera únicos.
GO TO FULL VERSION