toolsmoah

Generatore di cursori CSS

Uno strumento per generare e visualizzare in anteprima stili di cursore CSS2, CSS3 e cursori personalizzati.

Cursor CSS2Supporto universale

auto
Clicca per copiare
inherit
Clicca per copiare
crosshair
Clicca per copiare
default
Clicca per copiare
help
Clicca per copiare
move
Clicca per copiare
pointer
Clicca per copiare
progress
Clicca per copiare
text
Clicca per copiare
wait
Clicca per copiare
e-resize
Clicca per copiare
ne-resize
Clicca per copiare
nw-resize
Clicca per copiare
n-resize
Clicca per copiare
se-resize
Clicca per copiare
sw-resize
Clicca per copiare
s-resize
Clicca per copiare
w-resize
Clicca per copiare

Cursor CSS3Browser moderni

none
not IE, Safari, Opera
Clicca per copiare
context-menu
not Firefox, Chrome
Clicca per copiare
cell
not Safari
Clicca per copiare
vertical-text
Clicca per copiare
alias
not Safari
Clicca per copiare
copy
not Safari
Clicca per copiare
no-drop
Clicca per copiare
not-allowed
Clicca per copiare
ew-resize
Clicca per copiare
ns-resize
Clicca per copiare
nesw-resize
Clicca per copiare
nwse-resize
Clicca per copiare
col-resize
Clicca per copiare
row-resize
Clicca per copiare
all-scroll
Clicca per copiare
grab
only Webkit and Firefox
Clicca per copiare
grabbing
only Webkit and Firefox
Clicca per copiare
zoom-in
only Webkit and Firefox
Clicca per copiare
zoom-out
only Webkit and Firefox
Clicca per copiare

Cursor personalizzatiAvanzato

Cursor basati su 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

Formati supportati

.cur
.png
.jpg
.gif

Esempio di utilizzo

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

Cursor basati su 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

Formati supportati

.cur
.png
.jpg
.gif

Esempio di utilizzo

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

Considerazioni sull'accessibilità

  • • Fornire segnali visivi aggiuntivi invece di affidarsi esclusivamente ai cursori per esprimere la funzionalità
  • • Utilizzare cursori visibili in modalità a contrasto elevato
  • • Utilizzare cursori animati con parsimonia considerando le impostazioni di accessibilità
  • • Fornire indicatori di messa a fuoco per gli utenti con navigazione da tastiera

Ottimizzazione delle prestazioni

  • • Precaricare le immagini del cursore personalizzato per prevenire ritardi
  • • Utilizzare sprite CSS per ridurre le richieste HTTP
  • • Evitare modifiche inutili del cursore per migliorare le prestazioni
  • • Considerare che i cursori personalizzati non vengono visualizzati negli ambienti mobili
    Generatore di cursori CSS | toolsmoah