CSS Academy · Pelajaran

mix-blend-mode untuk Pencampuran Lapisan

Campurkan warna elemen dengan konten di bawahnya menggunakan mode pencampuran bergaya Photoshop dalam CSS.

Pelajaran 3 dari 413 langkah

mix-blend-mode untuk Pencampuran Lapisan adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa itu mix-blend-mode?

mix-blend-mode mengontrol cara piksel elemen bercampur dengan piksel elemen di bawahnya — serupa dengan mode pencampuran lapisan di Photoshop. Properti ini memengaruhi seluruh elemen, termasuk latar belakangnya.

Normal (Bawaan)

normal adalah nilai bawaan — tanpa pencampuran. Elemen teratas menutupi apa pun yang berada di bawahnya.

multiply

multiply menggelapkan warna dengan mengalikan nilai piksel. Warna putih menjadi transparan; warna hitam tetap hitam. Cocok untuk menempatkan gambar bernuansa gelap di atas latar belakang berwarna.

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

screen

screen adalah kebalikan dari multiply — mencerahkan warna. Warna hitam menjadi transparan; warna putih tetap putih. Cocok untuk efek cahaya dan pijaran.

<div class="blend-wrapper">
  <div class="glow"></div>
</div>

overlay

overlay menggabungkan multiply dan screen. Area gelap menjadi lebih gelap; area terang menjadi lebih terang. Mode ini meningkatkan kontras sambil mempertahankan rona tengah.

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

difference

difference mengurangkan warna. Warna yang identik menghasilkan warna hitam; warna yang berlawanan menghasilkan warna putih. Mode ini menciptakan efek psikedelik dengan kontras tinggi.

<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>

Cahaya Keras dan Cahaya Lembut

hard-light menerapkan multiply atau screen, bergantung pada warna sumber. soft-light adalah versi yang lebih lembut dengan peningkatan kontras yang lebih kecil.

Mode Pencampuran Warna

Mode-mode ini hanya mencampurkan properti warna tertentu:

hue — mengambil rona dari atas, serta saturasi dan kecerahan dari bawah
saturation — mengambil saturasi dari atas
color — mengambil rona dan saturasi dari atas, serta kecerahan dari bawah
luminosity — mengambil kecerahan dari atas

Mode Warna untuk Dua Nada

Buat gambar dua nada dengan menumpuk elemen berwarna menggunakan mix-blend-mode: color:

<div class="duotone"></div>

Efek Teks Terbalik

Teks yang tampak terbalik pada latar belakang apa pun:

<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>

Konteks Penumpukan dan Mode Pencampuran

mix-blend-mode mencampurkan piksel dengan elemen dalam konteks penumpukan yang sama. Properti isolation: isolate pada elemen induk membuat konteks penumpukan baru, sehingga mode pencampuran tidak memengaruhi elemen di luar grup yang diisolasi.

Pemeriksaan Singkat

Mode pencampuran mana yang membuat bagian putih elemen menjadi transparan dan mempertahankan area berwarna atau gelap — seperti kertas transparan?

Jawab di pelajaran interaktif

Ringkasan

mix-blend-mode mencampurkan piksel elemen dengan konten di bawahnya. Mode utama: multiply (menggelapkan, putih → transparan), screen (mencerahkan, hitam → transparan), overlay (meningkatkan kontras), difference (pengurangan), dan color (mengubah warna gambar). Gunakan isolation: isolate pada elemen induk untuk membatasi cakupan pencampuran pada grup tersebut.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “mix-blend-mode untuk Pencampuran Lapisan” gratis?

Ya — teks lengkap “mix-blend-mode untuk Pencampuran Lapisan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “mix-blend-mode untuk Pencampuran Lapisan”?

Campurkan warna elemen dengan konten di bawahnya menggunakan mode pencampuran bergaya Photoshop dalam CSS. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “mix-blend-mode untuk Pencampuran Lapisan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

filter: blur brightness contrast grayscale
backdrop-filter untuk Efek Kaca Buram
mix-blend-mode untuk Pencampuran Lapisan
Properti isolation

← Kembali ke CSS Academy