Membuat efek hitam putih pada gambar postingan

Hay gan,? Mau nulis apa juga binggung, Dari pada ini blog gag ada coret²an nya mending
aq coret²in wae lha. Syukur - syukur ada yang bisa baca tulisanku ini, Abis bahasanya campur aduk asal ketik aja nie tangan. :D wkwkkwk

Dino iki aku arep posting tutorial mengenai efek gambar,. :) lagi² epek gambar gak bosan apa,??? xD
Untuk melihat DEMO nya silahkan sobat arah kan cursor sobat ke gambar greget dibawah ini ^_^

Okey langsung wae lha ke tutorial nya ra usah banyak basi basa :D ckckckK

Simak langkah² dibawah ini :

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan

Ctrl

+

F

cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.post 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 */
 }

jika sobat ingin menambahkan efect hover pada gambar agar kembali normal ketika terkena cursor tinggal sobat tambahkan kode script berikut ini

.post 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");
}

5. Kemudian simpan template sobat.

Ya sudahlah cukup sekian tutorial yang bisa saya sampaikan hari ini semoga bermanfaat,..

Membuat efek hitam putih pada gambar postingan 2015-02-19T12:05:00-08:00 Rating: 4.5 Diposkan Oleh: Unknown