Podcast CSS - 024: Mode Gabungan
Duotone adalah perlakuan warna yang populer untuk fotografi, yang membuat gambar terlihat seolah-olah hanya terdiri dari dua warna kontras: satu untuk sorotan dan satu lagi untuk cahaya redup. Bagaimana cara Anda melakukannya dengan CSS?
Dengan 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 gabungan?
Mode campuran biasanya digunakan dalam alat desain seperti Photoshop untuk membuat efek komposisi dengan mencampur warna dari dua atau beberapa lapisan. Dengan mengubah cara pencampuran warna, Anda dapat memperoleh 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 dapat menggunakan sebagian besar mode gabungan yang tersedia di alat desain dengan CSS,
menggunakan
properti mix-blend-mode
atau
background-blend-mode
.
mix-blend-mode
menerapkan pencampuran ke seluruh elemen
dan background-blend-mode
menerapkan pencampuran ke latar belakang elemen.
Anda menggunakan background-blend-mode
jika memiliki beberapa latar belakang pada suatu elemen
dan ingin semuanya menyatu satu sama lain.
mix-blend-mode
memengaruhi seluruh elemen,
termasuk elemen pseudo-nya.
Salah satu kasus penggunaan adalah pada contoh awal gambar duotone,
yang memiliki lapisan warna yang diterapkan pada elemen melalui elemen pseudo-nya.
Mode campuran dibagi menjadi dua kategori: dapat dipisahkan dan tidak dapat dipisahkan. Mode campuran terpisah yang dapat mempertimbangkan setiap komponen warna, seperti RGB, satu per satu. Mode campuran yang tidak dapat dipisahkan mempertimbangkan semua komponen warna secara setara.
Kompatibilitas browser
mix-blend-mode
background-blend-mode
Mode gabungan yang dapat dipisahkan
Normal
Ini adalah mode gabungan default dan tidak mengubah cara elemen berpadu dengan elemen lainnya.
Diperbanyak
Mode campuran multiply
seperti menumpuk beberapa transparansi di atas satu sama lain.
{i>Pixel<i} putih akan tampak transparan,
dan {i>pixel<i} hitam akan tampak hitam.
Apa pun di antaranya akan mengalikan nilai luminositas (cahaya).
Ini berarti lampu menjadi jauh lebih terang dan gelap,
lebih gelap—paling sering menghasilkan hasil yang lebih gelap.
.my-element {
mix-blend-mode: multiply;
}
Layar
Penggunaan screen
akan melipatgandakan nilai cahaya—efek kebalikan menjadi multiply
,
dan sering kali akan menghasilkan 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 kelas menengah, seperti 50% abu-abu, tidak terpengaruh.
.my-element {
mix-blend-mode: overlay;
}
Gelapkan
Mode campuran darken
membandingkan luminositas warna gelap gambar sumber dan gambar latar
serta memilih yang paling gelap dari keduanya.
Hal ini dilakukan dengan membandingkan nilai rgb, bukan luminositas (seperti yang dilakukan multiply
dan screen
),
untuk setiap saluran warna.
Dengan darken
dan lighten
, nilai warna baru sering kali dibuat dari proses perbandingan ini.
.my-element {
mix-blend-mode: darken;
}
Cerahkan
Penggunaan lighten
akan melakukan kebalikan dari darken
.
.my-element {
mix-blend-mode: lighten;
}
Hindari warna
Jika Anda menggunakan color-dodge
, warna latar belakang akan mencerahkan untuk mencerminkan warna sumber.
Warna hitam murni tidak akan melihat efek dari mode ini.
.my-element {
mix-blend-mode: color-dodge;
}
Warna terbakar
Mode gabungan color-burn
sangat mirip dengan mode gabungan multiply
,
tetapi meningkatkan kontras, sehingga menghasilkan midtone yang lebih tersaturasi dan highlight yang dikurangi.
.my-element {
mix-blend-mode: color-burn;
}
Cahaya terang
Menggunakan hard-light
akan menciptakan kontras yang jelas.
Mode campuran ini layar atau mengalikan nilai luminositas.
Jika nilai piksel lebih terang dari 50% abu-abu, gambar akan dicerahkan,
seolah-olah disaring. Jika lebih gelap, jumlah akan dikalikan.
.my-element {
mix-blend-mode: hard-light;
}
Cahaya lembut
Mode campuran soft-light
adalah versi overlay
yang tidak terlalu keras.
Warna ini bekerja dengan cara yang hampir sama dengan lebih sedikit kontras.
.my-element {
mix-blend-mode: soft-light;
}
Perbedaan
Cara yang tepat untuk membayangkan cara kerja difference
sedikit mirip dengan cara kerja foto negatif.
Mode campuran difference
menggunakan nilai perbedaan setiap piksel,
dengan membalik warna terang.
Jika nilai warna identik, warna akan menjadi hitam.
Perbedaan nilai akan dibalik.
.my-element {
mix-blend-mode: difference;
}
Pengecualian
Penggunaan exclusion
sangat mirip dengan difference
,
tetapi alih-alih menampilkan warna hitam untuk piksel identik,
opsi ini akan menampilkan 50% abu-abu, sehingga menghasilkan output yang lebih lembut dengan lebih sedikit kontras.
.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 lainnya.
Corak
Mode campuran hue
mengambil hue warna sumber
dan menerapkannya pada saturasi dan luminositas warna tampilan latar.
.my-element {
mix-blend-mode: hue;
}
Saturasi
Ini berfungsi seperti hue
,
tetapi menggunakan saturation
sebagai mode campuran menerapkan saturasi warna sumber
ke 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
serta luminositas warna tampilan latar.
.my-element {
mix-blend-mode: color;
}
Luminositas
Terakhir, luminosity
adalah kebalikan dari color
.
Warna ini menciptakan warna dengan luminositas warna sumber dan rona serta saturasi warna latar belakang.
.my-element {
mix-blend-mode: luminosity;
}
Properti isolation
Jika Anda menyetel properti isolation
agar memiliki nilai isolate
,
hal ini 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 penumpukan baru,
lapisan tersebut akan menjadi lapisan dasar.
Ini berarti mode gabungan tingkat induk tidak akan berlaku lagi,
tetapi elemen di dalam elemen dengan isolation: isolate
yang ditetapkan masih dapat digabungkan.
Perhatikan bahwa ini tidak berfungsi dengan background-blend-mode
karena properti latar belakang sudah diisolasi.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang mode gabungan
Manakah dari berikut ini yang merupakan mode campuran CSS?
Jika Anda ingin menggabungkan berbagai warna dengan berbagai cara, gaya mode gabungan mana yang akan Anda perlukan?