Penjana Kursor CSS
Alat untuk menjana dan pratonton gaya kursor CSS2, CSS3 dan kursor tersuai.
Kursor CSS2Sokongan 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 CSS3Pelayar Moden
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 TersuaiLanjutan
Kursor Berasaskan 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 Disokong
.cur
.png
.jpg
.gif
Contoh Penggunaan
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Kursor Berasaskan 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 Disokong
.cur
.png
.jpg
.gif
Contoh Penggunaan
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Pertimbangan Kebolehcapaian
- • Sediakan isyarat visual tambahan dan bukannya bergantung semata-mata pada kursor untuk menyatakan fungsi
- • Gunakan kursor yang kelihatan dalam mod kontras tinggi
- • Gunakan kursor animasi secara sederhana dengan mempertimbangkan tetapan kebolehcapaian
- • Sediakan penunjuk fokus untuk pengguna navigasi papan kekunci
Pengoptimuman Prestasi
- • Muat semula imej kursor tersuai untuk mengelakkan kelewatan
- • Gunakan sprite CSS untuk mengurangkan permintaan HTTP
- • Elakkan perubahan kursor yang tidak perlu untuk meningkatkan prestasi
- • Pertimbangkan bahawa kursor tersuai tidak dipaparkan dalam persekitaran mudah alih