Cara Mudah Custom Cursor Menggunakan CSS

Hallo Guys Selamat datang kembali di blog kita bersama, Pada blog kali ini kita akan membahas mengenai Cara mudah custom cursor menggunakan css 

 Ok sebelumnya apkah kalian tahu apa itu CSS Cursor ?

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML 

source ( https://www.hostinger.co.id/tutorial/apa-itu-css )

Cursor merupakan indikator atau petunjuk posisi yang nampak pada layar komputer saat dijalankan.

Oke jika kita sudah mengetahui pengertian Css Dan cursor sekarang kita masuk ke dalam cara mengcustom Cursor Menggunakan Css

Untuk dapat mengganti bentuk Cursor Mouse di css ini kita dapat menggunakan property cursor , yang nantinya property ini memiliki banyak macam bentuk, berikut property-property yang bisa digunakan beserta keterangannya :

Auto => Bentuk kursor pointer mouse secara otomatis akan mengikuti jenis elemen pada html, apakah elemen tersebut berbentuk text atau link

Crosshair => Kursor Mouse akan berbentuk Crosshair atau tanda plus ( + )

Default => kursor mouse akan berbentuk anak panah

Pointer => Kursor Mouse akan berbentuk jari telunjuk

Move => Kursor mouse akan berbentuk anak panah empat arah untuk memindahkan Elemen

E-resize => Kursor akan berbentuk anak panah dua arah secara Horizontal

Ne-resize => Kursor akan berbentuk anak panah dua arah miring ke kiri atas

nw-resize => Kursor akan berbentuk anak panah dua arah miring ke kanan atas

N-resize => Kursor akan berbentuk anak panah dua arah vertical

se-resize => kursor akan berbentuk anak panah dua arah miring ke kiri atas

w-resize => Kursor akan berbentuk anak panah dua arah secara horizontal

text => kursor akan berbentuk simbol kursor text ( | )

wait => kursor mouse akan berbentuk Lading

help => kursor akan berbentuk anak panah dengan tanda tanya di samping

(url) => untuk dapat mengubah kursor ke gambar


Cara Penulisan script :


 

 

 

 

 

 

 

 

Dan Berikut contoh bentuk kursornya, arahkan kursor anda ke masing-masing tulisan dibawah : 

Contoh Kursor Auto
Contoh Kursor Crosshair
Contoh Kursor Default
Contoh Kursor Pointer
Contoh Kursor Move
Contoh Kursor e-resize
Contoh Kursor ne-resize
Contoh Kursor nw-resize
Contoh Kursor n-resize
Contoh Kursor se-resize
Contoh Kursor sw-resize
Contoh Kursor s-resize
Contoh Kursor w-resize
Contoh Kursor text
Contoh Kursor wait
Contoh Kursor help
 
 
 
Nahh sangat mudah bukan cutom cursor menggunakan css, hehehehe.....
Sekian dan Terimakasih telah berkunjung ke blog kita bersama, jika ada pertanyaan tinggalkan di kolom komentar

0 Komentar