Generator Kursor CSS
Alat untuk menghasilkan dan mempratinjau gaya kursor CSS2, CSS3, dan kursor khusus.
Kursor CSS2Dukungan Universal
auto
Klik untuk menyalin
inherit
Klik untuk menyalin
crosshair
Klik untuk menyalin
default
Klik untuk menyalin
help
Klik untuk menyalin
move
Klik untuk menyalin
pointer
Klik untuk menyalin
progress
Klik untuk menyalin
text
Klik untuk menyalin
wait
Klik untuk menyalin
e-resize
Klik untuk menyalin
ne-resize
Klik untuk menyalin
nw-resize
Klik untuk menyalin
n-resize
Klik untuk menyalin
se-resize
Klik untuk menyalin
sw-resize
Klik untuk menyalin
s-resize
Klik untuk menyalin
w-resize
Klik untuk menyalin
Kursor CSS3Browser Modern
none
not IE, Safari, Opera
Klik untuk menyalin
context-menu
not Firefox, Chrome
Klik untuk menyalin
cell
not Safari
Klik untuk menyalin
vertical-text
Klik untuk menyalin
alias
not Safari
Klik untuk menyalin
copy
not Safari
Klik untuk menyalin
no-drop
Klik untuk menyalin
not-allowed
Klik untuk menyalin
ew-resize
Klik untuk menyalin
ns-resize
Klik untuk menyalin
nesw-resize
Klik untuk menyalin
nwse-resize
Klik untuk menyalin
col-resize
Klik untuk menyalin
row-resize
Klik untuk menyalin
all-scroll
Klik untuk menyalin
grab
only Webkit and Firefox
Klik untuk menyalin
grabbing
only Webkit and Firefox
Klik untuk menyalin
zoom-in
only Webkit and Firefox
Klik untuk menyalin
zoom-out
only Webkit and Firefox
Klik untuk menyalin
Kursor KustomLanjutan
Kursor Berbasis 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
Format yang Didukung
.cur
.png
.jpg
.gif
Contoh Penggunaan
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Kursor Berbasis 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
Format yang Didukung
.cur
.png
.jpg
.gif
Contoh Penggunaan
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Pertimbangan Aksesibilitas
- • Berikan isyarat visual tambahan alih-alih hanya mengandalkan kursor untuk mengekspresikan fungsionalitas
- • Gunakan kursor yang terlihat dalam mode kontras tinggi
- • Gunakan kursor animasi dengan hemat dengan mempertimbangkan pengaturan aksesibilitas
- • Berikan indikator fokus untuk pengguna navigasi keyboard
Optimasi Kinerja
- • Muat gambar kursor khusus terlebih dahulu untuk mencegah penundaan
- • Gunakan sprite CSS untuk mengurangi permintaan HTTP
- • Hindari perubahan kursor yang tidak perlu untuk meningkatkan kinerja
- • Pertimbangkan bahwa kursor khusus tidak ditampilkan di lingkungan seluler