toolsmoah

CSS-Cursor-Generator

Ein Werkzeug zum Generieren und Vorschau von CSS2-, CSS3-Cursorstilen und benutzerdefinierten Cursorn.

CSS2-CursorUniverselle Unterstützung

auto
Zum Kopieren klicken
inherit
Zum Kopieren klicken
crosshair
Zum Kopieren klicken
default
Zum Kopieren klicken
help
Zum Kopieren klicken
move
Zum Kopieren klicken
pointer
Zum Kopieren klicken
progress
Zum Kopieren klicken
text
Zum Kopieren klicken
wait
Zum Kopieren klicken
e-resize
Zum Kopieren klicken
ne-resize
Zum Kopieren klicken
nw-resize
Zum Kopieren klicken
n-resize
Zum Kopieren klicken
se-resize
Zum Kopieren klicken
sw-resize
Zum Kopieren klicken
s-resize
Zum Kopieren klicken
w-resize
Zum Kopieren klicken

CSS3-CursorModerne Browser

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

Benutzerdefinierte CursorFortgeschritten

URL-basierte Cursor

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

Unterstützte Formate

.cur
.png
.jpg
.gif

Anwendungsbeispiel

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

URL-basierte Cursor

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

Unterstützte Formate

.cur
.png
.jpg
.gif

Anwendungsbeispiel

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

Überlegungen zur Barrierefreiheit

  • • Stellen Sie zusätzliche visuelle Hinweise bereit, anstatt sich ausschließlich auf Cursor zu verlassen, um die Funktionalität auszudrücken
  • • Verwenden Sie Cursor, die im Hochkontrastmodus sichtbar sind
  • • Verwenden Sie animierte Cursor sparsam unter Berücksichtigung der Barrierefreiheitseinstellungen
  • • Stellen Sie Fokusindikatoren für Benutzer der Tastaturnavigation bereit

Leistungsoptimierung

  • • Laden Sie benutzerdefinierte Cursorbilder vor, um Verzögerungen zu vermeiden
  • • Verwenden Sie CSS-Sprites, um HTTP-Anfragen zu reduzieren
  • • Vermeiden Sie unnötige Cursoränderungen, um die Leistung zu verbessern
  • • Bedenken Sie, dass benutzerdefinierte Cursor in mobilen Umgebungen nicht angezeigt werden