Filter

The CSS Podcast - 023: Filters

Misalnya, Anda perlu membuat elemen yang memiliki efek kaca buram yang sedikit buram yang berada di atas gambar. Teks harus berupa teks langsung, bukan gambar. Bagaimana cara melakukannya?

Kombinasi filter CSS dan backdrop-filter memungkinkan kita menerapkan efek dan memburamkan hal yang diperlukan secara real time. Blur dan opasitas adalah dua dari banyak filter yang tersedia, jadi mari kita pelajari dengan cepat fungsi dan cara menggunakannya.

Catatan: Berhati-hatilah saat menempatkan teks di atas gambar, agar teks masih dapat dibaca jika efek filter tidak didukung di browser pengguna.

Properti filter

Browser Support

• 53
• 12
• 35
• 9.1

Source

Anda dapat menerapkan satu atau beberapa filter berikut sebagai nilai untuk filter. Jika Anda salah menerapkan filter, filter lainnya yang ditentukan untuk filter tidak akan berfungsi.

blur

Tindakan ini akan menerapkan pemburaman Gaussian dan satu-satunya argumen yang dapat Anda teruskan adalah radius, yang merupakan jumlah pemburaman yang diterapkan. Nilai ini harus berupa satuan panjang, seperti 10px. Persentase tidak diterima.

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

Untuk meningkatkan atau menurunkan kecerahan elemen, gunakan fungsi kecerahan. Nilai kecerahan dinyatakan sebagai persentase dengan gambar yang tidak berubah dinyatakan sebagai nilai 100%. Nilai 0% akan mengubah gambar menjadi hitam sepenuhnya, sehingga nilai antara 0% dan 100% akan membuat gambar kurang cerah. Gunakan nilai di atas 100% untuk meningkatkan kecerahan.

.my-element {
    filter: brightness(80%);
}

Catatan: Anda juga dapat menggunakan nilai desimal, bukan nilai persentase dalam filter seperti brightness. Untuk menyetel kecerahan 80% dengan desimal, tulis 0.8.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

Tetapkan nilai antara 0% dan 100% untuk mengurangi atau meningkatkan kontras.

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

Anda dapat menerapkan efek hitam putih sepenuhnya dengan menggunakan 1 sebagai nilai untuk grayscale(), atau 0 agar memiliki elemen yang sepenuhnya jenuh. Anda juga dapat menggunakan nilai persentase atau desimal untuk hanya menerapkan efek hitam putih sebagian. Jika Anda tidak meneruskan argumen, elemen akan sepenuhnya berwarna abu-abu. Jika Anda meneruskan nilai yang lebih besar dari 100%, nilai tersebut akan dibatasi hingga 100%.

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

Sama seperti grayscale, Anda dapat meneruskan 1 atau 0 ke fungsi invert() untuk mengaktifkan atau menonaktifkannya. Jika aktif, warna elemen akan sepenuhnya terbalik. Anda juga dapat menggunakan nilai persentase atau desimal untuk hanya menerapkan inversi warna sebagian. Jika Anda tidak meneruskan argumen apa pun ke fungsi invert(), elemen akan sepenuhnya terbalik.

.my-element {
    filter: invert(1);
}

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

Filter opacity() berfungsi seperti properti opacity, tempat Anda dapat meneruskan angka atau persentase untuk meningkatkan atau mengurangi opasitas. Jika Anda tidak meneruskan argumen, elemen akan terlihat sepenuhnya.

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

Filter saturasi sangat mirip dengan filter brightness dan menerima argumen yang sama: angka atau persentase. saturate akan meningkatkan atau menurunkan saturasi warna, bukan meningkatkan atau menurunkan efek kecerahan.

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

Anda dapat menambahkan efek tone sepia dengan filter ini yang berfungsi seperti grayscale(). Nuansa sepia adalah teknik pencetakan fotografi yang mengubah nuansa hitam menjadi nuansa cokelat untuk membuatnya lebih hangat. Anda dapat meneruskan angka atau persentase sebagai argumen untuk sepia() yang meningkatkan atau menurunkan efek. Tidak meneruskan argumen akan menambahkan efek sepia penuh (setara dengan sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

Anda telah mempelajari cara hue di hsl mereferensikan rotasi roda warna dalam pelajaran warna dan filter ini berfungsi dengan cara yang serupa. Jika Anda meneruskan sudut, seperti derajat atau belokan, sudut tersebut akan mengubah hue semua warna elemen, yang mengubah bagian roda warna yang dirujuknya. Jika Anda tidak meneruskan argumen, tidak ada yang akan dilakukan.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

Anda dapat menerapkan drop shadow yang mengikuti lengkungan seperti yang Anda lakukan di alat desain, seperti Photoshop dengan drop-shadow. Bayangan ini diterapkan ke mask alfa yang membuatnya sangat berguna untuk menambahkan bayangan ke gambar potongan. Filter drop-shadow menggunakan parameter bayangan yang berisi nilai offset-x, offset-y, blur, dan warna yang dipisahkan spasi. Ini hampir sama dengan box-shadow, tetapi kata kunci dan nilai spread inset tidak didukung.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Pelajari lebih lanjut berbagai jenis bayangan di modul bayangan.

url

Browser Support

• 5
• 12
• 3
• 6

Source

Filter url memungkinkan Anda menerapkan filter SVG dari elemen atau file SVG tertaut. Anda dapat membaca selengkapnya tentang filter SVG di sini

Filter latar belakang

Browser Support

• 76
• 79
• 103
• 18

Source

Properti backdrop-filter menerima semua nilai fungsi filter yang sama dengan filter. Perbedaan antara backdrop-filter dan filter adalah properti backdrop-filter hanya menerapkan filter ke latar belakang, sedangkan properti filter menerapkannya ke seluruh elemen.

Contoh tepat di awal pelajaran ini adalah contoh yang sempurna, karena Anda tidak ingin teks diburamkan dan idealnya Anda tidak ingin menambahkan elemen HTML tambahan. Kemampuan untuk menerapkan filter hanya ke latar belakang memungkinkan hal tersebut.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang filter

Manakah dari opsi berikut yang merupakan fungsi filter CSS?

grayscale()

🎉

invert()

🎉

flip()

Coba lagi.

multiply()

Coba lagi.

blur()

🎉

brightness()

🎉

Dapatkah CSS menggunakan filter SVG?

Ya

Fungsi filter url() memungkinkan hal ini

Tidak

Coba lagi.