Cara Menggunakan Mode Campuran CSS

Mode campuran CSS adalah cara mudah untuk menambahkan efek gambar langsung di dalam browser Anda.

Karena itu, cara tradisional mengedit dan kemudian menyimpan foto dari solusi perangkat lunak pengedit gambar tidak selalu diperlukan. Sebagai desainer, kami telah menghabiskan banyak waktu untuk menambahkan efek ke gambar dengan alat seperti Adobe Photoshop. Saat Anda melalui tutorial ini, Anda akan melihat bahwa banyak opsi mirip dengan yang ada di Photoshop, tetapi sekarang dapat dilakukan dengan efisiensi gaya CSS.

Akankah mode campuran browser sepenuhnya menghilangkan kebutuhan akan perangkat lunak pengedit gambar? Tidak sepenuhnya, dan tentu saja belum sepenuhnya. Tetapi dukungan CSS dan browser telah berkembang pesat dalam mendukung cara-cara baru dalam mengedit gambar. Kliping dan masking CSS dan SVG, mode campuran, Transformasi 3D, dan lainnya pasti dapat mengurangi ketergantungan yang kita miliki untuk perangkat lunak pengeditan gambar. Saat browser menjadi lebih canggih, kita akan melihat lebih banyak potensi dan (semoga) akan menghabiskan lebih sedikit waktu di Photoshop.

Mode Campuran CSS dan Mode Campuran Campuran CSS

Tutorial ini akan mencakup mode campuran CSS dan bagaimana penggunaannya. Untuk memulai, ada beberapa opsi berbeda yang harus Anda ketahui. Salah satunya adalah efek dengan background-blend-mode dan yang lainnya adalah dengan mix-blend-mode .

Menggunakan background-blend-mode property , Anda dapat memadukan lapisan latar belakang (gambar atau warna) dari suatu elemen. Mode campuran didefinisikan sebagai nilai dan mereka menentukan cara memadukan atau mencampur warna gambar latar belakang dengan warna, atau gambar latar belakang lainnya, di belakangnya.

Apa yang terjadi jika Anda ingin melakukan pencampuran tetapi tidak dengan elemen latar belakang? Elemen dapat digabungkan bersama menggunakan properti mix-blend-mode . Properti ini menjelaskan bagaimana pencampuran seharusnya antara elemen HTML yang ditumpuk. Elemen pada layer yang tumpang tindih akan berbaur dengan elemen di bawahnya. Gambar, teks, batas, atau judul apa pun akan dipengaruhi oleh properti ini.

Contoh Kalikan Adobe Photoshop

Melihat cara tradisional menampilkan mode campuran dalam editor gambar memberi kita gambaran tentang apa yang dapat kita capai dengan mode campuran CSS. Foto berikut dibuat dalam Adobe Photoshop. Gambar berada di lapisan latar belakang sendiri dengan lapisan merah di atasnya. Mode campuran untuk lapisan merah dipilih, yaitu "Multiply." Seperti yang Anda lihat, ada overlay merah. Untuk mendapatkan efek ini, Adobe Photoshop mengambil warna dari lapisan yang telah menerapkan "Multiply", mengalikannya dengan warna pada lapisan di bawahnya, lalu membaginya dengan 255 untuk menampilkan hasilnya.

Efek yang sama ini dapat dicapai dengan CSS yang memungkinkan penyesuaian lebih cepat dan pembaruan mudah.

Contoh Dasar dari Mode Campuran CSS

Contoh sederhana untuk melihat cara kerja mode campuran adalah memadukan gambar dengan a dengan background-color . Pertama, jalur URL ke gambar perlu dideklarasikan, kemudian warna ditentukan. Setelah itu diputuskan, mode campuran perlu dipilih. Multiply telah dipilih di sini untuk menunjukkan bagaimana mode campuran ini memengaruhi tampilan background-image .

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

Mode campuran adalah cara menghitung nilai warna akhir piksel saat lapisan saling tumpang tindih. Setiap mode campuran mengambil nilai warna latar depan dan latar belakang (warna atas dan warna bawah), menghitung nilainya, dan mengembalikan nilai warna. Lapisan terakhir yang terlihat adalah hasil perhitungan mode campuran pada setiap piksel yang tumpang tindih di antara lapisan campuran.

Multiply adalah mode campuran yang sangat populer, tetapi ada juga opsi mode campuran lain yang tersedia: layar, overlay, menggelapkan, meringankan, menghindari warna, membakar warna, cahaya keras, cahaya lembut, perbedaan, pengecualian, rona, saturasi, warna, dan kecerahan. Jika "normal" ditentukan, ini akan mengatur ulang semuanya. Alih-alih melalui detail setiap mode campuran satu per satu, bereksperimen dengan mereka adalah cara terbaik untuk menentukan hasil akhirnya.

Background Blend Mode Dengan Dua Gambar

Daripada memiliki overlay warna pada gambar, melapiskan dua gambar secara bersamaan dapat memberikan efek yang cukup keren. Semudah menambahkan dua gambar latar belakang dalam deklarasi CSS. Pilihan selanjutnya adalah memiliki warna latar belakang (atau tidak). Jika Anda tidak menginginkan warna latar belakang, ini dapat dihapus dan gambar akan menyatu tergantung pada mode campuran yang Anda pilih.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Gradien pada mode campuran Latar Belakang

Daripada menggunakan satu warna saja, gradien juga bisa memberikan beberapa efek unik.

 .gradien-pada-gambar {
 latar belakang:
 gradien linier (ungu 0%, merah 80%),
 linear-gradient(ke kanan, ungu 0%, kuning 100%), url("image.jpg");
 background-blend-mode: layar, perbedaan, meringankan;
 } 

Anda juga akan melihat bahwa contoh ini memiliki beberapa mode campuran latar belakang. Jika satu mode campuran tidak cukup, beberapa dapat digunakan.

Contoh kerja dapat ditemukan di Codepen ini.

Contoh Blend Mode Campuran

Sampai saat ini, fokusnya adalah pada latar belakang. Bagaimana jika elemen lain di halaman ingin memanfaatkan mode campuran? Ini bukan masalah dan jenis mode campuran yang sama tersedia.

Hal-hal terlihat sama dari background-blend-modes dengan pengecualian initial, inherit, dan unset.

• Awal: Pengaturan default dari properti yang tidak mengatur mode campuran.
• Mewarisi: Mewarisi mode campuran dari elemen induknya.
• Unset: Menghapus mode campuran dari suatu elemen.

Contoh Dasar Blend Mode Campuran Dengan Isolasi

Saat bekerja dengan mix-blend-mode , Anda akan menemukan kebutuhan untuk melakukan isolasi. Pertama, penting untuk mengetahui bahwa "penumpukan" itu mungkin, dan ini berharga saat bekerja dengan banyak lapisan. Pikirkan setumpuk kotak. Setiap kotak terpisah dari grup. Di dalam setiap kotak, bisa terdapat beberapa lapis item. Cara berpikir seperti ini akan membantu saat menentukan apa yang perlu diisolasi.

Campuran Teks dan Gambar Dengan mode Mix-blend

Dalam contoh ini, div dengan kelas img-wrap berisi gambar. Gambar memiliki mix-blend-mode multiply. Jadi pada dasarnya, gambar tampak jatuh ke latar belakang.

Untuk mencegah hal ini, div img-wrap (juga berisi teks tajuk) harus merupakan kumpulan konten baru yang ditumpuk sehingga terpisah dari latar belakang elemen body. Ini dilakukan dengan properti isolasi. Nilai defaultnya adalah otomatis, jadi isolation: isolate; akan perlu ditambahkan.

Untuk mengujinya, komentari properti isolasi di div dengan kelas .img-wrap dan periksa hasilnya.

Ini HTML-nya:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

Ini CSSnya. Perhatikan baik-baik isolate pada .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

Contoh kerja dapat ditemukan di Codepen.

Teks Dipotong Dengan Mode Mix-Blend

Beberapa efek tipe yang menarik dapat dibuat dengan mode mix blend. Ada cara mudah untuk membuat teks terpotong. Latar belakang disembunyikan oleh isian pada elemen h1 .

Ini HTML-nya:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

Yang berisi <div> diisi dengan gambar background hutan.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

Judul di dalamnya diberi gaya dengan warna latar opsional. Tajuk memiliki efek tembus pandang dengan gambar latar semi tembus pandang dengan menggunakan mix-blend-mode multiply:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

Contoh kerja dapat ditemukan di Codepen.

Mix-blend-mode dan SVG

File SVG sangat populer di web, dan mode pencampuran CSS juga bekerja dengan baik. Bentuk dapat dengan mudah ditargetkan untuk memberikan mode campuran yang diinginkan.

Isolasi juga merupakan kunci dalam contoh ini. Tanpa mengisolasi lingkaran, latar belakang abu-abu akan mengganggu.

Berikut adalah kode untuk membuat grup lingkaran:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

Berikut adalah gaya CSS:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Contoh ini dapat ditemukan di Codepen.

Dukungan Browser untuk mode Background-blend dan Mix-blend-mode

Dukungan browser cukup bagus, tetapi tidak sepenuhnya konsisten untuk mode campuran latar belakang. Sebelum memulai desain menggunakan fitur ini, pastikan untuk mencentang Can I Use. Saat ini, Edge dan Safari kurang mendapat dukungan. Untuk menangani dukungan terbatas dan bergantung pada browser apa yang perlu didukung, Kueri Fitur CSS mungkin merupakan pilihan yang baik. Jika tidak, memikirkan gambar "campuran" sebagai peningkatan (bukan keharusan) mungkin merupakan taruhan terbaik Anda.

Dukungan browser sedikit lebih baik untuk mode mix-blend. Adalah baik untuk menyadari dukungan parsial. Misalnya, Safari tidak mendukung rona, saturasi, warna, atau luminositas.

Cara terbaik untuk benar-benar mempelajari tentang apa yang dapat dirancang dengan mode campuran adalah dengan bereksperimen. Contoh yang ditampilkan di sini baru saja menggores permukaan. Sungguh menakjubkan jenis grafik apa yang dapat dibuat dengan menggunakan mode campuran. Ini adalah langkah maju yang bagus untuk apa yang dapat dilakukan di web.

Dorong Kebebasan Berkreasi Dengan WP Engine

WP Engine mendukung kebebasan berkreasi di WordPress. Produk perusahaan, yang tercepat di antara semua penyedia WordPress, mendukung 1,5 juta pengalaman digital. Lebih dari 200.000 situs teratas di dunia menggunakan WP Engine untuk memperkuat pengalaman digital mereka daripada siapa pun di WordPress. Temukan lebih lanjut kami di wpengine.com atau hubungi perwakilan kami hari ini!