02 October 2017

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

Cara Membuat Filter Gambar Dengan CSS

1. Blur

Agan pasti sudah pernah mendengar istilah blur, efek blur pada gambar di gunakan untuk menyamarkan gambar.
Cara Membuat Filter Gambar Blur Dengan CSS

2. Brightness

Brightness di gunakan untuk membuat filter gambar menjadi lebih cerah, sehingga dapat disimpulkan filter ini di gunakan untuk mencerahkan gambar.
Cara Membuat Filter Gambar Brightness Dengan CSS

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)
Cara Membuat Filter Gambar Contrast Dengan CSS

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)
Cara Membuat Filter Gambar Grayscale Dengan CSS

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)
Cara Membuat Filter Gambar hue Dengan CSS

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.
Cara Membuat Filter Gambar invert Dengan CSS

7. Opacity

Di dalam software Adobe Photoshop kita sering melihat kata opacity, jadi sebenarnya opacity itu di gunakan untuk transparansi layer secara keseluruhan.
Cara Membuat Filter Gambar opacity Dengan CSS

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).
Cara Membuat Filter Gambar saturateDengan CSS

9. Sepia

Efek sepia adalah efek yang membuat gambar kita terlihat klasik atau bisa dibilang kuno.
Cara Membuat Filter Gambar sepia Dengan CSS

10. Shadow

Shadow atau bayangan pasti agan sudah mengerti maksudnya, efek gambar ini di gunakan untuk membuat bayanggan pada gambar.
Cara Membuat Filter Gambar sepia Dengan CSS

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
  2. .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);}
  3. Berikut ini adalah kode HTML nya
  4. <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" />
  5. Berikut ini adalah Tampilannya.
  6. Tutorial Umum Tutorial Umum Tutorial Umum Tutorial Umum Tutorial Umum Tutorial Umum Tutorial Umum Tutorial Umum Tutorial Umum Tutorial Umum

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

4 comments

Ijin coba + bookmark ya gan bagus nih gambarnya

wah mantab nih ini yang ane cari2 masukin gambar pake css, makasih gan ane coba dulu cara ini

thx ya gan , bisa buat link partner nih hehe

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon