Podcast CSS - 023: Filter
Katakanlah Anda perlu membangun elemen yang sedikit buram, efek kaca 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 mengaburkan apa yang dibutuhkan secara real time.
Blur dan opasitas adalah dua dari sekian banyak filter yang tersedia,
jadi mari kita lihat sekilas apa yang
mereka semua lakukan dan cara menggunakannya.
Properti filter
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
Ini akan menerapkan blur gaussian dan satu-satunya argumen yang dapat Anda teruskan adalah radius
,
yang merupakan
berapa tingkat blur yang diterapkan.
Ini harus berupa satuan panjang, seperti 10px
. Persentase tidak diterima.
.my-element {
filter: blur(0.2em);
}
brightness
Untuk menambah atau mengurangi kecerahan elemen, menggunakan fungsi kecerahan. Nilai kecerahan dinyatakan sebagai persentase dengan gambar yang tidak berubah dinyatakan sebagai nilai 100%. Nilai 0% akan mengubah gambar menjadi hitam seluruhnya, oleh karena itu, nilai antara 0% dan 100% membuat gambar kurang terang. Gunakan nilai di atas 100% untuk meningkatkan kecerahan.
.my-element {
filter: brightness(80%);
}
contrast
Tetapkan nilai antara 0% dan 100% untuk mengurangi atau meningkatkan kontras.
.my-element {
filter: contrast(160%);
}
grayscale
Anda dapat menerapkan efek hitam putih sepenuhnya menggunakan 1
sebagai nilai untuk grayscale()
,
atau 0
untuk memiliki elemen saturasi penuh.
Anda juga dapat menggunakan nilai persentase atau desimal untuk hanya menerapkan efek hitam putih sebagian.
Jika Anda tidak meneruskan argumen, elemen akan benar-benar berwarna abu-abu.
Jika Anda meneruskan nilai yang lebih besar dari 100%, nilai tersebut akan dibatasi hingga 100%.
.my-element {
filter: grayscale(80%);
}
invert
Sama seperti grayscale
,
Anda dapat meneruskan 1
atau 0
ke fungsi invert()
untuk mengaktifkan atau menonaktifkannya.
Saat aktif, warna elemen akan sepenuhnya dibalik.
Anda juga dapat menggunakan nilai persentase atau desimal untuk hanya menerapkan inversi warna sebagian.
Jika Anda tidak meneruskan argumen apa pun ke dalam fungsi invert()
,
elemen akan benar-benar dibalik.
.my-element {
filter: invert(1);
}
opacity
Filter opacity()
berfungsi
seperti properti opacity
,
tempat Anda bisa meneruskan angka atau persentase untuk menambah atau mengurangi opasitas.
Jika Anda tidak meneruskan argumen, elemen akan terlihat sepenuhnya.
.my-element {
filter: opacity(0.3);
}
saturate
Filter saturate sangat mirip dengan filter brightness
dan menerima argumen yang sama:
angka atau persentase.
Alih-alih menambah atau mengurangi
efek kecerahan,
saturate
meningkatkan atau mengurangi saturasi warna.
.my-element {
filter: saturate(155%);
}
sepia
Anda dapat menambahkan efek rona warna cokelat keabu-abuan dengan filter ini yang berfungsi seperti grayscale()
.
Warna sepia adalah teknik cetak fotografi yang mengubah rona hitam menjadi coklat untuk menghangatkan warna tersebut.
Anda dapat meneruskan angka atau persentase sebagai argumen untuk sepia()
yang meningkatkan atau mengurangi efeknya.
Meneruskan argumen tidak akan menambahkan efek sepia penuh (setara dengan sepia(100%)
).
.my-element {
filter: sepia(70%);
}
hue-rotate
Anda telah mempelajari bagaimana hue di hsl
merujuk pada rotasi roda warna di
pelajaran warna dan filter ini berfungsi dengan cara yang sama.
Jika Anda melewati suatu sudut, seperti derajat atau belokan,
menggeser hue dari
semua warna elemen,
mengubah bagian {i>color
wheel<i} yang dirujuknya. Jika Anda meneruskan argumen, tidak akan melakukan apa pun.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Anda dapat menerapkan {i>drop shadow<i}
kurva {i>drop shadow<i} seperti yang Anda lakukan pada {i>tool<i} 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 sama dengan box-shadow
,
tetapi kata kunci inset
dan nilai sebar tidak didukung.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Pelajari lebih lanjut berbagai jenis bayangan dalam modul shadows.
url
Filter url
memungkinkan Anda menerapkan filter SVG dari elemen atau file SVG yang ditautkan.
Anda dapat
baca selengkapnya tentang filter SVG di sini
Filter tampilan latar
Filter drop-down
menerima semua nilai fungsi filter yang sama seperti filter
.
Perbedaan antara backdrop-filter
dan filter
adalah bahwa properti backdrop-filter
hanya menerapkan filter ke latar belakang,
dengan properti filter
menerapkannya ke seluruh elemen.
Contoh yang tepat di awal pelajaran ini adalah contoh yang tepat, karena Anda tidak ingin teks menjadi buram dan idealnya Anda tidak ingin menambahkan elemen HTML tambahan. Kemampuan menerapkan filter hanya ke tampilan latar memungkinkan hal tersebut.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang filter
Manakah dari berikut ini yang merupakan fungsi filter CSS?
flip()
invert()
brightness()
grayscale()
blur()
multiply()
Bisakah CSS menggunakan filter SVG?