CSS Cursor Generator
Een tool om CSS2, CSS3 cursorstijlen en aangepaste cursors te genereren en te bekijken.
CSS2 CursorsUniversele ondersteuning
auto
Klik om te kopiëren
inherit
Klik om te kopiëren
crosshair
Klik om te kopiëren
default
Klik om te kopiëren
help
Klik om te kopiëren
move
Klik om te kopiëren
pointer
Klik om te kopiëren
progress
Klik om te kopiëren
text
Klik om te kopiëren
wait
Klik om te kopiëren
e-resize
Klik om te kopiëren
ne-resize
Klik om te kopiëren
nw-resize
Klik om te kopiëren
n-resize
Klik om te kopiëren
se-resize
Klik om te kopiëren
sw-resize
Klik om te kopiëren
s-resize
Klik om te kopiëren
w-resize
Klik om te kopiëren
CSS3 CursorsModerne browsers
none
not IE, Safari, Opera
Klik om te kopiëren
context-menu
not Firefox, Chrome
Klik om te kopiëren
cell
not Safari
Klik om te kopiëren
vertical-text
Klik om te kopiëren
alias
not Safari
Klik om te kopiëren
copy
not Safari
Klik om te kopiëren
no-drop
Klik om te kopiëren
not-allowed
Klik om te kopiëren
ew-resize
Klik om te kopiëren
ns-resize
Klik om te kopiëren
nesw-resize
Klik om te kopiëren
nwse-resize
Klik om te kopiëren
col-resize
Klik om te kopiëren
row-resize
Klik om te kopiëren
all-scroll
Klik om te kopiëren
grab
only Webkit and Firefox
Klik om te kopiëren
grabbing
only Webkit and Firefox
Klik om te kopiëren
zoom-in
only Webkit and Firefox
Klik om te kopiëren
zoom-out
only Webkit and Firefox
Klik om te kopiëren
Aangepaste cursorsGeavanceerd
URL-gebaseerde cursors
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
Ondersteunde formaten
.cur
.png
.jpg
.gif
Voorbeeldgebruik
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
URL-gebaseerde cursors
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
Ondersteunde formaten
.cur
.png
.jpg
.gif
Voorbeeldgebruik
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Toegankelijkheidsoverwegingen
- • Geef aanvullende visuele aanwijzingen in plaats van uitsluitend te vertrouwen op cursors om functionaliteit uit te drukken
- • Gebruik cursors die zichtbaar zijn in de modus met hoog contrast
- • Gebruik geanimeerde cursors spaarzaam, rekening houdend met toegankelijkheidsinstellingen
- • Zorg voor focusindicatoren voor gebruikers van toetsenbordnavigatie
Prestatieoptimalisatie
- • Laad aangepaste cursorafbeeldingen vooraf om vertragingen te voorkomen
- • Gebruik CSS-sprites om HTTP-verzoeken te verminderen
- • Vermijd onnodige cursorwijzigingen om de prestaties te verbeteren
- • Houd er rekening mee dat aangepaste cursors niet worden weergegeven in mobiele omgevingen