Generador de Cursor CSS
Una herramienta para generar y previsualizar estilos de cursor CSS2, CSS3 y cursores personalizados.
Cursores CSS2Soporte Universal
auto
Haz clic para copiar
inherit
Haz clic para copiar
crosshair
Haz clic para copiar
default
Haz clic para copiar
help
Haz clic para copiar
move
Haz clic para copiar
pointer
Haz clic para copiar
progress
Haz clic para copiar
text
Haz clic para copiar
wait
Haz clic para copiar
e-resize
Haz clic para copiar
ne-resize
Haz clic para copiar
nw-resize
Haz clic para copiar
n-resize
Haz clic para copiar
se-resize
Haz clic para copiar
sw-resize
Haz clic para copiar
s-resize
Haz clic para copiar
w-resize
Haz clic para copiar
Cursores CSS3Navegadores Modernos
none
not IE, Safari, Opera
Haz clic para copiar
context-menu
not Firefox, Chrome
Haz clic para copiar
cell
not Safari
Haz clic para copiar
vertical-text
Haz clic para copiar
alias
not Safari
Haz clic para copiar
copy
not Safari
Haz clic para copiar
no-drop
Haz clic para copiar
not-allowed
Haz clic para copiar
ew-resize
Haz clic para copiar
ns-resize
Haz clic para copiar
nesw-resize
Haz clic para copiar
nwse-resize
Haz clic para copiar
col-resize
Haz clic para copiar
row-resize
Haz clic para copiar
all-scroll
Haz clic para copiar
grab
only Webkit and Firefox
Haz clic para copiar
grabbing
only Webkit and Firefox
Haz clic para copiar
zoom-in
only Webkit and Firefox
Haz clic para copiar
zoom-out
only Webkit and Firefox
Haz clic para copiar
Cursores PersonalizadosAvanzado
Cursores basados en URL
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
Formatos Soportados
.cur
.png
.jpg
.gif
Ejemplo de Uso
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Cursores basados en URL
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
Formatos Soportados
.cur
.png
.jpg
.gif
Ejemplo de Uso
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Consideraciones de Accesibilidad
- • Proporcionar señales visuales adicionales en lugar de depender únicamente de los cursores para expresar la funcionalidad
- • Usar cursores que sean visibles en modo de alto contraste
- • Usar cursores animados con moderación considerando la configuración de accesibilidad
- • Proporcionar indicadores de enfoque para usuarios de navegación por teclado
Optimización del Rendimiento
- • Precargar imágenes de cursor personalizadas para evitar retrasos
- • Usar sprites CSS para reducir las solicitudes HTTP
- • Evitar cambios de cursor innecesarios para mejorar el rendimiento
- • Considerar que los cursores personalizados no se muestran en entornos móviles