Blending

Blend mode adalah teknik menghitung warna baru dari dua warna yang bertumpuk: warna elemen dan warna yang berada di belakangnya. CSS menyediakan dua pintu masuk: mix-blend-mode mencampur seluruh elemen dengan apa pun di belakangnya, sedangkan background-blend-mode mencampur lapisan-lapisan background milik satu elemen. Keduanya berasal dari dunia aplikasi desain grafis dan terasa familier bagi siapa pun yang pernah memakai layer mode di aplikasi gambar. Blend mode menuntut latar yang kontras agar efeknya terlihat — di atas latar polos putih, sebagian besar mode hampir tidak menunjukkan apa-apa.

mix-blend-mode pada Elemen #

Tiga mode yang paling sering terpakai:

Contoh berikut meletakkan tiga kotak berwarna di atas panggung bergaris:

.panggung {
  background-image: repeating-linear-gradient(45deg,
    rgb(15 23 42), rgb(15 23 42) 14px,
    rgb(248 250 252) 14px, rgb(248 250 252) 28px);
}
.kotak-multiply   { background: rgb(250 204 21); mix-blend-mode: multiply; }
.kotak-screen     { background: rgb(59 130 246); mix-blend-mode: screen; }
.kotak-difference { background: rgb(248 250 252); mix-blend-mode: difference; }

Mari kita telaah:

1. Baris 2–4 (.panggung): garis gelap-terang diagonal dibuat dengan repeating-linear-gradient dari Chapter Gradients . Pola dua warna ini membuat perhitungan blend terbaca jelas oleh mata.
2. Baris 5 (.kotak-multiply): kuning dikalikan garis di belakangnya — bagian di atas garis putih tetap kuning, bagian di atas garis gelap menjadi zaitun gelap.
3. Baris 6 (.kotak-screen): biru disaring dengan garis — bagian di atas garis putih menjadi hampir putih, di atas garis gelap tetap biru.
4. Baris 7 (.kotak-difference): kotak putih menjadi kebalikan dari garis di belakangnya — terang di atas garis gelap dan gelap di atas garis putih.

Hasil di Browser:

Tiga kotak tampil di atas panggung bergaris hitam-putih: kotak kuning
terlihat menggelap mengikuti garis (multiply), kotak biru terlihat
mencerahkan (screen), dan kotak putih terlihat seperti negatif dari
pola (difference). Nilai computed mix-blend-mode masing-masing terbaca
multiply, screen, dan difference; kotak pembanding tanpa deklarasi
terbaca normal. Wadah grup terbaca isolation: isolate.

background-blend-mode di Dalam Satu Elemen #

Ketika yang ingin dicampur adalah lapisan background milik elemen itu sendiri — misalnya gradient dengan warna dasar — gunakan background-blend-mode. Daftar nilainya mengikuti urutan layer background seperti pada Chapter Multiple Backgrounds :

.panel {
  background-color: rgb(14 165 233);
  background-image: linear-gradient(to right, rgb(2 132 199), rgb(125 211 252));
  background-blend-mode: multiply;
}

Deklarasi di atas mengalikan gradient dengan warna dasar biru, menghasilkan variasi kecerahan yang lebih dalam daripada gradient saja. Mode dapat diberi satu nilai untuk semua layer atau satu nilai per layer, dipisahkan koma.

Mode Lain dan Pola Pemakaian #

Dua belas mode blend yang tersedia merujuk pada spesifikasi komposit yang sama dengan aplikasi desain grafis. Beberapa yang layak dihafalkan namanya: overlay dan soft-light memperkuat kontras foto tanpa memutar warna; luminosity mengambil kecerahan elemen atas dengan warna elemen bawah, dasar dari efek duotone; hue dan saturation bekerja sebaliknya — warna diambil dari elemen atas, kecerahan dari elemen bawah. Untuk efek duotone, praktik yang umum adalah gambar hitam-putih di bawah lapisan warna dengan mode multiply atau screen.

Efek blend mengubah warna efektif di layar, sehingga teks yang berada di atas elemen ber-blend perlu diuji ulang kontrasnya — pasangan warna yang lolos pada Chapter Color Contrast dapat berubah rasionya setelah dicampur. Kebiasaan yang sehat: batasi blend pada lapisan dekoratif, dan pertahankan teks pada elemen tanpa blend.

Dari sisi kinerja, blend menuntut browser menghitung campuran piksel pada setiap frame yang digambar ulang. Efek pada area kecil seperti ikon dan kartu tidak bermasalah; pada area seluas layar penuh, pertimbangkan apakah efek serupa dapat dicapai dengan gradient atau warna semi transparan tanpa blend.

Demo chapter ini memuat enam penanda data-expected pada properti mix-blend-mode, background-blend-mode, dan isolation, ditambah kotak pembanding tanpa blend.