Skip to main content

B.4.2.9. Cursor & Opacity

B.4.2.9.1.cursor​

Halo teman-teman! Kali ini, kita akan membahas tentang properti cursor. Properti ini digunakan untuk mengatur tampilan kursor saat teman-teman mengarahkan mouse ke sebuah elemen di halaman web. Ada banyak pilihan jenis kursor yang bisa digunakan, dan masing-masing memberikan indikasi visual yang berbeda-beda bagi pengguna.

  1. default Kursor standar atau default, biasanya berupa tanda panah yang menunjuk.

    .default-cursor {
      cursor: default;
    }

  2. pointer Mengubah kursor menjadi tangan (biasanya digunakan pada tautan atau tombol yang dapat diklik).

    .pointer-cursor {
      cursor: pointer;
    }

  3. text Kursor berubah menjadi bentuk I-beam, yang biasanya digunakan saat berada di area teks yang dapat diseleksi atau diedit.

    .text-cursor {
      cursor: text;
    }

  4. move Kursor berubah menjadi tanda panah empat arah, biasanya digunakan untuk mengindikasikan elemen yang dapat dipindahkan.

    .move-cursor {
      cursor: move;
    }

  5. not-allowed Menampilkan tanda larangan atau penolakan (biasanya saat ada aksi yang tidak diperbolehkan).

    .not-allowed-cursor {
      cursor: not-allowed;
    }

  6. crosshair Mengubah kursor menjadi tanda crosshair (garis silang), sering digunakan dalam aplikasi yang melibatkan presisi.

    .crosshair-cursor {
      cursor: crosshair;
    }

  7. wait Mengubah kursor menjadi tanda jam pasir atau lingkaran, yang biasanya menunjukkan bahwa ada proses yang sedang berlangsung.

    .wait-cursor {
      cursor: wait;
    }

  8. Kursor Kustom Teman-teman juga bisa menggunakan gambar kursor kustom menggunakan URL.

    .custom-cursor {
      cursor: url("path/to/cursor-image.png"), auto;
    }

Dengan menggunakan properti cursor, teman-teman bisa memberikan umpan balik visual kepada pengguna tentang apa yang bisa dilakukan dengan elemen tersebut. Misalnya, ketika kursor berubah menjadi tangan, pengguna tahu bahwa elemen tersebut bisa diklik

B.4.2.9.2. opacity​

Setelah membahas tentang cursor, sekarang kita akan masuk ke topik berikutnya, yaitu opacity. Properti ini mengatur seberapa transparan sebuah elemen, dari sepenuhnya terlihat hingga tidak terlihat sama sekali.

Nilai dari opacity berada dalam rentang dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya tidak transparan). Teman-teman bisa menggunakan nilai desimal untuk mengatur tingkat transparansi yang diinginkan.

  • opacity: 1: Elemen sepenuhnya terlihat (default).
  • opacity: 0.5: Elemen setengah transparan.
  • opacity: 0: Elemen sepenuhnya transparan (tidak terlihat).

Cara penggunaan properti ini cukup mudah, coba teman-teman perhatikan kode di bawah ini:

<div class="opaque-element">
  Elemen ini sepenuhnya terlihat dengan `opacity: 1`.
</div>
<div class="semi-transparent-element">
  Elemen ini setengah transparan dengan `opacity: 0.5`.
</div>
<div class="transparent-element">
  Elemen ini sepenuhnya transparan dengan `opacity: 0` (tidak terlihat).
</div>

Saat teman-teman mengatur opacity pada suatu elemen, semua konten di dalam elemen tersebut juga akan terkena efek transparansi. Misalnya, jika sebuah elemen div memiliki opacity: 0.5, maka teks, gambar, atau elemen lain di dalamnya juga akan setengah transparan.

Coba teman-teman perhatikan hasilnya:

Output

Bisa kita lihat bahwa semua elemen di dalam .transparent-element tidak terlihat sama sekali karena opacity yang kita set ke 0.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.2-box-styling/B.4.2.9-cursor-and-opacity