Fungsi Properti Filter pada CSS

06/01/2020    Risman Hakim    67     Website

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).

<!-- Efek 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.

<!-- Efek contrast -->
<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.

<!-- Efek drop shadow -->
<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 .

<!-- Efek brightness -->
<style>
    img {
      filter: brightness(200%);
    }
</style>
<img src="image.jpg" alt="kucing">

5. Efek Grayscale

Efek untuk mengubah gambar pada mode grayscale.

<!-- Efek grayscale -->
<style>
    img {
      filter: grayscale(100%);
    }
</style>
<img src="image.jpg" alt="kucing">

6. Efek Hue Rotasi

Efek untuk mengatur rotasi pada elemen.

<!-- Efek hue rotasi -->
<style>
    img {
      filter: hue-rotate(45deg);
    }
</style>
<img src="image.jpg" alt="kucing">

7. Efek Invert

Efek untuk membalikan sampel elemen (gambar).

<!-- Efek invert -->
<style>
    img {
      filter: invert(100%);
    }
</style>
<img src="image.jpg" alt="kucing">

8. Efek Opacity

Efek untuk mengatur tingkat opacity.

<!-- Efek opacity -->
<style>
    img {
      filter: opacity(50%);
    }
</style>
<img src="image.jpg" alt="kucing">

9. Efek Saturate

Efek untuk menjenuhkan elemen (gambar).

<!-- Efek saturate -->
<style>
    img {
      filter: saturate(200%);
    }
</style>
<img src="image.jpg" alt="kucing">

10. Efek Sepia

Efek untuk mengatur gambar pada mode sepia.

<!-- Efek 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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More