Cara Menggunakan Filter CSS dan Blend Mode untuk Membuat Efek Visual

Filter CSS dan mode campuran memungkinkan Anda menerapkan efek visual dengan mudah ke halaman web Anda. Filter adalah sekumpulan fungsi CSS standar yang digunakan untuk menyesuaikan rendering gambar atau elemen HTML lainnya. Sementara mode campuran menentukan bagaimana suatu elemen harus berbaur dengan latar belakang atau elemen tetangganya.

Menggunakan Filter CSS

Anda menerapkan filter CSS menggunakan Saring properti dan properti yang menentukan jenis efek yang diterapkan. Setiap properti filter adalah fungsi CSS, yaitu bekerja mirip dengan variabel CSS fungsi. Ia menerima parameter untuk menentukan seberapa besar pengaruh filter terhadap elemen yang diberi gaya.

Ada 10 fungsi filter CSS yang tersedia untuk mengatur gaya elemen HTML Anda:

• mengaburkan()
• kecerahan()
• kontras()
• bayangan jatuh()
• skala abu-abu()
• rona-putar()
• membalikkan()
• kegelapan()
• jenuh()
• warna coklat tua()

Anda dapat menggunakan filter ini satu per satu atau dalam kombinasi untuk membuat gaya unik dan menyempurnakan tampilan elemen HTML Anda.

Beberapa dari filter ini bekerja lebih baik dengan yang lain bila digunakan dengan cara yang benar.

Berikut adalah contoh menggabungkan filter CSS untuk mendapatkan efek visual yang berbeda pada elemen gambar.

1. Skala abu-abu dan Sepia

Itu skala abu-abu() filter menghapus semua informasi warna dari elemen gambar atau teks. Filter mengambil nilai antara 0 dan 1, dengan 0 berarti warna asli dan 1 berarti efek skala abu-abu penuh.

Itu warna coklat tua() filter menerapkan efek warna sepia ke elemen gambar atau teks. Filter juga mengambil nilai antara 0 dan 1.

Misalnya:

img {
Saring: skala abu-abu(14%) warna coklat tua(30%);
}

Menggabungkan skala abu-abu() sebesar 14% dan warna coklat tua() sebesar 30% dapat membuat efek vintage atau retro pada gambar Anda.

2. Balikkan dan Jenuhkan

Itu jenuh() filter menambah atau mengurangi saturasi elemen gambar atau teks. Filter mengambil nilai antara 0 dan tak terhingga, dengan 1 sebagai warna asli dan nilai yang lebih tinggi meningkatkan saturasi.

Itu membalikkan() filter akan membalikkan warna gambar atau elemen teks dengan membalik rona setiap warna yang ada sebesar 180 derajat pada roda warna. Ini berarti filter mengubah tingkat kecerahan dan saturasi elemen sambil mempertahankan rona.

Misalnya:

img {
Saring: membalikkan(30%) jenuh(75%);
}

Kode ini membalikkan warna gambar dan meningkatkan saturasi sebesar 75%.

3. Hue-Putar dan Kontras

Itu rona-putar() filter memutar rona elemen gambar atau teks, yang berarti mengubah warna keseluruhan elemen sambil mempertahankan tingkat kecerahan dan saturasi. Jumlah rotasi dapat ditentukan dalam derajat, dengan 0 mewakili warna asli dan 360 mewakili rotasi penuh kembali ke warna aslinya.

Menggabungkan rona-putar() Dan kontras() filter dapat membuat efek hidup dan penuh warna pada gambar Anda.

Misalnya:

img {
Saring: hue-rotate(10deg) kontras(150%);
}

Hue-rotate dapat menerima nilai deg, lulusan, rad, atau berbelok. Kode di atas memutar rona gambar sebesar 10 derajat dan meningkatkan kontras.

4. Kecerahan dan Buram

Filter kecerahan dan keburaman sangat jelas. Yang pertama menyesuaikan kecerahan gambar Anda, dan yang terakhir mengontrol tingkat keburaman yang diterapkan.

Menggabungkan kecerahan() Dan mengaburkan() filter dapat membuat efek indah dan lembut pada gambar Anda.

Misalnya:

img {
Saring: kecerahan(0.8) mengaburkan(5px);
}

Kode di atas mengurangi kecerahan 0.8 (80%) dan menerapkan a 5px efek blur pada gambar.

5. Drop-Shadow dan Opacity

Efek bayangan jatuh adalah efek visual di mana elemen muncul untuk membuat bayangan pada permukaan di belakangnya, memberikan ilusi kedalaman dan dimensi. Drop shadow sering diterapkan pada teks atau gambar untuk menciptakan kesan pemisahan antara elemen dan latar belakang.

Sementara itu, filter opacity mengontrol transparansi suatu elemen.

Menggabungkan bayangan jatuh() Dan kegelapan() filter dapat membuat efek halus pada elemen teks Anda.

Misalnya:

.teks-efek {
mengubah: menerjemahkan(-50%, -50%);
warna: hitam;
bayangan jatuh: 10px 9px 9pxkrem;
kegelapan: 70%;
}

Dalam contoh ini, bayangan jatuh diposisikan 10 piksel ke kanan dan 9 piksel ke bawah, dengan radius buram 9 piksel. Warna bayangan ditentukan sebagai krem. Opasitas 70% juga ditentukan.

Menggunakan Mode Campuran CSS

Mode campuran CSS mengontrol bagaimana konten elemen menyatu dengan latar belakang atau elemen lain, memungkinkan efek komposisi kreatif.

Beberapa kasus penggunaan paling populer untuk mode campuran CSS meliputi:

• Membuat gradien: Blend mode dapat digunakan untuk membuat beberapa gradien latar belakang CSS transisi antar warna itu, memberi Anda cara yang mudah dan efisien untuk menambah kedalaman dan dimensi pada desain Anda.
• Menambahkan tekstur: Anda juga dapat menggunakan mode campuran untuk menambahkan tekstur ke latar belakang, gambar, dan elemen lain di halaman. Ini bisa menjadi cara yang bagus untuk menciptakan tampilan yang unik dan menambah daya tarik visual pada elemen polos.
• Menyesuaikan warna: Dengan mode paduan, Anda dapat menyesuaikan warna elemen pada halaman, termasuk menyesuaikan warna latar belakang. Ini akan memungkinkan Anda untuk dengan mudah membuat efek seperti overlay warna atau gambar berwarna.

Dua mode campuran yang paling umum adalah background-blend-mode Dan mix-blend-mode. Kedua properti memiliki 15 nilai yang sama: normal, perkalian, layar, overlay, penggelapan, penerangan, penghindaran warna, saturasi, pembakaran warna, luminositas, perbedaan, cahaya keras, cahaya lembut, pengecualian, dan rona.

Kamu harus menggunakan background-blend-mode saat Anda memiliki beberapa tata letak latar belakang, seperti gambar latar belakang pada sebuah elemen, dan ingin semuanya berbaur satu sama lain.

Anda juga bisa menggunakan mix-blend-mode untuk memadukan konten elemen tertentu dengan konten induk langsungnya. Itu mix-blend-mode biasanya digunakan untuk memadukan konten latar depan seperti teks, bentuk, atau gambar.

Berikut adalah contoh penggunaan mix-blend-mode untuk memadukan teks dan gambar.

HTML:

<divkelas="wadah">
<img
 src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? otomatis=kompres&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? otomatis=kompres&cs=tinysrgb&w=1260&h=750&dpr=2"
 class="gambar-latar belakang"
 />
<divkelas="isi">
<h1>Selamat datangh1>
<P>Halo Pengguna!P>
div>
div>

CSS:

.wadah {
posisi: mutlak;
lebar: 100%;
tinggi: 100%;
}
.gambar latar belakang {
lebar: 100%;
tinggi: 100%;
sesuai objek: menutupi;
}
.isi {
posisi: mutlak;
atas: 50%;
kiri: 50%;
mengubah: menerjemahkan(-50%, -50%);
perataan teks: tengah;
mix-blend-mode: perbedaan;
}
h1 {
ukuran huruf: 60px;
warna: putih;
}
P {
ukuran huruf: 40px;
warna: putih;
}

Itu perbedaan mode campuran menghitung perbedaan absolut antara nilai warna teks dan gambar gelap yang mendasarinya.

Dalam skenario ini, warna teks akan berinteraksi dengan latar belakang gelap, menghasilkan efek kontras yang tinggi.

Menggabungkan Filter dan Blend Mode

Anda dapat menggabungkan filter dan memadukan mode untuk membuat efek yang lebih menarik secara visual. Dengan menggunakan kedua properti secara bersamaan, Anda dapat mencapai hasil unik dan kreatif yang sulit ditiru dengan properti CSS lainnya.

Berikut adalah contoh yang menggabungkan filter dan mode campuran untuk menciptakan efek yang lebih kompleks:

.elemen-saya {
Saring: kecerahan(150%) hue-rotate(180deg) bayangan jatuh(0px 0px 10pxrgba(0, 0, 0, 0.5));
mix-blend-mode: layar;
}

Kode ini menggabungkan filter; kecerahan, hue-rotate, bayangan jatuh, dan a mix-blend-mode berharga layar ke gambar. Ini meningkatkan kecerahan hingga 150%, sementara hue-putar akan membalikkan warna gambar sebesar 180 derajat.

Kemudian juga, drop shadow diterapkan. Terakhir, the layar nilai untuk mode campuran akan menggabungkan warna gambar dengan latar belakang yang mendasarinya, menghasilkan efek di mana warna yang lebih terang diintensifkan, dan warna yang lebih gelap dicampur dengan latar belakang.

Menguasai Filter dan Blend Mode

Anda telah belajar tentang berbagai jenis filter CSS dan bagaimana Anda dapat menerapkannya ke elemen HTML Anda. Dengan menggunakan berbagai fungsi filter seperti blur, contrast, dan hue-rotate, Anda dapat memodifikasi tampilan gambar Anda. Anda juga telah melihat contoh mode campuran dalam aksi dan bagaimana mereka dapat digunakan untuk membuat desain yang unik.

Jika Anda lebih banyak bereksperimen dengan teknik ini, Anda dapat menambahkan tingkat ketertarikan visual ekstra pada desain Anda.