Generator kursorów CSS
Narzędzie do generowania i podglądu stylów kursorów CSS2, CSS3 i niestandardowych kursorów.
Kursory CSS2Uniwersalne wsparcie
auto
Kliknij, aby skopiować
inherit
Kliknij, aby skopiować
crosshair
Kliknij, aby skopiować
default
Kliknij, aby skopiować
help
Kliknij, aby skopiować
move
Kliknij, aby skopiować
pointer
Kliknij, aby skopiować
progress
Kliknij, aby skopiować
text
Kliknij, aby skopiować
wait
Kliknij, aby skopiować
e-resize
Kliknij, aby skopiować
ne-resize
Kliknij, aby skopiować
nw-resize
Kliknij, aby skopiować
n-resize
Kliknij, aby skopiować
se-resize
Kliknij, aby skopiować
sw-resize
Kliknij, aby skopiować
s-resize
Kliknij, aby skopiować
w-resize
Kliknij, aby skopiować
Kursory CSS3Nowoczesne przeglądarki
none
not IE, Safari, Opera
Kliknij, aby skopiować
context-menu
not Firefox, Chrome
Kliknij, aby skopiować
cell
not Safari
Kliknij, aby skopiować
vertical-text
Kliknij, aby skopiować
alias
not Safari
Kliknij, aby skopiować
copy
not Safari
Kliknij, aby skopiować
no-drop
Kliknij, aby skopiować
not-allowed
Kliknij, aby skopiować
ew-resize
Kliknij, aby skopiować
ns-resize
Kliknij, aby skopiować
nesw-resize
Kliknij, aby skopiować
nwse-resize
Kliknij, aby skopiować
col-resize
Kliknij, aby skopiować
row-resize
Kliknij, aby skopiować
all-scroll
Kliknij, aby skopiować
grab
only Webkit and Firefox
Kliknij, aby skopiować
grabbing
only Webkit and Firefox
Kliknij, aby skopiować
zoom-in
only Webkit and Firefox
Kliknij, aby skopiować
zoom-out
only Webkit and Firefox
Kliknij, aby skopiować
Niestandardowe kursoryZaawansowane
Kursory oparte na adresach 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
Obsługiwane formaty
.cur
.png
.jpg
.gif
Przykładowe użycie
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Kursory oparte na adresach 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
Obsługiwane formaty
.cur
.png
.jpg
.gif
Przykładowe użycie
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Kwestie dostępności
- • Zapewnij dodatkowe wskazówki wizualne zamiast polegać wyłącznie na kursorach do wyrażania funkcjonalności
- • Używaj kursorów widocznych w trybie wysokiego kontrastu
- • Używaj animowanych kursorów oszczędnie, biorąc pod uwagę ustawienia dostępności
- • Zapewnij wskaźniki ostrości dla użytkowników nawigacji klawiaturą
Optymalizacja wydajności
- • Wstępnie załaduj niestandardowe obrazy kursorów, aby zapobiec opóźnieniom
- • Używaj sprite'ów CSS, aby zmniejszyć liczbę żądań HTTP
- • Unikaj niepotrzebnych zmian kursorów, aby poprawić wydajność
- • Pamiętaj, że niestandardowe kursory nie są wyświetlane w środowiskach mobilnych