Bentuk - bentuk Cursor Property

Cursor

Kali ini saya akan membahas mengenai bentuk - bentuk cursor untuk mouse. Secara default browser akan mengatur bentuk cursor menjadi bentuk auto. Bentuk cursor dapat kita ubah sesuai keinginan kita. Tapi kali ini saya hanya akan menunjukkan bentuk cursor property yang sudah umum pada css.

Biar lebih gampang dimengerti kita langsung ke contoh di bawah ini :

Cursor auto
Auto merupakan nilai default dari browser.

Cursor Crosshair
Bentuk cursor yang mirip dengan sebuah target yang dibidik atau diagram kartesius.

Cursor default
Bentuk cursor arah panah.

Cursor e-resize dan w-resize
Bentuk cursor yang menunjukkan bahwa tepi bisa diperbesar ke kanan atau kiri.

Cursor help
Bentuk cursor yang mengindikasikan bahwa sebuah bantuan.

Cursor move
Bentuk cursor yang mengindikasikan dapat dipindahkan.

Cursor n-resize dan s-resize
Bentuk cursor yang menunjukkan bahwa tepi bisa diperbesar ke atas atau bawah.

Cursor ne-resize dan sw-resize
Bentuk cursor yang menunjukkan bahwa tepi bisa diperbesar ke kanan atas atau kiri bawah.

Cursor nw-resize dan se-resize
Bentuk cursor yang menunjukkan bahwa tepi bisa diperbesar ke kiri atas atau kanan bawah.

Cursor pointer
Bentuk cursor yang biasa digunakan untuk tombol diklik.

Cursor progress
Bentuk cursor yang menunjukkan sedang dilakukan proses atau load.

Cursor wait
Bentuk cursor yang menunjukkan sedang load, bisa dibilang sedang hang juga ^_^.

Setelah mengetahui bentuk cursor, sekarang kita mencoba menggunakannya. Sebenarnya ada beberapa cara menggunakannya tetapi saya akan mempraktekan penggunaan bentuk cursor menggunakan css secara inline. Contoh menggunakan cursor help :

<a href="..." style="cursor:help">Help</a>
<p style="cursor:help">Help Help</p>
Hasilnya :
Help
Help Help

Untuk menggunakan cursor yang lain, code help ganti sesuai dengan code cursor yang kamu mau.

Diterbitkan Oleh Fuad Muhtaz »
Kategori » Home » Bentuk - bentuk Cursor Property » , ,

ARTIKEL TERKAIT

Dari komentar menjadi inspirasi

Swedish Greys - a WordPress theme from Nordic Themepark. Converted by LiteThemes.com.