Langsung ke konten utama

Trick CSS3 Filters


Untuk kalian yang mungkin sudah familiar dengen efek filter yang ada photoshop pasti tentunya sudah tahu bagaimana efek filter seperti blur,sepia,grayscale,dll pada gambar.nah kali ini saya mau berbagi informasi,trik dan tutorial menarik lagi tentang CSS3 - Filters untuk Gambar dengan penerapan yang sederhana dan dasar.mungkin sudah ada beberapa yang tahu tentang trik ini,tapi bagi yang belum,bisa kalian coba dan mempelajari tentang dasar" syntax css Filter ini.semoga bermanfaat ^^


Untuk Penerapanya nanti cukup sederhana hanya sesuaikan css name pada class html,atau copy paste syntax css pada class/id html yang anda inginkan,misalkan contoh sederhana-nya :

HTML

<div class='nama-filter'>
<img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsS2gvzRFb_ZU58vE-rtopb-bfYNzNzP1rqeSWiiuhyphenhypheniYjAgnEJJSIBSmfXvVXFKjIlhzRUptDWDyE-gtPO-bqLjpTBoXR-wR1uJmwOjW5Rf8CNy6_P5j5ysqsAy2MVxkQhWMDYz4fSao/s400/30059960.jpg" width="283" />
</div>

nama-filter diganti dengan css name yang ada di contoh dibawah,misalkan saya pilih efek blur,HTML class-nya menjadi <div class='blur'> (tanpa tanda titik)

#class html dan css name harus sama agar trik ini WORK!


#CSS Diletakan diatas kode ]]</b:skin>

#HTML Diletakan diantara <body> isi html </body>


Oia sebelumnya Saya sarankan Gunakan CSS ini hanya untuk keperluan saja,mungkin kita tahu beberapa orang lebih sering menggunakan browser google chrome dengan versi terbaru(rekomendasi) ,oleh karena itu gunakan css yang memang untuk chrome (-webkit)

#ada kemungkinan mozilla belum mendukung css3 filter ini





Blur
Semakin Besar Nilai blur yang diberikan,maka efek blur pada gambar akan semakin pudar.

Sebelum                                                                         Sesudah



CSS


.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}






Brightness
Semakin Besar Nilai Brightness atau kecerahan yang diberikan,maka gambar akan semakin terang.
dan sebaliknya juga diberi nilai dibawah 0 atau minus 1 gambar akan semakin gelap.
antara (-1.0 s/d 1.0)

Sebelum                                                                         Sesudah



CSS


.Brightness {
filter: brightness(0.2);
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);
}





Saturation
Semakin Besar Nilai Saturation atau ketajaman warna yang diberikan pada gambar,maka warna pada gambar akan semakin terang/cerah.

Sebelum                                                                         Sesudah



CSS


.Saturation {
filter: saturate(2.0);
-webkit-filter: saturate(2.0);
-moz-filter: saturate(2.0);
-o-filter: saturate(2.0);
-ms-filter: saturate(2.0);
}





Hue-Rotate
Untuk Hue-Rotate,nilai yang diatur menggunakan derajat yang sesuai terhadap arah jarum jam prinsip roda warna sejauh 360 derajat.


Roda Warna

Sebelum                                                                         Sesudah



CSS


.Hue-Rotate {
filter: hue-rotate(170deg);
-webkit-filter: hue-rotate(170deg);
-moz-filter: hue-rotate(170deg);
-o-filter: hue-rotate(170deg);
-ms-filter: hue-rotate(170deg);
}





Contrast
Semakin Besar Nilai Kontras yang diberikan pada gambar,maka tingkat kontras pada gambar akan semakin tinggi, dan begitu juga sebaliknya.

Sebelum                                                                         Sesudah



CSS


.Contrast {
filter: contrast(150%);
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);
}





Grayscale
Semakin Besar Nilai grayscale yang diberikan pada gambar,maka gambar akan semakin berubah warna menjadi abu-abu/gray.


Sebelum                                                                         Sesudah



CSS


.Grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}





Sepia
Efek photo filter Sepia akan semakin sempurna jika diberikan nilai 100%.

Sebelum                                                                         Sesudah



CSS


.Sepia {
filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
}



Invert
Filter ini untuk membalikan warna yang ada pada gambar dengan batasan 0% - 100%

Sebelum                                                                         Sesudah



CSS


.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}




Transparency
Untuk efek transparant pastinya sudah tidak asing bukan,transparant juga dapat dikategorikan sebagai photo filter.

Sebelum                                                                         Sesudah



CSS


.Transparency {
opacity:0.5;
filter:alpha(opacity=40);
}


Nah,apakah dalam satu gambar efeknya bisa kita satukan ,tentu saja bisa,kita bisa mengkombinasikan efek" filter seperti halnya filter pada photoshop,dan inilah hasil contoh nexperiment yang saya buat :

Hasil:

CSS


.jomixed {
filter: saturate(2.0);
-webkit-filter: saturate(2.0);
-moz-filter: saturate(2.0);
-o-filter: saturate(2.0);
-ms-filter: saturate(2.0);
filter: contrast(122%);
-webkit-filter: contrast(122%);
-moz-filter: contrast(122%);
-o-filter: contrast(122%);
-ms-filter: contrast(122%);
filter: hue-rotate(325deg);
-webkit-filter: hue-rotate(325deg);
-moz-filter: hue-rotate(325deg);
-o-filter: hue-rotate(325deg);
-ms-filter: hue-rotate(325deg);
}




Nah,setelah itu apa lagi yang dapat kita gunakan dengan css3 filter ini?
dengan css filter kita juga bisa buat sebagai hover efek dan animasi infinity ataupun animasi yang menggunakan keyframe.

misalkan untuk efek animasi hover,yg kita perlukan adalah css transition,misalkan kita beri nilai timing 0.5 detik.

CSS


-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;

Silakan anda coba arahkan kursor anda pada gambar dibawah ini.

HASIL :

Contoh 1

CSS


.blur-animasi {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;}
.blur-animasi:hover {
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}

Contoh 2


CSS


.blur-animasi1 {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}
.blur-animasi1:hover {
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}





Dan cara diatas juga sama untuk css filter lainya,mudah bukan? sekian penjelasan saya tentang >CSS3 Filters,Arigatou gozaimasu minna-san~ ja mata ne~ ^^/



Artwork by :絵 | mia@ミア [pixiv]



Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html




Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Karya Seni Patung Gregorius Sidharta

Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta G Sidharta Tokoh Seniman Patung Indonesia G Sidharta The Concept Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia Pengawal Batas Indonesian Visual Art Archive Karya Karya G Sidharta Homage Artdig Gregorius Sidharta Soegijo Homegallery Posts Facebook Indonesian Visual Art Archive Karya Karya G Sidharta Gregorius Sidharta Ilmuseni Com Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta Soegijo Homegallery Posts Facebook Karya Seni Pembentuk Identitas Negara Indonesian Visual Art Archive Karya Karya G Sidharta Sejarah Awal Dan Perkembangan Seni Patung Di Indonesia Lukisan Berma...
Posting Komentar
Baca selengkapnya

Seni Lukis Impresionisme

Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Apa Itu Impresionisme Sejarah Seni Lukis Impresionisme Dunia Lukisan Javadesindo Art Gallery Sejarah Aliran Seni Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Seni Rupa Impresionisme Dan Ciri Ciri Lukisannya Bilik Seni Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Aliran Seni Lukis Impresionisme Thegorbalsla Siapa Saja Tokoh Seni Lukis Aliran Impresionisme Seni Rupa Impresionis Aliran Yang Awalnya Tertolak Kompasiana Com Impresionisme Definition And Synonyms Of Impresionisme In The Media Pembelajaran Lukisan Impresionisme Impressionism Mengapresiasi Lukisan Impresionisme Karya Leonid Afrem...
Posting Komentar
Baca selengkapnya

Seni Lukis Patung

Cabang Cabang Seni Rupa Seni Patung Sening Lukis Seni Grafis Dk Blog Contoh Karya Seni Lukis Patung Beserta Apresiasinya Seni Rupa Murni Nusantara Dan Mancanegara Art Lesson In Smp Seni Patung Beserta Pengertian Fungsi Teknik Contohnya Seni Budaya Sejarah Perkembangan Seni Rupa Lukisan Patung Liberty Berjilbab Tuai Kontroversi Dream Co Id Apa Itu Seni Patung Tambah Wawasanmu Tentang Dunia Seni Di Sini Di Balik Senyap Tampilkan Karya Seni Patung Dan Lukisan Bagaimana Sejarah Seni Rupa Yunani Kuno Seni Rupa Dictio Pengertian Dan Contoh Seni Rupa Murni Genggam Internet Dk Blog Contoh Karya Seni Lukis Patung Beserta Apresiasinya Pameran Seni Lukis Fotografi Dan Patung Hadir Selama Sepekan Di Gambar Wanita Monumen Patung Kesedi...
Posting Komentar
Baca selengkapnya