Sedikit Info Seputar
Merubah Gambar Menjadi Hitam Putih dengan CSS
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Merubah Gambar Menjadi Hitam Putih dengan CSS, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel BLOGGER,
Artikel CSS, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Merubah Gambar Menjadi Hitam Putih dengan CSS
Terbaru
link: Merubah Gambar Menjadi Hitam Putih dengan CSS
Berbagi Merubah Gambar Menjadi Hitam Putih dengan CSS Terbaru dan Terlengkap 2017
Pada postingan kali ini saya akan membagikan/memberitahukan "Bagaimana Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS".
Berikut demonstrasi nya :
1. Simpan Kode dibawah ini tepat di atas kode </head> pada halaman EDIT HTML :
<style type="text/css">
.hitamputih { 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+ */
-webkit-filter: grayscale(1); /* Google Chrome Safari 6+ */
filter: gray; /* IE6-9 */ }
.hitamputih:hover {filter: grayscale(0%);
-webkit-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=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale")}
</style>
2. Berikut contoh untuk memanggil kode CSS di atas :
<img class="hitamputih" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbOyvlYz76kSxfkc7uJZIzf6EYBoVqL9EWUfmXecDpVqHRCrUPyZpql2EDdGZxZie_D4rMi7K-EODAn1xwbVaGXJtkH38ver6ll7up65WvZVs9UtsB4KYacoYiPjCJxoDD1qF8RyzpxTE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg"/>
UPDATE ( Rabu - 03/07/2013 ) Jika anda ingin membuat semua gambar yang ada di blog anda secara otomatis menjadi hitam putih / (grayscale) dan menjadi berwarna ketika di sentuh!.. silahkan Tempel kode dibawah ini sebelum kode ]]></b:skin> pada Edit HTML :
.post img, .sidebar img{
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+ */
-webkit-filter: grayscale(1); /* Google Chrome Safari 6+ */
filter: gray; /* IE6-9 */
}
.post img:hover, .sidebar img:hover{
filter: grayscale(0%);
-webkit-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=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
Semoga Tutorial Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS ini bermanfaat .. terima kasih !