Filter

Podcast CSS - 023: Filter

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

Kombinasi filter CSS dan backdrop-filter memungkinkan kita menerapkan efek dan memburamkan apa yang diperlukan secara real time. Blur dan opasitas adalah dua dari banyak filter yang tersedia. Jadi, mari kita lihat sekilas apa yang dilakukan keduanya dan cara menggunakannya.

Properti filter

Dukungan Browser

  • 53
  • 12
  • 35
  • 9.1

Sumber

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

blur

Ini menerapkan blur gaussian dan satu-satunya argumen yang dapat Anda teruskan adalah radius, yang merupakan seberapa banyak blur yang diterapkan. Nilai ini harus berupa satuan panjang, seperti 10px. Persentase tidak diterima.

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

brightness

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

Untuk menambah atau mengurangi kecerahan elemen, gunakan fungsi kecerahan. Nilai kecerahan dinyatakan sebagai persentase dengan gambar yang tidak berubah dinyatakan sebagai nilai 100%. Nilai 0% mengubah gambar menjadi sepenuhnya hitam, sehingga nilai antara 0% dan 100% membuat gambar kurang terang. Gunakan nilai lebih dari 100% untuk meningkatkan kecerahan.

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

contrast

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

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

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

grayscale

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

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

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

invert

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

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

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

opacity

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

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

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

saturate

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

Filter saturasi sangat mirip dengan filter brightness dan menerima argumen yang sama: angka atau persentase. Bukan menambah atau mengurangi efek kecerahan, saturate menambah atau mengurangi saturasi warna.

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

sepia

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

Anda dapat menambahkan efek tone warna sepia dengan filter ini yang berfungsi seperti grayscale(). Warna cokelat keabu-abuan adalah teknik pencetakan fotografi yang mengubah rona hitam menjadi rona cokelat untuk menghangatkannya. Anda dapat meneruskan angka atau persentase sebagai argumen untuk sepia() yang akan meningkatkan atau mengurangi efek. Tidak meneruskan argumen akan menambahkan efek sepia penuh (setara dengan sepia(100%)).

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

hue-rotate

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

Anda telah mempelajari bagaimana hue di hsl mereferensikan rotasi roda warna dalam pelajaran warna dan filter ini bekerja dengan cara yang sama. Jika Anda meneruskan sudut, seperti derajat atau belokan, hue dari semua warna elemen akan berubah, sehingga mengubah bagian roda warna yang menjadi acuan. Jika Anda tidak memberikan argumen, perintah itu tidak akan melakukan apa pun.

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

drop-shadow

Dukungan Browser

  • 18
  • 12
  • 35
  • 6

Sumber

Anda dapat menerapkan drop shadow dengan gerakan melengkung 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 mengambil parameter bayangan yang berisi nilai offset-x, offset-y, blur, dan warna yang dipisahkan spasi. Hampir identik dengan box-shadow, tetapi kata kunci dan nilai selisih inset tidak didukung.

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

Pelajari lebih lanjut berbagai jenis bayangan dalam modul bayangan.

url

Dukungan Browser

  • 5
  • 12
  • 3
  • 6

Sumber

Filter url memungkinkan Anda menerapkan filter SVG dari elemen atau file SVG yang ditautkan. Anda dapat membaca lebih lanjut filter SVG di sini

Filter tampilan latar

Dukungan Browser

  • 76
  • 17
  • 103
  • 9

Sumber

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

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang filter

Manakah dari berikut ini 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
Tidak
Coba lagi.