CSS Cursor

Cursor adalah panah yang ketika mouse atau touchpad kamu arahin, nanti anak panahnya juga ikut bergerak.

Mouse secara default tampilannya ya anak panah, dan tangan telunjuk untuk link.

Tapi, kamu bisa sebenarnya mengkustom tampilan cursor sendiri. Dulu ketika saya masih seneng aneh-aneh juga melakukan ini ehehe.

Property

Untuk mengganti tampilan cursor, kamu tinggal menambahkan properti cursor:;, contoh:

p {cursor: wait;}

coba mousenya diarahin ke paragraf ini. Nanti tampilannya ganti tampilan loading.

Value

Berikut ini tampilan cursor yang bisa kamu pilih:

ValueTampilanContoh
context-menuIni contoh pakai context-menu
helpIni contoh pakai help
pointerIni contoh pakai pointer
progressIni contoh pakai progress
waitIni contoh pakai wait
cellIni contoh pakai cell
crosshairIni contoh pakai crosshair
textIni contoh pakai text
vertical-textIni contoh pakai vertical-text
aliasIni contoh pakai alias
copyIni contoh pakai copy
moveIni contoh pakai move
no-dropIni contoh pakai no-drop
not-allowedIni contoh pakai not-allowed
all-scrollIni contoh pakai all-scroll
col-resizeIni contoh pakai col-resize
row-resizeIni contoh pakai row-resize
n-resizeIni contoh pakai n-resize
e-resizeIni contoh pakai e-resize
s-resizeIni contoh pakai s-resize
w-resizeIni contoh pakai w-resize
ne-resizeIni contoh pakai ne-resize
nw-resizeIni contoh pakai nw-resize
se-resizeIni contoh pakai se-resize
sw-resizeIni contoh pakai sw-resize
ew-resizeIni contoh pakai ew-resize
ns-resizeIni contoh pakai ns-resize
nesw-resizeIni contoh pakai nesw-resize
nwse-resizeIni contoh pakai nwse-resize
zoom-inIni contoh pakai zoom-in
zoom-outIni contoh pakai zoom-out
grabIni contoh pakai grab
grabbingIni contoh pakai grabbing
Sumber: tutorial points

Custom cursor

Kamu juga bisa tuh untuk mengcustom sendiri tampilan. Value propertinya menjadi cursor: url("gambar.gif"), url("gambar.cur"), default;

Jadi, supaya lebih aman kamu mendefinisikan icon dalam 2 format gambar (jadi ada 2 file image yang dipanggil).

Satunya format .gif, satunya lagi format .cur. Kamu bisa menkonversi dengan cur converter online.

Leave a Comment