Cara Membuat Filter Gambar Dengan CSS

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)

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

1. Berikut ini adalah kode CSS nya

.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);}

2. Berikut ini adalah kode HTML nya

<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" />

• Silahkan ganti http://www.tutorialumum.com/ dengan URL gambar yang agan miliki.
  
• Ganti Tutorial Umum dengan alt gambar yang agan inginkan.
3. Berikut ini adalah Tampilannya.

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

Share this