Edit Foto Dengan CSS3 (Filter)

Jaman sekarang kebanyakan orang bakal mengedit atau retouch foto mereka sebelum di upload ke media sosial, namun mengedit foto tidak harus menggunakan Camera 360 yang itu itu aja, sekarang kita harus berpikir anti-mainstream wkwk. Kali ini kita akan coba edit foto dengan kode-kode CSS yaitu menggunakan properti filter, walaupun efeknya tidak separah ketika kalian menggunakan Camera 360 hehe karena kita hanya akan mengedit dasar-dasar saja.

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 sebesar 10px.
• v-shadow berarti vertikal bayangan atau jarak bayangan objek dari sudut vertikal, jika 20px maka bayangan akan geser ke kanan sebesar 20px juga.
• blur berarti kekaburan bayangan, semakin besar value semakin kabur bayangan.
• color berarti warna bayangan, bisa pakai warna HEX atau terserah.

grayscale()
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.

See the Pen Objek by Bayu Kurnia (@baayukurnia) on CodePen.

Contoh penggunaan satu fungsi:

See the Pen Filter - Blur by Bayu Kurnia (@baayukurnia) on CodePen.

Contoh penggunaan multi fungsi:

See the Pen Filter - Blur, Brightness by Bayu Kurnia (@baayukurnia) on CodePen.

Gimana? sudah jelas caranya? kalau belum silahkan lihat Contoh yang lebih lengkap di w3schools.com