Berikut macam-macam fungsi properti filter:
blur() - px
brightness() - %
contrast() - %
drop-shadow() - px(h-shadow v-shadow blur color)
grayscale() - %
hue-rotate() - deg
invert() - %
opacity() - %
saturate() - number
sepia() - %
blur()
Memberi efek kabur dalam piksel, semakin besar piksel semakin kabur.
blur(20px)
akan lebih kabur daripada blur(10px).
brightness()
Mengubah nilai kecerahan pada gambar (Default =
100%
), nilai kurang dari 100%
akan mengurangi kecerahan dan nilai lebih dari 100%
akan menambah kecerahan.contrast()
Mengubah nilai kontras/perbedaan warna (Default =
100%
), nilai kurang dari 100%
akan mengurangi kontras, nilai lebih dari 100%
menambah kontras.drop-shadow()
Efeknya kurang lebih sama dengan properti
box-shadow
, format valuenya juga sama dengan box-shadow
yaitu "h-shadow v-shadow blur color" misal drop-shadow(10px 20px 5px red)
- h-shadow berarti horizontal bayangan atau jarak bayangan objek dari sudut horizontal, jika
10px
maka bayangan akan turun kebawah sebesar10px
. - v-shadow berarti vertikal bayangan atau jarak bayangan objek dari sudut vertikal, jika
20px
maka bayangan akan geser ke kanan sebesar20px
juga. - blur berarti kekaburan bayangan, semakin besar value semakin kabur bayangan.
- color berarti warna bayangan, bisa pakai warna HEX atau terserah.
Efek B&W atau Hitam-putih (Default =
0%
) 100%
berarti tidak ada warna lain selain hitam-putih.hue-rotate()
Mengubah HUE (Default =
0deg
), value antara 0deg-360deg
.invert()
Seperti efek negatif pada kamera HP semakin besar persentase(
0%-100%
) semakin jelas efeknya.opacity()
Seperti properti opacity, fungsi ini mengatur efek transparansi, value
100%
berarti elemen tidak nampak.saturate()
Mengubah saturasi/kepekatan warna, value dengan angka.
sepia()
Seperti efek sepia biasanya value
0% - 100%
Fungsi diatas bisa kita kombinasikan sehingga lebih banyak efek yang bisa dihasilkan sesuai selera kita. Kelebihan edit foto dengan CSS3 ini kita tidak perlu aplikasi seperti photoshop tapi kekurangannya hasil edit tidak bisa di save jadi hanya bisa ditampilkan di web browser.
Disini saya akan memakai gambar berikut untuk uji coba.
Contoh penggunaan satu fungsi:
Contoh penggunaan multi fungsi:
Gimana? sudah jelas caranya? kalau belum silahkan lihat Contoh yang lebih lengkap di w3schools.com
0 komentar :
Posting Komentar
Utamakan 5S dalam berkomentar
1. Senyum
2. Salam
3. Sapa
4. Sopan
5. Santun