Kursor CSS Kustom

Kursor menunjukkan posisi di layar tempat pengguna dapat mengklik atau memasukkan teks. Mungkin ada kursor berbeda yang digunakan untuk komponen situs web yang berbeda. Seorang pengembang harus memastikan bahwa kursor yang digunakan dalam aplikasi harus menarik. Misalnya, kursor tangan penunjuk dapat digunakan pada tombol pada mouse hover. Indikator teks (garis berkedip) digunakan pada kotak teks tempat teks akan dimasukkan.

Ada beberapa gaya kursor dalam CSS yang digunakan hanya dengan menentukan nilai properti kursor. Namun, pengembang dapat membuat kursor khusus menggunakan CSS.

Panduan belajar ini akan memberikan tentang:

- kursor CSS
- CSS kursor khusus

Sebelum masuk ke topik, mari kita lihat beberapa bentuk kursor CSS dengan contoh praktis.

kursor CSS

CSS “ kursor ” properti memiliki nilai yang berbeda, seperti penunjuk, tidak ada, progres, dan lainnya. Mari buat tabel yang berisi baris tempat kursor berbeda akan ditampilkan pada mouse hover.

Contoh: Membuat Tabel yang Mewakili Berbagai Kursor CSS di HTML

Pertama, tambahkan elemen

di HTML. Di dalam elemen ini:

- Tag

akan digunakan untuk membuat baris.

Baris pertama berisi judul.

Judul ini ditentukan dengan menggunakan tag

lainnya berisi dua tag

. Tag
untuk mengisi kolom dengan data. Tag	kedua mewakili elemen tombol yang diterapkan dengan CSS “ kursor ” properti dengan nilai yang berbeda. Kode HTML untuk skenario di atas diberikan di bawah ini: < meja > < tr > < th gaya = 'lebar: 200px;' > pemilih kursor css th > < th gaya = 'lebar: 200px;' > gaya kursor th > tr > < tr > < td > kursor: penunjuk td > < td >< tombol gaya = 'kursor: penunjuk;' > penunjuk tombol > td > tr > < tr > < td > kursor: kemajuan td > < td >< tombol gaya = 'kursor: kemajuan;' > kemajuan tombol > td > tr > < tr > < td > kursor: tidak diperbolehkan td > < td >< tombol gaya = 'kursor: tidak diizinkan;' > tidak diizinkan tombol > td > tr > < tr > < td > kursor: tidak ada td > < td >< tombol gaya = 'kursor: tidak ada;' > tidak ada tombol > td > tr > < tr > < td > kursor: bergerak td > < td >< tombol gaya = 'kursor: bergerak;' > pindah tombol > td > tr > < tr > < td > kursor: ambil td > < td >< tombol gaya = 'kursor: ambil;' > merebut tombol > td > tr > < tr > < td > kursor: salin td > < td >< tombol gaya = 'kursor: salin;' > salinan tombol > td > tr > < tr > < td > kursor: col-resize td > < td >< tombol gaya = 'kursor: col-resize;' > col-resize tombol > td > tr > < tr > < td > kursor: mengubah ukuran baris td > < td >< tombol gaya = 'kursor: ubah ukuran baris;' > mengubah ukuran baris tombol > td > tr > < tr > < td > kursor: teks td > < td >< tombol gaya = 'kursor: teks;' > teks tombol > td > tr > meja > Kode di atas akan menghasilkan hasil sebagai berikut: Di bagian selanjutnya, kita akan menerapkan gaya yang berbeda pada elemen HTML. Gaya 'semua' Elemen * { lapisan: 0 ; batas: 0 ; font-family: Arial, Helvetica, sans-serif; } Semua elemen HTML diterapkan dengan gaya CSS yang dijelaskan di bawah ini: “ lapisan ” properti dengan “ 0 ” nilai tidak menyertakan spasi di sekitar konten elemen. “ batas ” properti dengan “ 0 ” nilai tidak menambah ruang di luar setiap elemen. “ font-family ” properti diberi nilai “ Arial, Helvetica, sans-serif ”. Daftar gaya font diberikan untuk memastikan jika gaya pertama tidak didukung oleh browser, gaya lain harus diterapkan. Elemen gaya 'meja'. meja { margin: 0px otomatis; batas: 1px solid gainsboro; } Elemen tabel HTML diterapkan dengan properti CSS yang dijelaskan di bawah ini: “ berbatasan ” properti diatur dengan nilai “ 1px solid gainsboro ” yang masing-masing mewakili lebar batas, gaya batas, dan warna batas. “ batas ” properti berperilaku seperti yang ditentukan di atas. Elemen gaya 'td'. td { perataan teks: tengah; } Elemen	diterapkan dengan properti “ perataan teks ” dengan nilai “ tengah ”. Ini akan menyelaraskan teks kolom di tengah. Elemen 'tombol' gaya tombol { background-color: cadetblue; padding: 10px 10px; warna: #ffffff; lebar: 150px; } Elemen tombol yang digunakan dalam kode HTML di atas ditata dengan properti CSS baru yang dijelaskan di bawah ini: “ warna latar belakang ” menentukan warna latar belakang elemen. “ lapisan ” dengan nilai yang ditetapkan sebagai “ 10px 10px ” menambahkan ruang 10px di bagian atas-bawah dan 10px di sisi kiri-kanan item elemen. “ warna ” menyesuaikan warna font elemen. “ lebar ” adalah properti yang menyesuaikan lebar elemen. Kode di atas akan menghasilkan hasil sebagai berikut: Sejauh ini kita telah membahas kursor yang disediakan oleh CSS. Di bagian selanjutnya, contoh akan menjelaskan cara membuat kursor khusus dengan CSS. CSS kursor khusus Pengembang harus menggunakan kursor yang sesuai untuk aplikasi mereka. Kursor harus dibuat menarik untuk menarik perhatian pengguna. Selain itu, kursor khusus dapat dibuat untuk tujuan ini. Perhatikan contoh di bawah ini! Contoh: Bagaimana Cara Membuat Kursor Kustom dengan CSS? Dalam HTML, tambahkan dua elemen div. Satu dengan kelas “ lingkaran ' dan yang lainnya dengan kelas ' titik ”. HTML < div kelas = 'lingkaran' > div > < div kelas = 'titik' > div > Mari kita lanjutkan ke bagian CSS. Elemen gaya 'tubuh'. tubuh { tinggi: 100vh; } Elemen body dari file HTML diterapkan dengan gaya “ tinggi ” properti untuk mengatur ketinggian elemen. Div gaya 'lingkaran'. .lingkaran { lebar: 20px; tinggi: 20px; perbatasan: 2px putih solid; radius batas: lima puluh % ; } Di bawah ini adalah penjelasan properti CSS yang diterapkan pada elemen div yang memiliki class “ lingkaran ”: “ lebar ” properti menyesuaikan lebar elemen. “ berbatasan ” properti dengan nilai yang ditentukan sebagai “ 2px putih solid ” mewakili lebar batas, gaya batas, dan warna. “ radius perbatasan ” properti mengubah putaran perbatasan elemen. Div gaya 'titik'. .titik { lebar: 5px; tinggi: 5px; background-color: putih; radius batas: lima puluh % ; } Elemen div dengan class point disediakan dengan properti berbeda yang dijelaskan di bawah ini: “ warna latar belakang ” properti menentukan warna latar belakang elemen. “ radius perbatasan ” menyetel tepi elemen membulat. Properti lain akan berfungsi sama seperti yang dibahas. Kode yang diberikan akan menampilkan kursor berikut pada halaman web: Kami telah membuat kursor menggunakan HTML dan CSS. Sekarang, di bagian selanjutnya, kode JavaScript ditulis untuk menambahkan fungsionalitas yang diperlukan ke kursor. JavaScript < naskah > const cursorCircle = document.querySelector ( '.lingkaran' ) ; const cursorPoint = document.querySelector ( '.titik' ) ; const moveCursor = ( dan ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` menerjemahkan ( ${mouseX} px, ${mouseY} px ) ` ; cursorPoint.style.transform = ` menerjemahkan ( ${mouseX} px, ${mouseY} px ) ` ; } window.addEventListener ( 'mousemove' , pindahkan Kursor ) naskah > Deskripsi kode JavaScript di atas diberikan di bawah ini: “ ” tag dipasangkan dengan tag , yang digunakan untuk menulis kode JavaScript. “ const ” kata kunci mengidentifikasi bahwa kata kunci const diikuti oleh variabel tidak dapat dipindahkan. “ document.querySelector('.circle') ” mengembalikan elemen div lingkaran yang cocok dengan pemilih yang ditentukan dalam dokumen. “ document.querySelector('.point') ” mengembalikan elemen div titik yang cocok dengan pemilih yang ditentukan dalam dokumen. “ const moveCursor = (e) => ” fungsi ini menentukan fungsi kursor. “ e.klienY ” mengembalikan koordinat vertikal saat peristiwa mouse dipicu. “ e.clientX ” mengembalikan koordinat horizontal saat peristiwa mouse dipicu. “ cursorCircle.style.transform ” div lingkaran diterapkan dengan transformasi gaya. “ cursorPoint.style.transform ” point div diterapkan dengan style transform. “ terjemahkan(${mouseX}px, ${mouseY}px) ” Nilai dari properti transform menetapkan koordinat horizontal dan vertikal. “ window.addEventListener('mouse', moveCursor) ” metode pendengar acara akan mendengarkan gerakan mouse. Itu adalah bagian dari objek jendela global. Setelah memberikan blok kode di atas, kursor akan secara otomatis bergerak di layar seperti gambar di bawah ini: Itu keren! Kami telah membuat kursor khusus dengan properti CSS yang berbeda. Kesimpulan CSS “ kursor ” properti memiliki banyak nilai yang menunjukkan berbagai gaya kursor. Namun, dengan memanfaatkan elemen HTML dan properti CSS, kita dapat membuat kursor yang disesuaikan. Kemudian, kode JavaScript diimplementasikan untuk mengaktifkan fungsinya. Studi ini telah menunjukkan cara membuat kursor CSS khusus dengan contoh praktis. Lainnya Kategori Raspberry Pi Ethernet Lainnya Nano Perbesar Kayu Manis Ulasan Zorinos Radio Minecraft Ssh Openvas Kompresi Laravel Retakan Udara Perangkat Lunak Produktivitas Kantor Sepatu Bot Panggilan Sistem Sysctl Jaringan Gpu Gimp Kompleks Uefi Buruh Pelabuhan Firewall Wireshark Sinologi Pdf Ethereum Os Burung Beo Sublim Selinux Hiper-V Telepon Kode Gnome Kelezatan Mouse Nmap Metasploit Torrent Tablet Pycharm Keriting Di Mana Gcc Font Ssl Nvidia Gambar-Gambar Usb Cumi-Cumi Pasangan Pemutar Media Vlc Dns Bitcoin Papan Ketik Pemandangan Tinta Enkripsi Fedora Awan Sendiri Pemindai Atom Topi Merah Teamviewer Skype Vpn Xfce Buku Catatan Jupyter Nfs Blog Lvm Suse Pemutar Media Posix Uap Jenkins Kekuasaan Oracle Linux Status Bersih Meter Persegi Bluetooth Ssd Pegangan Gentoo Pengembaraan Audio Cpu Aliran Tensor Meja Otomatis Lubuntu Llvm Windows Microsoft Edge (Warisan) Internet Explorer Kantor Lainnya kamera web pemutar media cPanel haproxy sublim Ubuntu 24.04 cloud berikutnya kebajikan usb-passthrough #boot-aman perangkat-passthrough SDN Pesan Populer Apa Artinya Fork di GitHub? Lainnya Buat Database di PostgreSQL Menggunakan Perintah createb Lainnya Bagaimana Cara Menginstal Node.js dari File di Linux? Lainnya Menyiapkan Otentikasi MLflow Lainnya Cara Mendorong Gambar Docker Lokal ke AWS ECR Lainnya Rangkaian Logika Sekuensial dan SR Flip Flop Lainnya Cara Memutakhirkan Agen Pembaruan Windows ke Versi Terbaru Lainnya Kode Kesalahan Pembaruan Windows 10 0x800F0922 Lainnya Cara Menghapus Kartu SIM Dari Android Lainnya Bagaimana Mengonversi int menjadi double di Java Lainnya Cara Mengubah Konten di CSS Lainnya Cara Menganalisis Bentuk Gelombang Sinusoidal pada Rangkaian AC Lainnya Cara Membuat dan menggunakan simbol penjumlahan di LaTeX Lainnya Apa Perbedaan Antara HEAD^ dan HEAD~ di Git? Lainnya Cara Menemukan Nomor SIM di iPhone Lainnya Apa Perbedaan Antara git reset –dicampur, –lunak, dan –keras? Lainnya Apa Perbedaan Antara C# dan C++ Lainnya Bagaimana cara Menghubungkan Akun Perselisihan Saya di Crunchyroll Lainnya Loop Bersarang di C++ Lainnya Apa itu Subclass dan Superclass di Java Inheritance Lainnya

. Tag

untuk mengisi kolom dengan data.

Tag

kedua mewakili elemen tombol yang diterapkan dengan CSS “ kursor ” properti dengan nilai yang berbeda.

Kode HTML untuk skenario di atas diberikan di bawah ini:

< meja >
< tr >
< th gaya = 'lebar: 200px;' > pemilih kursor css th >
< th gaya = 'lebar: 200px;' > gaya kursor th >
tr >
< tr >
< td > kursor: penunjuk td >
< td >< tombol gaya = 'kursor: penunjuk;' > penunjuk tombol > td >
tr >
< tr >
< td > kursor: kemajuan td >
< td >< tombol gaya = 'kursor: kemajuan;' > kemajuan tombol > td >
tr >
< tr >
< td > kursor: tidak diperbolehkan td >
< td >< tombol gaya = 'kursor: tidak diizinkan;' > tidak diizinkan tombol > td >
tr >
< tr >
< td > kursor: tidak ada td >
< td >< tombol gaya = 'kursor: tidak ada;' > tidak ada tombol > td >
tr >
< tr >
< td > kursor: bergerak td >
< td >< tombol gaya = 'kursor: bergerak;' > pindah tombol > td >
tr >
< tr >
< td > kursor: ambil td >
< td >< tombol gaya = 'kursor: ambil;' > merebut tombol > td >
tr >
< tr >
< td > kursor: salin td >
< td >< tombol gaya = 'kursor: salin;' > salinan tombol > td >
tr >
< tr >
< td > kursor: col-resize td >
< td >< tombol gaya = 'kursor: col-resize;' > col-resize tombol > td >
tr >
< tr >
< td > kursor: mengubah ukuran baris td >
< td >< tombol gaya = 'kursor: ubah ukuran baris;' > mengubah ukuran baris tombol > td >
tr >
< tr >
< td > kursor: teks td >
< td >< tombol gaya = 'kursor: teks;' > teks tombol > td >
tr >
meja >

Kode di atas akan menghasilkan hasil sebagai berikut:

Di bagian selanjutnya, kita akan menerapkan gaya yang berbeda pada elemen HTML.

Gaya 'semua' Elemen

* {
lapisan: 0 ;
batas: 0 ;
font-family: Arial, Helvetica, sans-serif;
}

Semua elemen HTML diterapkan dengan gaya CSS yang dijelaskan di bawah ini:

- “ lapisan ” properti dengan “ 0 ” nilai tidak menyertakan spasi di sekitar konten elemen.
- “ batas ” properti dengan “ 0 ” nilai tidak menambah ruang di luar setiap elemen.
- “ font-family ” properti diberi nilai “ Arial, Helvetica, sans-serif ”. Daftar gaya font diberikan untuk memastikan jika gaya pertama tidak didukung oleh browser, gaya lain harus diterapkan.

Elemen gaya 'meja'.

meja {
margin: 0px otomatis;
batas: 1px solid gainsboro;
}

Elemen tabel HTML diterapkan dengan properti CSS yang dijelaskan di bawah ini:

- “ berbatasan ” properti diatur dengan nilai “ 1px solid gainsboro ” yang masing-masing mewakili lebar batas, gaya batas, dan warna batas.

“ batas ” properti berperilaku seperti yang ditentukan di atas.

Elemen gaya 'td'.

td {
perataan teks: tengah;
}

Elemen

diterapkan dengan properti “ perataan teks ” dengan nilai “ tengah ”. Ini akan menyelaraskan teks kolom di tengah.

Elemen 'tombol' gaya

tombol {
background-color: cadetblue;
padding: 10px 10px;
warna: #ffffff;
lebar: 150px;
}

Elemen tombol yang digunakan dalam kode HTML di atas ditata dengan properti CSS baru yang dijelaskan di bawah ini:

- “ warna latar belakang ” menentukan warna latar belakang elemen.
- “ lapisan ” dengan nilai yang ditetapkan sebagai “ 10px 10px ” menambahkan ruang 10px di bagian atas-bawah dan 10px di sisi kiri-kanan item elemen.
- “ warna ” menyesuaikan warna font elemen.
- “ lebar ” adalah properti yang menyesuaikan lebar elemen.

Kode di atas akan menghasilkan hasil sebagai berikut:

Sejauh ini kita telah membahas kursor yang disediakan oleh CSS. Di bagian selanjutnya, contoh akan menjelaskan cara membuat kursor khusus dengan CSS.

CSS kursor khusus

Pengembang harus menggunakan kursor yang sesuai untuk aplikasi mereka. Kursor harus dibuat menarik untuk menarik perhatian pengguna. Selain itu, kursor khusus dapat dibuat untuk tujuan ini.

Perhatikan contoh di bawah ini!

Contoh: Bagaimana Cara Membuat Kursor Kustom dengan CSS?

Dalam HTML, tambahkan dua elemen div. Satu dengan kelas “ lingkaran ' dan yang lainnya dengan kelas ' titik ”.

HTML

< div kelas = 'lingkaran' > div >
< div kelas = 'titik' > div >

Mari kita lanjutkan ke bagian CSS.

Elemen gaya 'tubuh'.

tubuh {
tinggi: 100vh;
}

Elemen body dari file HTML diterapkan dengan gaya “ tinggi ” properti untuk mengatur ketinggian elemen.

Div gaya 'lingkaran'.

.lingkaran {
lebar: 20px;
tinggi: 20px;
perbatasan: 2px putih solid;
radius batas: lima puluh % ;
}

Di bawah ini adalah penjelasan properti CSS yang diterapkan pada elemen div yang memiliki class “ lingkaran ”:

- “ lebar ” properti menyesuaikan lebar elemen.
- “ berbatasan ” properti dengan nilai yang ditentukan sebagai “ 2px putih solid ” mewakili lebar batas, gaya batas, dan warna.
- “ radius perbatasan ” properti mengubah putaran perbatasan elemen.

Div gaya 'titik'.

.titik {
lebar: 5px;
tinggi: 5px;
background-color: putih;
radius batas: lima puluh % ;
}

Elemen div dengan class point disediakan dengan properti berbeda yang dijelaskan di bawah ini:

- “ warna latar belakang ” properti menentukan warna latar belakang elemen.
- “ radius perbatasan ” menyetel tepi elemen membulat.
- Properti lain akan berfungsi sama seperti yang dibahas.

Kode yang diberikan akan menampilkan kursor berikut pada halaman web:

Kami telah membuat kursor menggunakan HTML dan CSS. Sekarang, di bagian selanjutnya, kode JavaScript ditulis untuk menambahkan fungsionalitas yang diperlukan ke kursor.

JavaScript

< naskah >
const cursorCircle = document.querySelector ( '.lingkaran' ) ;
const cursorPoint = document.querySelector ( '.titik' ) ;
const moveCursor = ( dan ) = > {
const mouseY = e.clientY;
const mouseX = e.clientX;

cursorCircle.style.transform = ` menerjemahkan ( ${mouseX} px, ${mouseY} px ) ` ;
cursorPoint.style.transform = ` menerjemahkan ( ${mouseX} px, ${mouseY} px ) ` ;
}
window.addEventListener ( 'mousemove' , pindahkan Kursor )
naskah >

Deskripsi kode JavaScript di atas diberikan di bawah ini:

- “ ” tag dipasangkan dengan tag , yang digunakan untuk menulis kode JavaScript.
- “ const ” kata kunci mengidentifikasi bahwa kata kunci const diikuti oleh variabel tidak dapat dipindahkan.
- “ document.querySelector('.circle') ” mengembalikan elemen div lingkaran yang cocok dengan pemilih yang ditentukan dalam dokumen.
- “ document.querySelector('.point') ” mengembalikan elemen div titik yang cocok dengan pemilih yang ditentukan dalam dokumen.
- “ const moveCursor = (e) => ” fungsi ini menentukan fungsi kursor.
- “ e.klienY ” mengembalikan koordinat vertikal saat peristiwa mouse dipicu.
- “ e.clientX ” mengembalikan koordinat horizontal saat peristiwa mouse dipicu.
- “ cursorCircle.style.transform ” div lingkaran diterapkan dengan transformasi gaya.
- “ cursorPoint.style.transform ” point div diterapkan dengan style transform.
- “ terjemahkan(${mouseX}px, ${mouseY}px) ” Nilai dari properti transform menetapkan koordinat horizontal dan vertikal.
- “ window.addEventListener('mouse', moveCursor) ” metode pendengar acara akan mendengarkan gerakan mouse. Itu adalah bagian dari objek jendela global.

Setelah memberikan blok kode di atas, kursor akan secara otomatis bergerak di layar seperti gambar di bawah ini:

Itu keren! Kami telah membuat kursor khusus dengan properti CSS yang berbeda.

Kesimpulan

CSS “ kursor ” properti memiliki banyak nilai yang menunjukkan berbagai gaya kursor. Namun, dengan memanfaatkan elemen HTML dan properti CSS, kita dapat membuat kursor yang disesuaikan. Kemudian, kode JavaScript diimplementasikan untuk mengaktifkan fungsinya. Studi ini telah menunjukkan cara membuat kursor CSS khusus dengan contoh praktis.

Kursor CSS Kustom

kursor CSS

CSS kursor khusus

Kesimpulan

Kategori

Pesan Populer