Mode Gabungan

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