Atribut filter CSS

Definisi dan penggunaan

Properti filter menentukan efek visual elemen (biasanya <img>) seperti blur dan saturasi.

Silakan lihat:

Pelajaran CSS:Gambar CSS

Panduan Referensi DOM HTML:Properti filter

Contoh

Mengubah semua gambar menjadi hitam putih (100% abu-abu):

img {
  filter: grayscale(100%);
}

Coba sendiri

Petunjuk:Lebih banyak contoh TIY dapat ditemukan di bawah halaman.

CSS Grammar

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Petunjuk:Untuk menggunakan beberapa filter, pisahkan setiap filter dengan spasi (lihat contoh lebih banyak di bawah halaman).

Detil teknis

Nilai default: none
Warisan: Tidak
Pembuatan animasi: Dukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Sintaks JavaScript: object.style.filter="grayscale(100%)"

Fungsi filter

Keterangan:Gunakan persen untuk filter (contoh 75%), menerima nilai desimal (contoh 0.75).

Filter Deskripsi
none Nilai default. Tentukan efek tak ada.
blur(px)

Aplikasikan efek blur ke gambar. Nilai yang lebih besar akan menghasilkan blur yang lebih banyak.

Jika nilai disebutkan, gunakan 0.
brightness(%)

Tunjang kecerahan gambar.

  • 0% akan membuat gambar menjadi hitam sepenuhnya.
  • Nilai default adalah 100%, yang mewakili gambar asli.
  • Nilai yang lebih dari 100% akan memberikan hasil yang lebih terang.
contrast(%)

Tunjang kontras gambar.

  • 0% akan membuat gambar menjadi hitam sepenuhnya.
  • Nilai default adalah 100%, yang mewakili gambar asli.
  • Nilai lebih dari 100% akan memberikan hasil yang lebih kontras.
drop-shadow(h-shadow v-shadow blur spread color)

Aplikasikan efek bayangan ke gambar.

Nilai yang mungkin:

  • h-shadow - wajib. Tentukan nilai piksel bayangan horizontal. Nilai negatif akan menempatkan bayangan di sisi kiri gambar.
  • v-shadow - wajib. Tentukan nilai piksel bayangan vertikal. Nilai negatif akan menempatkan bayangan di atas gambar.

blur - pilihan. Ini adalah nilai ketiga, satuan harus dalam piksel. Tambahkan efek blur ke bayangan. Nilai yang lebih besar akan menciptakan blur yang lebih banyak (bayangan akan menjadi lebih besar dan lebih terang). Tidak diizinkan nilai negatif. Jika nilai tidak disebutkan, akan digunakan 0 (bingkai bayangan sangat tajam).

spread - pilihan. Ini adalah nilai keempat, satuan harus dalam piksel. Nilai positif akan menyebabkan ekspansi bayangan dan pengembangan, sedangkan nilai negatif akan menyebabkan pengurangan bayangan. Jika nilai tidak disebutkan, akan digunakan 0 (bayangan sama besar dengan ukuran elemen).

Keterangan:Chrome, Safari, dan Opera, mungkin serta peramban lainnya, tidak mendukung panjang keempat; jika ditambahkan, maka tidak akan ditampilkan.

color - pilihan. Tambahkan warna ke bayangan. Jika tidak disebutkan, warna bergantung pada peramban (biasanya hitam).

Contoh ini menciptakan bayangan merah, arah horizontal dan vertikal sebesar 8px, dengan efek blur sebesar 10px:

filter: drop-shadow(8px 8px 10px red);

Petunjuk:Filter ini mirip dengan atribut box-shadow.
grayscale(%)

Mengubah gambar menjadi tingkat abu-abu.

  • 0% (0) adalah nilai default, yang mewakili gambar asli.
  • 100% akan membuat gambar sepenuhnya menjadi abu-abu (digunakan untuk gambar hitam-putih).

Keterangan:Tidak diizinkan nilai negatif.
hue-rotate(deg)

Terapkan putar warna di atas gambar. Nilai ini menentukan derajat di lingkaran warna. Nilai default adalah 0deg, yang mewakili gambar asli.

Keterangan:Nilai maksimal adalah 360deg.
invert(%)

Balikkan sample di dalam gambar.

  • 0% (0) adalah nilai default, yang mewakili gambar asli.
  • 100% akan membuat gambar sepenuhnya terbalik.

Keterangan:Tidak diizinkan nilai negatif.
opacity(%)

Atur tingkat kecerahan gambar. opacity-level mendeskripsikan tingkat kecerahan, di mana:

  • 0% adalah transparan penuh.
  • 100% (1) adalah nilai default, yang mewakili gambar asli (transparan).

Keterangan:Tidak diizinkan nilai negatif.

Petunjuk:Filter ini mirip dengan atribut opacity.
saturate(%)

Atur kelembaban gambar.

  • 0% (0) akan membuat gambar sepenuhnya tak disaturasi.
  • 100% adalah nilai default dan mewakili gambar asli.
  • Nilai di atas 100% menyediakan hasil yang sangat disaturasi.

Keterangan:Tidak diizinkan nilai negatif.
sepia(%)

Mengubah gambar menjadi abu-abu.

  • 0% (0) adalah nilai default, yang mewakili gambar asli.
  • 100% akan membuat gambar sepenuhnya menjadi abu-abu.

Keterangan:Tidak diizinkan nilai negatif.
url();

Fungsi url() menerima lokasi berkas XML filter SVG dan dapat mengandung tautan ke elemen filter khusus. Contoh:

filter: url(svg-url#element-id);
initial Atur atribut ini ke nilai standar. Lihat initial.
inherit Mengambil atribut ini dari elemen orangtua. Lihat inherit.

Beberapa contoh lain

Contoh halus

Menambah efek halus untuk gambar:

img {
  filter: blur(5px);
}

Coba sendiri

Contoh halus 2

Terapkan gambar latar belakang yang terhalus:

img.background {
  filter: blur(35px);
}

Coba sendiri

Contoh kecerahan

Sesuaikan kecerahan gambar:

img {
  filter: brightness(200%);
}

Coba sendiri

Contoh kontras

Sesuaikan kontras gambar:

img {
  filter: contrast(200%);
}

Coba sendiri

Contoh bayangan

Menyewa efek bayangan untuk gambar:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Coba sendiri

Contoh skala abu-abu

Konversi gambar ke skala abu-abu:

img {
  filter: grayscale(50%);
}

Coba sendiri

Contoh putar warna

Terapkan putar warna di atas gambar:

img {
  filter: hue-rotate(90deg);
}

Coba sendiri

Contoh pengalihan

Tukar sample di dalam gambar:

img {
  filter: invert(100%);
}

Coba sendiri

Contoh kecerahan

Atur tingkat kecerahan gambar:

img {
  filter: opacity(30%);
}

Coba sendiri

Contoh kepadatan

Sesuaikan kepadatan gambar:

img {
  filter: saturate(800%);
}

Coba sendiri

Contoh kopi

Konversi gambar ke warna kopi:

img {
  filter: sepia(100%);
}

Coba sendiri

Penggunaan penyaring berbagai macam

Untuk menggunakan beberapa penyaring, pisahkan masing-masing penyaring dengan spasi. Perhatikan urutan penting (contoh, penggunaan grayscale() setelah sepia() akan menghasilkan gambar yang sama sekali hitam-putih):

img {
  filter: contrast(200%) brightness(150%);
}

Coba sendiri

Semua penyaring

Demosikan semua fungsi penyaring:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung atribut ini penuh.

Angka yang diawali dengan -webkit- menunjukkan versi pertama yang menggunakan prefiks.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Keterangan:Versi Internet Explorer yang lebih lama (4.0 hingga 8.0) mendukung atribut "filter" yang sudah usang dan bukan standar. Saat perlu dukungan IE8 dan versi yang lebih rendah, digunakan utamanya untuk kecerahan.