Cara membuat: Tambahkan efek gambar

Belajar cara menambahkan efek visual ke gambar.

Filter gambar

Coba Sendiri

Filters CSS

CSS filter properti menambahkan efek visual kepada elemen (seperti blur dan kepadatan).

Perhatian:Internet Explorer, Edge 12 atau Safari 5.1 dan versi sebelumnya tidak mendukung filter properti.

contoh grayscale

Ubah warna semua gambar ke hitam-putih (100% abu-abu):

Tulip
gambar asli
Tulip
grayscale (100%)
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Coba Sendiri

contoh blur

Terapkan efek blur kepada semua gambar:

Tulip
gambar asli
Tulip
proses blur (5 piksel)
img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Coba Sendiri

Halaman yang Berhubungan

Referensi Pustaka:Properti Filter CSS