Filter gambar biasanya digunakan pada saat kita mengedit gambar. Biasanya juga kita hanya menggunakan aplikasi untuk memfilter gambar tersebut sehingga dapat berubah sesuai yang kita inginkan. Tetapi ternyata ada cara untuk memfilter gambar tersebut dengan menggunakan CSS, untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat filter gambar dengan CSS.
(Baca juga : Cara Membuat Gambar Flat Design Secara Otomatis)
Setelah mengetahui pengertian dari efek-efek di atas, sekarang saya akan memberikan cara membuatnya dengan CSS. Untuk cara membuat filter gambar dengan CSS ikuti langkah-langkah dari saya berikut ini.
(Baca juga : Teknik Cara Memasukan Attribute Alt di Gambar Agar Artikel Menjadi SEO)
(Baca juga : Cara Menampilkan Gambar Yang Tidak Tampil di Halaman Awal Blog dan Widget Blog)
Demikian tutorial dari saya mengenai cara membuat filter gambar dengan CSS. Jika ada pertanyaan mengenai filter gambar CSS diatas, silahkan masukan ke dalam kolom komentar.
(Baca juga : Cara Membuat Gambar Flat Design Secara Otomatis)
Beberapa filter gambar yang bisa di gunakan antara lain.
Filter Gambar yang Bisa di Gunakan dengan CSS
1. Blur
Agan pasti sudah pernah mendengar istilah blur, efek blur pada gambar di gunakan untuk menyamarkan gambar.
2. Brightness
Brightness di gunakan untuk membuat filter gambar menjadi lebih cerah, sehingga dapat disimpulkan filter ini di gunakan untuk mencerahkan gambar.
3. Contrast
Kontras. Secara umum kontras diartikan sebagai perbedaan gradasi,kecerahan, atau nada (warna) antara bidang gelap (shadow) dengan bidang terang, atau warna putih yang mencolok sekali pada objek.(Sumber: tipsfotografi.net)
4. Grayscale
Grayscale adalah warna-warna piksel yang berada dalam rentang gradasi warna hitam dan putih. Pada Color Dialog seperti yang terlihat pada gambar diatas, jika kita memilih warna solid hitam, putih, atau abu-abu, maka kita akan berada dalam pita warna Grayscale.(Sumber: kifmesoft.wordpress.com)5. Hue
Hue adalah apa yang biasanya kita sebut sebagai 'warna' dalam bahasa sehari-hari. Untuk pelukis, istilah 'hue' berarti kombinasi dari warna-warna dasar; dengan kata lain, merah, hijau, biru atau kuning (RGB).(Sumber: fotonela.com)6. Invert
Dalam kamus besar bahasa Indonesia invert adalah membalikkan, menelungkupkan, merubah. Jadi jika pada gambar, invert adalah membalikan warna yang ada, seperti gambar putih menjadi hitam.7. Opacity
Di dalam software Adobe Photoshop kita sering melihat kata opacity, jadi sebenarnya opacity itu di gunakan untuk transparansi layer secara keseluruhan.8. Saturate
Dalam kamus besar bahasa Indonesia Saturate adalah memenuhi. Jadi yang di maksud saturate pada gambar ialah memnuhi kombinasi dari warna-warna dasar(Hue).9. Sepia
Efek sepia adalah efek yang membuat gambar kita terlihat klasik atau bisa dibilang kuno.10. Shadow
Shadow atau bayangan pasti agan sudah mengerti maksudnya, efek gambar ini di gunakan untuk membuat bayanggan pada gambar.Setelah mengetahui pengertian dari efek-efek di atas, sekarang saya akan memberikan cara membuatnya dengan CSS. Untuk cara membuat filter gambar dengan CSS ikuti langkah-langkah dari saya berikut ini.
(Baca juga : Teknik Cara Memasukan Attribute Alt di Gambar Agar Artikel Menjadi SEO)
Cara Membuat Filter Gambar Dengan CSS
- Berikut ini adalah kode CSS nya
- Berikut ini adalah kode HTML nya
- Silahkan ganti http://www.tutorialumum.com/ dengan URL gambar yang agan miliki.
- Ganti Tutorial Umum dengan alt gambar yang agan inginkan.
- Berikut ini adalah Tampilannya.
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}<img alt="Tutorial Umum" class="blur" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="brightness" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="contrast" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="grayscale" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="huerotate" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="invert" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="opacity" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="saturate" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="sepia" height="300" src="http://www.tutorialumum.com/" width="300" />
<img alt="Tutorial Umum" class="shadow" height="300" src="http://www.tutorialumum.com/" width="300" />
(Baca juga : Cara Menampilkan Gambar Yang Tidak Tampil di Halaman Awal Blog dan Widget Blog)
Demikian tutorial dari saya mengenai cara membuat filter gambar dengan CSS. Jika ada pertanyaan mengenai filter gambar CSS diatas, silahkan masukan ke dalam kolom komentar.
Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk agan semua. Untuk tutorial blog dan lainnya mengenai kode-kode CSS dan HTML, tetap kunjungi blog Tutorial Umum.
