Podcast CSS - 024: Mode Campuran
Duotone adalah perawatan warna yang populer untuk fotografi yang membuat gambar terlihat hanya terdiri dari dua warna yang kontras: satu untuk highlight dan satu lagi untuk lowlight. Namun, bagaimana cara melakukannya dengan CSS?
Menggunakan mode campuran — dan teknik lain yang telah Anda pelajari, seperti filter dan elemen semu—Anda dapat menerapkan efek ini ke gambar apa pun.
Apa itu mode campuran?
Mode campuran biasanya digunakan dalam alat desain seperti Photoshop untuk menciptakan efek komposisi dengan mencampur warna dari dua atau lebih {i>layer<i}. Dengan mengubah cara campuran warna, Anda dapat mencapai efek visual yang sangat menarik. Anda juga dapat menggunakan mode campuran sebagai utilitas, seperti mengisolasi gambar yang memiliki latar belakang putih, sehingga tampak memiliki latar belakang transparan.
Anda bisa menggunakan sebagian besar mode campuran
yang tersedia di {i>tool<i} desain dengan CSS,
menggunakan
mix-blend-mode
atau
Properti background-blend-mode
.
mix-blend-mode
menerapkan penggabungan ke seluruh elemen
dan background-blend-mode
menerapkan penggabungan ke latar belakang elemen.
Anda menggunakan background-blend-mode
saat memiliki beberapa latar belakang pada elemen
dan ingin mereka semua
menyatu satu sama lain.
mix-blend-mode
memengaruhi seluruh elemen,
termasuk elemen-elemen semu.
Salah satu kasus penggunaan adalah
contoh awal gambar duotone,
yang memiliki {i>layer<i} warna yang diterapkan
pada elemen melalui elemen-elemen semu.
Mode campuran terbagi menjadi dua kategori: dapat dipisahkan dan tidak dapat dipisahkan. Mode campuran yang dapat dipisahkan mempertimbangkan setiap komponen warna, seperti RGB, secara terpisah. Mode campuran yang tidak dapat dipisahkan menganggap semua komponen warna sama.
Kompatibilitas browser
mix-blend-mode
background-blend-mode
Mode penggabungan yang dapat dipisahkan
Normal
Ini adalah mode campuran default dan tidak mengubah apa pun tentang bagaimana elemen menyatu dengan elemen lain.
Kali
Mode campuran multiply
seperti menumpuk beberapa transparansi di atas satu sama lain.
Piksel putih akan tampak transparan,
dan piksel hitam akan tampak hitam.
Apa pun yang ada di antaranya akan mengalikan nilai luminositas (cahaya).
Artinya lampu menjadi
jauh lebih terang dan gelap,
lebih gelap—paling sering menghasilkan hasil yang lebih gelap.
.my-element {
mix-blend-mode: multiply;
}
Layar
Menggunakan screen
akan melipatgandakan nilai light—efek terbalik dari multiply
,
dan sering kali memberikan
hasil yang lebih cerah.
.my-element {
mix-blend-mode: screen;
}
Overlay
Mode campuran ini—overlay
—menggabungkan multiply
dan screen
.
Warna gelap dasar menjadi lebih gelap dan warna terang dasar menjadi lebih terang.
Warna rentang menengah, seperti abu-abu 50%, tidak terpengaruh.
.my-element {
mix-blend-mode: overlay;
}
Gelapkan
Mode campuran darken
membandingkan luminositas warna gelap gambar sumber dan gambar tampilan latar
dan memilih yang paling gelap.
Hal ini dilakukan dengan membandingkan nilai rgb dan bukan luminositas (seperti yang dilakukan multiply
dan screen
),
untuk setiap saluran warna.
Dengan darken
dan lighten
, nilai warna baru sering dibuat dari proses perbandingan ini.
.my-element {
mix-blend-mode: darken;
}
Lighten
Penggunaan lighten
melakukan kebalikan dari darken
.
.my-element {
mix-blend-mode: lighten;
}
Hindari warna
Jika Anda menggunakan color-dodge
, warna latar belakang akan dicerahkan untuk mencerminkan warna sumber.
Warna hitam murni tidak melihat efek dari mode ini.
.my-element {
mix-blend-mode: color-dodge;
}
Pembakaran warna
Mode campuran color-burn
sangat mirip dengan mode campuran multiply
,
tetapi meningkatkan kontras, sehingga menghasilkan rona tengah yang lebih tersaturasi dan mengurangi sorotan.
.my-element {
mix-blend-mode: color-burn;
}
Cahaya keras
Penggunaan hard-light
akan menciptakan kontras yang jelas.
Mode campuran ini menyaring atau mengalikan nilai luminositas.
Jika nilai piksel lebih terang dari 50% abu-abu, gambar akan menjadi lebih terang,
seolah-olah sedang disaring. Jika lebih gelap, warnanya akan dikalikan.
.my-element {
mix-blend-mode: hard-light;
}
Cahaya lembut
Mode campuran soft-light
adalah versi yang lebih ringan dari overlay
.
Ini bekerja dengan cara yang sangat sama dengan kontras yang lebih sedikit.
.my-element {
mix-blend-mode: soft-light;
}
Perbedaan
Cara yang baik untuk menggambarkan cara kerja difference
mirip dengan cara kerja negatif foto.
Mode campuran difference
mengambil nilai selisih setiap piksel,
membalikkan warna cahaya.
Jika nilai warnanya identik, warna tersebut menjadi hitam.
Perbedaan nilainya akan dibalik.
.my-element {
mix-blend-mode: difference;
}
Pengecualian
Menggunakan exclusion
sangat mirip dengan difference
,
namun alih-alih menampilkan warna hitam
untuk piksel yang identik,
warna akan menghasilkan abu-abu 50%, sehingga
menghasilkan output yang lebih lembut dengan kontras yang lebih sedikit.
.my-element {
mix-blend-mode: exclusion;
}
Mode gabungan yang tidak dapat dipisahkan
Anda dapat menganggap mode campuran ini seperti komponen warna HSL. Masing-masing mengambil nilai komponen tertentu dari lapisan aktif dan mencampurnya dengan nilai komponen lain.
Hue
Mode campuran hue
mengambil hue dari warna sumber
dan menerapkannya pada saturasi dan luminositas warna tampilan latar.
.my-element {
mix-blend-mode: hue;
}
Saturasi
Perintah ini berfungsi seperti hue
,
tetapi menggunakan saturation
sebagai mode campuran menerapkan saturasi warna sumber
hingga hue dan luminositas warna tampilan latar.
.my-element {
mix-blend-mode: saturation;
}
Warna
Mode campuran color
akan membuat warna dari hue dan saturasi warna sumber
dan luminositas warna tampilan latar.
.my-element {
mix-blend-mode: color;
}
Luminositas
Terakhir, luminosity
adalah kebalikan dari color
.
Fungsi ini menciptakan warna dengan luminositas warna sumber dan hue serta saturasi warna latar belakang.
.my-element {
mix-blend-mode: luminosity;
}
Properti isolation
Jika Anda menetapkan isolation
properti ini memiliki nilai isolate
,
hal itu akan membuat konteks
penumpukan baru,
yang akan mencegahnya menyatu dengan lapisan tampilan latar.
Seperti yang Anda pelajari dalam modul indeks z, saat Anda membuat konteks tumpukan baru,
lapisan tersebut menjadi lapisan dasar.
Artinya, mode gabungan tingkat induk tidak akan berlaku lagi,
tetapi elemen di dalam elemen dengan kumpulan isolation: isolate
dapat masih digabungkan.
Perlu diketahui bahwa ini tidak berfungsi dengan background-blend-mode
karena properti latar belakang
sudah diisolasi.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang mode campuran
Manakah dari berikut ini yang merupakan mode campuran CSS?
Jika Anda ingin memadukan berbagai warna dengan berbagai cara, gaya mode campuran manakah yang Anda perlukan?