Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Blend Modes: Manipulasi Warna dan Gambar ala Photoshop di CSS

Efek blend modes bekerja dengan cara mencampur nilai warna dari elemen atas (atau gambar) dengan elemen yang ada di bawahnya.

1. Multiply (Menggelapkan)

Mode ini mengalikan warna dari lapisan atas dengan lapisan bawah. Hasilnya selalu warna yang lebih gelap.

• Kegunaan: Sangat efektif untuk menghilangkan latar belakang putih pada gambar atau memberikan tint warna gelap pada foto.

• Hasil: Bagian putih pada gambar akan menjadi transparan, sementara bagian gelap akan semakin pekat.

2. Screen (Menerangkan)

Kebalikan dari Multiply. Mode ini membalikk an warna, mengalikannya, lalu membaliknya kembali.

• Kegunaan: Sering digunakan untuk memberikan efek cahaya, kilauan, atau menghilangkan latar belakang hitam pada gambar.

• Hasil: Bagian hitam akan menjadi transparan, dan bagian terang akan semakin menonjol.

3. Overlay (Kontras)

Mode ini merupakan perpaduan antara Multiply dan Screen. Ia akan menerangkan bagian yang terang dan menggelapkan bagian yang gelap.

• Kegunaan: Memberikan karakter yang kuat pada gambar dan membuat warna menjadi lebih "hidup" atau vivid.

• Hasil: Meningkatkan kontras secara keseluruhan dengan tetap mempertahankan detail pada mid-tones.

Tutorial: Membuat Hero Image dengan Overlay Warna

Mari kita buat header berita untuk SatuMedia yang memiliki gambar latar belakang namun tetap memiliki sentuhan warna biru brand Anda, sehingga teks putih di atasnya sangat mudah dibaca.

Struktur HTML

<header class="hero-banner"> <h1>Inovasi Teknologi 2026h1>
header>

Kode CSS

.hero-banner { height: 400px; width: 100%; display: flex; align-items: center; justify-cont ent: center; /* Urutan: Gambar Latar, lalu Warna Latar */ background-image: url('tech-bg.jpg'); background-color: #004a99; /* Biru khas SatuMedia */ /* Efek Percampuran */ background-ble nd-mode: multiply; /* Properti pendukung agar gambar rapi */ background-size: cover; background-position: center;
} .hero-banner h1 { color: white; font-size: 3rem; text-transform: uppercase; letter-spacing: 2px;
}

4. Perbedaan: background-blend-mode vs mix-blend-mode

Tips Pro untuk Developer

1. Gunakan Gradien: Anda tidak hanya bisa mencampur warna solid dengan gambar. Mencampur linear-gradien t dengan gambar menggunakan overlay sering kali menghasilkan visual yang sangat dramatis dan premium.

2. Efek Hover: Gunakan transisi pada background-color untuk mengubah suasana gambar saat di-hover.

3. Warna Putih/Hitam: Ingat aturan dasarnya: Jika ingin menghilangkan putih, gunakan Multiply. Jika ingin menghilangkan hitam, gunakan Screen.

Teknik ini akan membuat portal riwara.id terlihat jauh lebih elegan karena Anda bisa menyeragamkan nuansa foto yang berbeda-beda hanya dengan satu baris kode CSS!