CSS - Mix Blend Mode: Melepaskan Kekuatan Penyamaan Warna

Hai, para desainer web yang bersemangat dan penggemar CSS! Hari ini, kita akan manduk ke dalam dunia yang menarik dari CSS mix-blend-mode. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan berwarna ini. Jadi, ambil pensel virtual Anda, dan mari kita mulai penyamaan!

Apa Itu mix-blend-mode?

Sebelum kita melompat ke detil teknis, mari kita pahami apa itu mix-blend-mode. Bayangkan Anda adalah seorang seniman digital dengan pensel ajaib yang dapat mencampur warna dalam cara yang Anda belum pernah lihat sebelumnya. Itu sebetulnya apa yang mix-blend-mode lakukan untuk kita di CSS!

mix-blend-mode adalah properti CSS yang menentukan bagaimana konten elemen harus dicampur dengan konten elemen induknya dan latar belakang elemen. Itu seperti memiliki set kacamata khusus yang membuat Anda melihat dunia dalam cahaya baru – atau dalam hal ini, dalam kombinasi warna baru!

Nilai yang Mungkin

Sekarang, mari kita lihat berbagai mode pencampuran yang tersedia untuk kita. Bayangkan ini seperti berbagai pensel di set alat seni digital Anda:

Mode Pencampuran	Deskripsi
normal	Mode default. Tidak ada pencampuran yang diterapkan.
multiply	Mengalikan warna, menghasilkan gambar yang lebih gelap.
screen	Mengalikan inverse warna, menghasilkan gambar yang lebih terang.
overlay	Menggabungkan mode multiply dan screen.
darken	Memilih warna yang lebih gelap antara pencampuran dan warna dasar.
lighten	Memilih warna yang lebih terang antara pencampuran dan warna dasar.
color-dodge	Membuat warna dasar lebih terang untuk merefleksikan warna pencampuran.
color-burn	Membuat warna dasar lebih gelap untuk merefleksikan warna pencampuran.
hard-light	Mengalikan atau menyaring warna, tergantung pada warna pencampuran.
soft-light	Membuat warna lebih gelap atau lebih terang, tergantung pada warna pencampuran.
difference	Mengurangkan warna yang lebih gelap dari warna yang lebih terang.
exclusion	Mirip dengan difference, tapi dengan kontras yang rendah.
hue	Menggunakan hue warna pencampuran dengan kebanjiran dan luminositas warna dasar.
saturation	Menggunakan kebanjiran warna pencampuran dengan hue dan luminositas warna dasar.
color	Menggunakan hue dan kebanjiran warna pencampuran dengan luminositas warna dasar.
luminosity	Menggunakan luminositas warna pencampuran dengan hue dan kebanjiran warna dasar.

Terapkan Pada

Properti mix-blend-mode dapat diterapkan pada setiap elemen. Namun, hal ini biasanya digunakan dengan gambar, teks, dan elemen SVG. Itu seperti memiliki pisau Swiss Army desain – multifungsi dan siap untuk tantangan kreatif apa pun!

Sintaks

Sintaks untuk mix-blend-mode cukup sederhana:

element {
mix-blend-mode: <blend-mode>;
}

Di mana <blend-mode> adalah salah satu nilai dari tabel di atas. Mudah-mudahan!

CSS mix-blend-mode - Nilai mix-blend-mode yang Berbeda

Mari kita meraba-raba beberapa contoh kode. Kita akan mulai dengan scenario sederhana: mencampur dua elemen div yang overlaping.

<div class="container">
<div class="box red"></div>
<div class="box blue"></div>
</div>

.container {
position: relative;
width: 200px;
height: 200px;
}

.box {
position: absolute;
width: 100px;
height: 100px;
}

.red {
background-color: red;
top: 0;
left: 0;
}

.blue {
background-color: blue;
top: 50px;
left: 50px;
mix-blend-mode: screen;
}

Dalam contoh ini, kita memiliki dua kotak: satu merah dan satu biru. Kotak biru ditempatkan di atas kotak merah dan memiliki mix-blend-mode 'screen'. Ini menciptakan warna yang lebih terang di area重叠.

Coba mengubah mix-blend-mode ke nilai yang berbeda dari tabel kita dan lihat bagaimana hasilnya berubah. Itu seperti melakukan eksperimen sains berwarna!

CSS mix-blend-mode - Dengan HTML

Sekarang, mari kita lihat bagaimana mix-blend-mode bekerja dengan elemen HTML. Kita akan membuat contoh sederhana dengan teks di atas gambar.

<div class="image-container">
<img src="landscape.jpg" alt="Lanskap yang indah">
<h1>Hallo, Dunia!</h1>
</div>

.image-container {
position: relative;
}

.image-container img {
width: 100%;
height: auto;
}

.image-container h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: white;
mix-blend-mode: difference;
}

Dalam contoh ini, kita memiliki teks putih di atas gambar. Dengan menetapkan mix-blend-mode ke 'difference', warna teks akan berubah berdasarkan warna gambar yang mendasar, menciptakan efek yang menarik.

CSS mix-blend-mode - Dengan SVG

Elemen SVG juga dapat mendapat keuntungan dari mix-blend-mode. Mari kita buat contoh sederhana dengan overlapping lingkaran SVG.

<svg width="200" height="200">
<circle cx="70" cy="70" r="60" fill="red" />
<circle cx="130" cy="130" r="60" fill="blue" mix-blend-mode="multiply" />
</svg>

Dalam SVG ini, kita memiliki dua lingkaran: satu merah dan satu biru. Lingkaran biru memiliki mix-blend-mode 'multiply', yang memperkeras area overlapping.

CSS mix-blend-mode - Dengan Teks

Akhirnya, mari kita bersenang-senang dengan teks! Kita akan membuat efek teks berwarna cerah menggunakan mix-blend-mode.

<div class="text-container">
<h1>CSS is Awesome!</h1>
</div>

.text-container {
background: linear-gradient(to right, red, blue);
padding: 20px;
}

.text-container h1 {
font-size: 48px;
color: white;
mix-blend-mode: difference;
}

Ini menciptakan efek teks berwarna cerah di mana warna teks berubah berdasarkan gradien latar belakang.

Dan itu saja, teman-teman! Kita telah mengeksplorasi dunia yang menakjubkan dari CSS mix-blend-mode. Ingat, kunci untuk menguasai properti ini adalah eksperimen. Jangan takut untuk bermain dengan mode pencampuran yang berbeda dan lihat apa saja efek yang menakjubkan yang Anda dapat buat.

Sementara kita menutup perjalanan berwarna ini, saya teringat kutipan dari pelukis terkenal Bob Ross: "Tidak ada kesalahan, hanya kecelakaan yang bahagia." Jadi, maju saja, campur dengan takut, dan buat kecelakaan bahagia Anda sendiri dengan CSS mix-blend-mode!

Credits: Image by storyset