Cara Menciptakan Filter Gambar Dengan Css

Filter gambar biasanya dipakai pada ketika kita mengedit gambar. Biasanya juga kita hanya memakai aplikasi untuk memfilter gambar tersebut sehingga sanggup berubah sesuai yang kita inginkan. Tetapi ternyata ada cara untuk memfilter gambar tersebut dengan memakai CSS, untuk itu pada tutorial kali ini aku akan memperlihatkan tutorial perihal cara menciptakan filter gambar dengan CSS.

(Baca juga : Cara Membuat Gambar Flat Design Secara Otomatis)

Beberapa filter gambar yang sanggup di gunakan antara lain.

Filter Gambar yang Bisa di Gunakan dengan CSS

biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS

1. Blur

Agan niscaya sudah pernah mendengar istilah blur, imbas blur pada gambar di gunakan untuk menyamarkan gambar.

2. Brightness

Brightness di gunakan untuk menciptakan filter gambar menjadi lebih cerah, sehingga sanggup 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 yaitu warna-warna piksel yang berada dalam rentang gradasi warna hitam dan putih. Pada Color Dialog menyerupai yang terlihat pada gambar diatas, kalau kita menentukan warna solid hitam, putih, atau abu-abu, maka kita akan berada dalam pita warna Grayscale.(Sumber: kifmesoft.wordpress.com)

5. Hue

Hue yaitu 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. Makara kalau pada gambar, invert yaitu membalikan warna yang ada, menyerupai gambar putih menjadi hitam.

7. Opacity

Di dalam software Adobe Photoshop kita sering melihat kata opacity, jadi sebetulnya opacity itu di gunakan untuk transparansi layer secara keseluruhan.

8. Saturate

Dalam kamus besar bahasa Indonesia Saturate yaitu memenuhi. Makara yang di maksud saturate pada gambar ialah memnuhi kombinasi dari warna-warna dasar(Hue).

9. Sepia

Efek sepia yaitu imbas yang menciptakan gambar kita terlihat klasik atau sanggup dibilang kuno.

10. Shadow

Shadow atau bayangan niscaya agan sudah mengerti maksudnya, imbas gambar ini di gunakan untuk menciptakan bayanggan pada gambar.

Setelah mengetahui pengertian dari efek-efek di atas, kini aku akan memperlihatkan cara membuatnya dengan CSS. Untuk cara menciptakan filter gambar dengan CSS ikuti langkah-langkah dari aku berikut ini.

(Baca juga : Teknik Cara Memasukan Attribute Alt di Gambar Agar Artikel Menjadi SEO)

Cara Membuat Filter Gambar Dengan CSS

Berikut ini yaitu instruksi 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);}

Berikut ini yaitu instruksi HTML nya

<img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="blur" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="brightness" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="contrast" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="grayscale" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="huerotate" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="invert" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="opacity" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="saturate" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="sepia" height="300" src="http://www.tutorialumum.com/" width="300" /> <img alt=" biasanya dipakai pada ketika kita mengedit gambar Cara Membuat Filter Gambar Dengan CSS" class="shadow" height="300" src="http://www.tutorialumum.com/" width="300" />

Silahkan ganti http://www.tutorialumum.com/ dengan URL gambar yang agan miliki.
Ganti dengan alt gambar yang agan inginkan.

Berikut ini yaitu Tampilannya.

(Baca juga : Cara Menampilkan Gambar Yang Tidak Tampil di Halaman Awal Blog dan Widget Blog)

Demikian tutorial dari aku mengenai cara menciptakan filter gambar dengan CSS. Jika ada pertanyaan mengenai filter gambar CSS diatas, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog , agar artikel di atas bermanfaat untuk agan semua. Untuk tutorial blog dan lainnya mengenai kode-kode CSS dan HTML, tetap kunjungi blog .