CSS - Mod Cara campur Warna: Mengembangkan Kuasa Penyamaan Warna

Hai, para desainer web yang sedang belajar dan penggemar CSS! Hari ini, kita akan melihat dunia yang menarik dari CSS mix-blend-mode. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan berwarna ini. Jadi, ambillah kuas virtual Anda, dan mari kita mulai mencampur!

Apa itu mix-blend-mode?

Sebelum kita masuk ke detil teknis, mari kita pahami apa saja mix-blend-mode. Bayangkan Anda adalah seorang seniman digital dengan kuas ajaib yang dapat mencampur warna dengan cara yang Anda belum pernah lihat sebelumnya. Itu sebenarnya 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 kacamata khusus yang membuat Anda melihat dunia dalam cahaya yang baru - atau dalam hal ini, dalam kombinasi warna yang baru!

Nilai yang Mungkin

Sekarang, mari kita lihat berbagai mode campur yang tersedia bagi kita. Pahami ini sebagai berbagai kuas dalam set alat seni digital Anda:

Mode Campur	Deskripsi
normal	Mode default. Tidak ada pencampuran yang diterapkan.
multiply	Mengalikan warna, menghasilkan gambar yang lebih gelap.
screen	Mengalikan nilai inverse warna, menghasilkan gambar yang lebih terang.
overlay	Menggabungkan mode multiply dan screen.
darken	Memilih warna yang lebih gelap antara warna campur dan warna dasar.
lighten	Memilih warna yang lebih terang antara warna campur dan warna dasar.
color-dodge	Menyemprotkan warna dasar untuk mencerminkan warna campur.
color-burn	Menggelapkan warna dasar untuk mencerminkan warna campur.
hard-light	Mengalikan atau menyaring warna, tergantung pada warna campur.
soft-light	Menggelapkan atau menyemprotkan warna, tergantung pada warna campur.
difference	Mengurangkan warna yang lebih gelap dari warna yang lebih terang.
exclusion	Mirip dengan difference, tapi dengan kontras yang rendah.
hue	Menggunakan nuansa warna campur dengan kejenuhan dan kecerahan warna dasar.
saturation	Menggunakan kejenuhan warna campur dengan nuansa dan kecerahan warna dasar.
color	Menggunakan nuansa dan kejenuhan warna campur dengan kecerahan warna dasar.
luminosity	Menggunakan kecerahan warna campur dengan nuansa dan kejenuhan warna dasar.

Terapkan Pada

Properti mix-blend-mode dapat diterapkan ke setiap elemen. Namun, biasanya digunakan untuk gambar, teks, dan elemen SVG. Itu seperti memiliki pisau Switzerland desain - multifungsi dan siap untuk tantangan kreatif apa pun!

Sintaks

Sintaks untuk mix-blend-mode cukup sederhana:

elemen {
mix-blend-mode: <mode-campur>;
}

Di mana <mode-campur> adalah salah satu nilai dari tabel kami di atas. Mudah-mudahan, jeruk squeezy!

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

Ayo kita praktikkan dengan 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 diletakkan di atas kotak merah dan memiliki mix-blend-mode 'screen'. Ini menciptakan warna yang lebih terang di area yang overlaping.

Cobalah mengubah mix-blend-mode ke nilai yang berbeda dari tabel kami 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>Hello, World!</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 manfaat dari mix-blend-mode. Mari kita buat contoh sederhana dengan lingkaran SVG yang overlaping.

<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 menggelapkan area yang overlaping.

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 yang cerah di mana warna teks berubah berdasarkan gradien latar belakang.

Dan begitu juga, teman-teman! Kita telah menjelajahi dunia yang menakjubkan dari CSS mix-blend-mode. Ingat, kunci untuk menguasai properti ini adalah eksperimen. Jangan takut untuk mencoba mode campur yang berbeda dan lihat apa saja efek menarik yang Anda bisa buat.

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

Credits: Image by storyset