Hai teman-teman semuanya, apa kabar, semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya, kali ini kita masih membahas tentang cara memanipulasi gambar dengan filter css, kali ini saya akan mengedit gambar dengan menggabungkan nilai-nilai pada filter css.
Teknik filter css adalah teknik yang ada pada css yang berfungsi untuk memanipulai gambar seperti halnya pada photoshop, jadi kita dapat menggunakan propertis filter ini untuk memanipulasi gambar atau mengedit gambar, untuk nilai nilai yang ada pada filter css itu sendiri lumayan banyak, dan nilai nilai yang dapat teman-teman gunakan untuk propertis filter css ini diantaranya:
- brightness
- contrast
- drop-shadow
- grayscale
- hue-rotate
- invert
- opacity
- saturate
- sepia
Teman-teman bisa menggunakan salah satu atau munggkin beberapa dari nilai filter diatas, untuk lebih jelasnya kita langsung saja praktek, silahakan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Latihan filter</title> </head> <body> <center><img src="bleach.jpg" alt=""></center> </body> </html> |
Disini saya telah menyiapkan 1 buah gambar dengan nama bleach.jpg:
jika teman-teman jalankan pada browser hasilnya gambarnya masih seperti gambar diatas pada browser, nah sekarang teman-teman tambahkan script css seperti berikut ini:
|
1 2 3 |
<style> img{filter:contrast(1.1) brightness(1.6) hue-rotate(70deg)} </style> |
Disini saya menggunakan beberapa dari nilai pada propertis filter, jika teman-teman save maka hasilnya akan seperti berikut ini
Gmabarnya telah berubah sesuai dengan nilai yang kita berikan pada propertis filter tersebut, nah teman-teman bisa menggunakan nilai yang lain seperti yang saya sebutkan diatas tadi, oke teman-teman untuk tutorial kali ini tentang mengedit gambar dengan menggabungkan nilai-nilai pada filter css saya rasa cukup sampai disini dulu, semoga tutorial kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,
Terima kasih.