Opacity

Tampilan samar punya peran nyata: kartu yang sedang menunggu proses, tombol yang belum boleh ditekan, atau elemen yang perlu mundur agar tidak berebut perhatian. CSS menyediakan dua jalan untuk itu — opacity yang meredupkan seluruh elemen sekaligus, dan nilai alpha pada warna (misalnya rgba()) yang hanya menyentuh satu warna. Keduanya terlihat mirip, tetapi hasilnya berbeda jauh; chapter ini memetakan perbedaannya sekaligus jebakannya.

opacity Menyentuh Seluruh Elemen #

.kartu-arsip {
  opacity: 0.5;
}

opacity menerima angka dari 0 hingga 1: 0 berarti sepenuhnya transparan, 1 sepenuhnya solid, dan 0.5 berada di tengahnya. Nilai di luar rentang dijepit ke batas — -0.3 diperlakukan sebagai 0, dan 2 sebagai 1. Yang penting dicatat: efeknya mencakup seluruh isi elemen — teks, latar, border, bayangan, hingga semua elemen anak.

opacity vs alpha pada Warna #

Bandingkan dengan jalan kedua — memberi alpha hanya pada satu warna:

.kartu-arsip p {
  color: rgba(31, 41, 51, 0.5);
}

Dua kartu berikut memakai angka redup yang sama dengan cara yang berbeda:

Aturan praktisnya: pilih opacity bila elemen keseluruhan harus tampak tidak aktif, dan pilih alpha pada warna bila hanya satu bagian yang perlu diredupkan.

State Nonaktif yang Jujur #

.tombol-keranjang:disabled {
  opacity: 0.5;
}

Pola paling umum adalah meredupkan tombol yang tidak bisa ditekan. Perhatikan pembagian tugasnya: attribute disabled yang sungguhan mengurus perilaku (tombol tidak menerima klik dan tidak ikut Tab), sedangkan opacity mengurus tampilannya — detail lengkapnya menyusul di section Styling Forms dan Controls. Meredupkan tombol tanpa attribute nonaktif justru menyesatkan: elemen terlihat tidak berfungsi padahal masih bisa diklik.

Efek Induk Tidak Bisa Dibatalkan Anak #

Sekali elemen induk diberi opacity di bawah 1, elemen anak tidak bisa menembus batas itu. Angka pada anak hanya bisa menurunkan kadar lagi, karena kedua efek dikalikan:

• Induk 0.5, anak 1 → hasil yang terlihat 0.5.
• Induk 0.5, anak 0.8 → hasil 0.4.

Tidak ada nilai opacity yang membuat anak tampil lebih pekat daripada induknya — nilai maksimalnya tetap 1. Bila sebagian isi harus tetap solid, jangan beri opacity pada induk; terapkan pada elemen yang memang perlu redup.

Satu catatan teknis untuk jalan ke depan: elemen dengan opacity di bawah 1 membentuk stacking context, yaitu urutan tumpukan tersendiri yang menentukan elemen mana yang tampak di atas. Mekanisme lengkapnya menunggu di section Positioning.

Sekilas Menuju Transisi #

opacity termasuk property yang perubahannya halus dan murah bagi browser, sehingga menjadi bahan utama efek fade. Menampilkan elemen dari 0 ke 1 saat hover hanya butuh pendamping property transition — kita praktikkan pada section Transitions dan Animations.

Kesalahan Umum #

Ringkasan #

opacity meredupkan seluruh elemen beserta anak-anaknya dalam satu angka 0 sampai 1, sementara alpha pada warna seperti rgba() hanya menyentuh satu warna — pilihannya ditentukan oleh cakupan efek yang kita inginkan. Efek pada induk tidak bisa dibatalkan oleh anak karena efeknya dikalikan, dan opacity di bawah 1 membentuk stacking context. Ketika elemen samar bertumpuk di atas sebuah latar, satu pertanyaan langsung mengikuti: apakah teksnya masih terbaca? Chapter penutup section ini, Kontras Warna, menjawabnya dengan angka.