Penguji Kursor CSS
Pratinjau gratis 38 gaya kursor CSS standar secara online dengan penguji kursor CSS kami. Arahkan kursor ke kartu kursor mana pun untuk melihatnya beraksi, filter berdasarkan kategori, cari berdasarkan nama, dan klik untuk menyalin deklarasi CSS seketika. Tanpa pendaftaran.
Preview all 36 standard CSS cursor styles by hovering over each card. Click any card to copy the cursor: CSS declaration to your clipboard. Filter by category or search by name.
36 cursors total - hover to preview, click to copy
Mengapa Menggunakan Penguji Kursor CSS Kami?
- Pratinjau Kursor CSS Instan: pratinjau semua 38 gaya kursor CSS standar dengan mengarahkan kursor ke setiap kartu di penguji kursor CSS. Kursor berubah seketika saat di-hover - tanpa klik, tanpa menunggu, tanpa menebak tampilan setiap kursor di platform Anda.
- Penguji Kursor CSS Online yang Aman: penguji kursor CSS berjalan sepenuhnya di browser Anda tanpa pengumpulan data, pelacakan, atau permintaan server. Ini alat referensi murni sisi klien - penjelajahan Anda sepenuhnya privat.
- Penguji Kursor CSS Tanpa Instalasi: gunakan penguji kursor CSS langsung di browser modern mana pun tanpa unduhan, plugin, atau ekstensi. Kursor dirender memakai set kursor asli sistem operasi Anda, jadi Anda melihat persis apa yang akan dilihat pengguna.
- 100% Gratis dengan Salin Sekali Klik: penguji kursor CSS sepenuhnya gratis tanpa pendaftaran, batas penggunaan, dan iklan. Klik kartu kursor mana pun untuk menyalin deklarasi CSS siap pakai ke papan klip seketika.
Kasus Penggunaan Umum Penguji Kursor CSS
- Memilih Kursor yang Tepat untuk Elemen UI: gunakan penguji kursor CSS untuk menemukan kursor yang tepat bagi tombol, tautan, elemen yang bisa diseret, dan kontrol yang dinonaktifkan. Arahkan kursor ke setiap opsi di penguji untuk melihat tampilannya sebelum menambahkannya ke stylesheet.
- Desain Antarmuka Seret-lepas: UI seret-lepas memerlukan umpan balik kursor yang presisi - grab saat di-hover, grabbing saat diseret, no-drop di atas target tidak valid. Penguji memungkinkan Anda membandingkan semua kursor seret berdampingan.
- Komponen Panel dan Splitter yang Dapat Diubah Ukurannya: panel yang dapat diubah ukurannya butuh kursor arah (ew-resize, ns-resize, col-resize, row-resize). Gunakan penguji untuk melihat semua varian dan memilih yang tepat untuk setiap pegangan.
- Aksesibilitas dan Umpan Balik UX: umpan balik kursor yang benar adalah syarat aksesibilitas - pengguna mengandalkan perubahan kursor untuk memahami apa yang interaktif. Penguji membantu Anda memastikan elemen nonaktif memakai not-allowed dan status pemuatan memakai wait atau progress.
- Verifikasi Kursor Lintas Platform: kursor CSS tampil berbeda di Windows, macOS, dan Linux. Gunakan penguji di tiap platform untuk memastikan kursor pilihan Anda tampak benar bagi audiens target sebelum dirilis.
- Tinjauan Kode dan Dokumentasi: saat meninjau kode CSS atau menulis dokumentasi komponen, gunakan penguji sebagai referensi cepat untuk memastikan nilai kursor benar dan sesuai dengan interaksi yang dijelaskan.
Apa Itu Properti CSS cursor?
Properti CSS cursor mengatur bentuk kursor mouse yang muncul saat pengguna mengarahkan kursor ke sebuah elemen. Ini salah satu sinyal UX paling penting di antarmuka web - kursor memberi tahu pengguna apa yang akan terjadi saat mereka berinteraksi dengan elemen. Spesifikasi CSS mendefinisikan 38 nilai kursor standar yang dikelompokkan ke dalam kategori: kursor umum, indikator tautan dan status, kursor seleksi, kursor seret-lepas, kursor ubah ukuran, dan kursor zoom. Penguji kursor CSS kami memungkinkan Anda melihat semuanya memakai rendering kursor asli sistem operasi Anda, jadi Anda melihat persis apa yang akan dilihat pengguna di platform mereka.
Cara Kerja Penguji Kursor CSS Kami
- Telusuri atau Cari: gunakan tab kategori untuk memfilter kursor berdasarkan jenis (Umum, Tautan & Status, Seleksi, Seret & Lepas, Ubah Ukuran, Zoom), atau ketik nama atau deskripsi kursor di kotak pencarian. Penguji memperbarui kisi seketika.
- Arahkan untuk Pratinjau: gerakkan mouse ke kartu kursor mana pun untuk melihat kursor berubah secara real time. Bilah info di bawah menampilkan nama kursor, deklarasi CSS, dan deskripsinya. Penguji memakai rendering kursor asli browser Anda - tidak ada gambar atau SVG yang digunakan.
- Klik untuk Menyalin: klik kartu kursor mana pun untuk menyalin deklarasi CSS lengkap (misalnya, cursor: pointer; ) ke papan klip. Tempelkan langsung ke stylesheet Anda. Kartu menampilkan konfirmasi “Tersalin!” selama 1,5 detik.
Kategori Kursor CSS Dijelaskan
- Umum: auto (browser memutuskan), default (panah platform), dan none (kursor disembunyikan). Gunakan auto untuk sebagian besar elemen dan timpa hanya bila perlu.
- Tautan & Status: pointer untuk elemen yang dapat diklik, wait untuk operasi yang memblokir, progress untuk operasi latar belakang, help untuk pemicu tooltip, dan context-menu untuk target klik kanan.
- Seret & Lepas: grab dan grabbing untuk elemen yang bisa diseret, move untuk item yang dapat dipindahkan, copy untuk operasi salin, alias untuk pintasan, no-drop dan not-allowed untuk target tidak valid dan tindakan nonaktif.
- Ubah Ukuran: kursor arah untuk 8 arah mata angin (n, s, e, w, ne, nw, se, sw) plus varian dua arah (ew-resize, ns-resize, nesw-resize, nwse-resize) serta col-resize , row-resize , dan all-scroll untuk mengubah ukuran tabel dan panel.
Dukungan Browser dan Perbedaan Platform
Semua 38 nilai kursor CSS di penguji didukung di Chrome, Firefox, Safari, Edge, dan Opera. Tampilan visual setiap kursor berbeda menurut sistem operasi - Windows memakai kursor Aero, macOS memakai set-nya sendiri, dan Linux memakai tema kursor X11. Ini disengaja: browser menyerahkan rendering kursor ke OS agar kursor terasa asli di platform pengguna. Kursor none menyembunyikan kursor sepenuhnya - gunakan dengan hati-hati dan hanya bila Anda menyediakan kursor khusus via JavaScript, karena menyembunyikan kursor tanpa pengganti adalah masalah aksesibilitas.
Pertanyaan yang Sering Diajukan
Penguji kursor CSS adalah alat berbasis browser yang memungkinkan Anda melihat pratinjau semua gaya kursor CSS standar dengan mengarahkan kursor ke setiap kartu. Penguji kami mencakup semua 38 nilai kursor CSS dengan filter kategori, pencarian, dan penyalinan deklarasi CSS sekali klik. Tanpa pendaftaran.
Spesifikasi CSS mendefinisikan 38 nilai kursor standar dalam 6 kategori: umum (auto, default, none), tautan dan status (pointer, progress, wait, context-menu, help), seleksi (crosshair, cell, text, vertical-text), seret-lepas (alias, copy, move, no-drop, not-allowed, grab, grabbing), ubah ukuran (16 varian arah), dan zoom (zoom-in, zoom-out).
Ya - penguji kursor CSS 100% gratis tanpa pendaftaran, tanpa akun, dan tanpa batas penggunaan. Pratinjau dan salin sebanyak yang Anda butuhkan, gratis selamanya.
Kursor CSS dirender oleh sistem operasi Anda, bukan browser. Windows, macOS, dan Linux punya tema kursor masing-masing, jadi nilai kursor yang sama tampak berbeda di tiap platform. Penguji kursor CSS menunjukkan kursor persis seperti yang akan dilihat pengguna Anda pada OS yang sama.
cursor: wait menandakan program sibuk dan pengguna tidak dapat berinteraksi dengan halaman. cursor: progress menandakan program sibuk di latar belakang tetapi pengguna masih bisa berinteraksi. Gunakan wait untuk operasi yang memblokir dan progress untuk tugas latar belakang yang tidak memblokir.
cursor: grab menampilkan tangan terbuka yang menandakan elemen bisa diseret. cursor: grabbing menampilkan tangan mengepal yang menandakan elemen sedang diseret. Beralihlah di antara keduanya dengan JavaScript - pasang grab saat mouseenter dan grabbing saat mousedown.
cursor: not-allowed menandakan tindakan yang diminta tidak dapat dilakukan - pakai pada tombol dan kolom formulir yang dinonaktifkan. cursor: no-drop menandakan item yang diseret tidak dapat dilepas di lokasi saat ini - pakai pada target lepas yang tidak valid saat seret-lepas.
Bisa. Properti CSS cursor menerima nilai url() untuk gambar kursor khusus: cursor: url(kursor-saya.png) 0 0, auto. Dua angka itu adalah koordinat titik aktif. Selalu berikan kursor cadangan setelah url() untuk berjaga jika gambar gagal dimuat.