toolsmoah

Générateur de curseur CSS

Un outil pour générer et prévisualiser les styles de curseur CSS2, CSS3 et les curseurs personnalisés.

Curseurs CSS2Support universel

auto
Cliquer pour copier
inherit
Cliquer pour copier
crosshair
Cliquer pour copier
default
Cliquer pour copier
help
Cliquer pour copier
move
Cliquer pour copier
pointer
Cliquer pour copier
progress
Cliquer pour copier
text
Cliquer pour copier
wait
Cliquer pour copier
e-resize
Cliquer pour copier
ne-resize
Cliquer pour copier
nw-resize
Cliquer pour copier
n-resize
Cliquer pour copier
se-resize
Cliquer pour copier
sw-resize
Cliquer pour copier
s-resize
Cliquer pour copier
w-resize
Cliquer pour copier

Curseurs CSS3Navigateurs modernes

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

Curseurs personnalisésAvancé

Curseurs basés sur l'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

Formats pris en charge

.cur
.png
.jpg
.gif

Exemple d'utilisation

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

Curseurs basés sur l'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

Formats pris en charge

.cur
.png
.jpg
.gif

Exemple d'utilisation

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

Considérations d'accessibilité

  • • Fournir des indices visuels supplémentaires au lieu de se fier uniquement aux curseurs pour exprimer la fonctionnalité
  • • Utiliser des curseurs visibles en mode contraste élevé
  • • Utiliser les curseurs animés avec parcimonie en tenant compte des paramètres d'accessibilité
  • • Fournir des indicateurs de focus pour les utilisateurs de la navigation au clavier

Optimisation des performances

  • • Précharger les images de curseur personnalisées pour éviter les retards
  • • Utiliser des sprites CSS pour réduire les requêtes HTTP
  • • Éviter les changements de curseur inutiles pour améliorer les performances
  • • Considérer que les curseurs personnalisés ne sont pas affichés dans les environnements mobiles