Membuat Gambar Bewarna Dengan CSS3 Filter

Membuat Gambar Bewarna Dengan CSS3 Filter   adalah bahasan kita kali ini. Dulu kita harus mengguna...

Membuat Gambar Bewarna Dengan CSS3 Filter adalah bahasan kita kali ini. Dulu kita harus menggunakan Photoshop untuk memberi efek photo grayscale (hitam putih) untuk sebuah gambar, namun sekarang dengan kecanggihan fitur-fitur css3 kita tidak perlu capek2 mengeditnya di Photoshop, cukup dengan beberapa baris kode css kita sudah bisa membuat foto berwarna menjadi hitam putih.

Gambar Bewarna Dengan CSS3 Filter

Beberapa bulan yang lalu tutorial-webdesign.com pernah membahas juga pada tulisan Membuat Efek-efek instagram dengan css3 filter, namun sampai saat ini belum support Firefox, Namun kali ini kita akan coba membuat yang efek grayscale yang bisa dijalankan di Firefox.

Oke langsung saja kita praktek membuat.
Siapkan sebuah file dengan nama grayscale.html dengan struktur sebagai berikut
[<h2>
CSS Filter : <small><a href="http://www.tutorial-webdesign.com/grayscale-css3-filter/">http://www.tutorial-webdesign.com</a></small></h2>
<div class="normal">
 <img src="http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg" alt="">
</div>
<div class="grayscale">
 <img src="http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg" alt="">
</div>]
Untuk kode css nya seperti ini:
[.grayscale{
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}
.grayscale:hover{
 filter: grayscale(0%);
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 -ms-filter: grayscale(0%);
 -o-filter: grayscale(0%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}]
Pada css diatas kita membuat efek grayscale(hitam putih), namun ketika mouse hover gambar kembali berwarna. Maka hasil nya sebagai berikut

Demo | Download Code

Nama

Inspiration Photografer Photoshop Software Video Tutorial Web Design
false
ltr
item
Desain Grafis, Tutorial dan Inspirasi : Membuat Gambar Bewarna Dengan CSS3 Filter
Membuat Gambar Bewarna Dengan CSS3 Filter
https://1.bp.blogspot.com/-ByVdce-hiwI/UTtfnlxMufI/AAAAAAAAJs0/kakDH7IG4Ac/s1600/coloredgrayscale.jpg
https://1.bp.blogspot.com/-ByVdce-hiwI/UTtfnlxMufI/AAAAAAAAJs0/kakDH7IG4Ac/s72-c/coloredgrayscale.jpg
Desain Grafis, Tutorial dan Inspirasi
http://www.javagrafis.com/2013/03/membuat-gambar-bewarna-dengan-dengan.html
http://www.javagrafis.com/
http://www.javagrafis.com/
http://www.javagrafis.com/2013/03/membuat-gambar-bewarna-dengan-dengan.html
true
917012177411184077
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy