Fungsi Properti Filter pada CSS
Fungsi Properti Filter pada CSS - Pada pembahasan CSS kali ini saya akan menjelaskan beberapa fungsi yang bisa dilakukan oleh properti filter. Properti filter CSS mempunyai beberapa fungsi untuk melakukan berbagai efek terhadap suatu elemen biasanya gambar, efek yang bisa dilakukan properti filter misalnya: saturasi warna, brightness, contrast, efek blur, grayscale, sepia, drop-shadow, invert, hue-rotate, opacity. Nah, berikut ini akan saya contohkan bagaimana penggunaan properti filter pada elemen.
1. Efek Blur
Efek untuk membuat elemen terlihat kabur (blur).
<style>
img {
filter: blur(10px);
}
</style>
<img src="image.jpg" alt="kucing">
2. Efek Contrast
Efek untuk mengatur tingkat kontras warna pada suatu elemen.
<style>
img {
filter: contrast(100%);
}
</style>
<img src="image.jpg" alt="kucing">
3. Efek Drop Shadow
Efek shadow yang bisa diterapkan pada elemen gambar, teks.
<style>
img {
filter: drop-shadow(5px 5px 10px red);
}
</style>
<img src="image.jpg" alt="kucing">
4. Efek Brightness
Efek untuk mengatur tingkat kecerahan suatu elemen .
<style>
img {
filter: brightness(200%);
}
</style>
<img src="image.jpg" alt="kucing">
5. Efek Grayscale
Efek untuk mengubah gambar pada mode grayscale.
<style>
img {
filter: grayscale(100%);
}
</style>
<img src="image.jpg" alt="kucing">
6. Efek Hue Rotasi
Efek untuk mengatur rotasi pada elemen.
<style>
img {
filter: hue-rotate(45deg);
}
</style>
<img src="image.jpg" alt="kucing">
7. Efek Invert
Efek untuk membalikan sampel elemen (gambar).
<style>
img {
filter: invert(100%);
}
</style>
<img src="image.jpg" alt="kucing">
8. Efek Opacity
Efek untuk mengatur tingkat opacity.
<style>
img {
filter: opacity(50%);
}
</style>
<img src="image.jpg" alt="kucing">
9. Efek Saturate
Efek untuk menjenuhkan elemen (gambar).
<style>
img {
filter: saturate(200%);
}
</style>
<img src="image.jpg" alt="kucing">
10. Efek Sepia
Efek untuk mengatur gambar pada mode sepia.
<style>
img {
filter: sepia(50%);
}
</style>
<img src="image.jpg" alt="kucing">
Sangat mudah cara penggunaan properti filter, tinggal menentukan elemen yang mau diterapkan efek filter. Baiklah cukup sekian pembahasan tentang Fungsi Properti Filter pada CSS, semoga bermanfaat dan sampai jumpa diartikel DUMETSchool selanjutnya.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
