Opacity

Properti opacity mengatur seberapa tembus pandang sebuah elemen secara keseluruhan, dari 0 (tidak terlihat) hingga 1 (pekat). Yang penting dipahami sejak awal: opacity bekerja pada seluruh elemen sebagai satu kesatuan — kotaknya, bordernya, dan seluruh isinya termasuk teks anak — berbeda dengan kanal alpha pada warna yang hanya memengaruhi satu warna tersebut. Karena itu opacity sangat praktis untuk menandai kartu yang nonaktif atau panel yang tengah dimuat, tetapi kurang tepat ketika teks di dalamnya harus tetap terbaca penuh.

Opacity pada Elemen #

Nilainya ditulis sebagai angka desimal tanpa satuan. Contoh berikut menurunkan opacity sebuah kartu menjadi setengah:

.panggung {
  background-image: repeating-linear-gradient(45deg, rgb(153 246 228), rgb(153 246 228) 12px, rgb(240 253 250) 12px, rgb(240 253 250) 24px);
}
.kartu {
  background-color: rgb(250 204 21);
  color: rgb(15 23 42);
  padding: 16px;
}
.kartu-rendah { opacity: 0.5; }
.kartu-penuh  { opacity: 1; }

Hasil di Browser:

Dua kartu kuning tampil di atas latar bergaris. Kartu pertama tampil
setengah tembus — garis latar terlihat menembus kotak dan teksnya
(computed opacity: "0.5"), kartu kedua tampil pekat (computed
opacity: "1"). Computed color pada teks anak kartu pertama tetap
rgb(15, 23, 42) — warna tidak berubah, yang berubah adalah
tingkat tembus pandang hasil render.

Mari kita telaah:

1. Baris 2–3 (.panggung): latar bergaris pada wadah membuat transparansi terlihat jelas — tanpa pola di belakang, mata sulit membedakan 0.9 dari 1.
2. Baris 9 (.kartu-rendah): opacity: 0.5 membuat browser menggambar seluruh kartu — latar, border, dan teks anak — dengan tingkat tembus 50%.
3. Baris 10 (.kartu-penuh): nilai 1 adalah kondisi bawaan; deklarasi ini eksplisit untuk pembanding.

Nilai computed dilaporkan persis seperti yang ditulis: 0.5 tetap terbaca "0.5", dan .5 tanpa nol di depan juga terbaca 0.5. Nilai di luar rentang 0–1 dipotong (clamped) ke rentang tersebut.

opacity vs Kanal Alpha #

Keduanya menghasilkan efek “setengah transparan”, tetapi cakupannya berbeda:

Contoh konkret: panel peringatan yang latar kuningnya perlu tembus 50% tetapi teksnya tetap pekat diselesaikan dengan kanal alpha pada background-color — bukan dengan opacity. Sebaliknya, kartu yang seluruhnya perlu tampak redup (misalnya saat menunggu data) cocok memakai opacity, karena teks ikut meredup dan pembaca memahami bahwa kartu tersebut belum aktif.

opacity < 1 Membentuk Stacking Context #

Efek samping yang jarang disadari: elemen dengan opacity di bawah 1 membentuk stacking context baru. Anak-anaknya yang membawa z-index tinggi tidak dapat menembus keluar grup — mereka hanya bersaing di dalam kartu tersebut. Perilaku ini sering justru diinginkan untuk mengisolasi efek visual, dan kita akan memanfaatkannya secara sadar pada Chapter Blending . Bahasan lengkap tumpukan elemen ada di Section Positioning .

Pola Pemakaian yang Umum #

Tiga situasi yang paling sering memakai opacity: menandai kartu yang belum aktif saat menunggu data, meredupkan konten yang tidak dapat dipilih, dan menurunkan penekanan elemen dekoratif tanpa mengubah warna paletnya. Karena opacity tidak menggeser layout — elemen tetap menempati ruang yang sama — nilai ini aman diubah-ubah tanpa memicu pergeseran tata letak (layout shift).

Opacity juga termasuk properti yang murah dianimasikan: browser cukup mengubah tingkat tembus pandang saat menggambar, tanpa menghitung ulang tata letak. Perpaduan dengan transition dibahas pada Section Transitions dan Animations ; untuk kasus sederhana, ingat pola aksesibilitasnya — elemen yang meredup sementara sebaiknya juga kehilangan kemampuan menerima interaksi, misalnya dengan atribut disabled pada tombol.

Satu keputusan praktis untuk menutup babak ini: bila hanya latarnya yang perlu tembus sementara isi harus tetap terbaca, pindahkan transparansi ke background-color menggunakan kanal alpha, dan sisakan opacity: 1 pada elemen tersebut.

Demo chapter ini menampilkan empat kartu dan satu teks pembanding dengan lima penanda data-expected pada properti opacity dan color.