Siyah-Beyaz // grayscale

Resime siyah-beyaz tonlarında efekt vermek istediğimiz zaman CSS’de [kod]grayscale[/kod] kodunu kullanıyoruz.

img {<br />   -webkit-filter: grayscale(100%);<br />}<br />

Örnek üzerinde anlatacak olursak sitemizdeki tüm resimler veya belli bir class’ın atandığı resimler siyah-beyaz olsun, bunların üstüne imleç ile gelindiğinde resim orjinal renklerinde görüntülensin.

<br />img {<br />    -webkit-filter: grayscale(100%);<br />  -webkit-transition: -webkit-filter 1s;<br />}<br />img:hover {<br />    -webkit-filter: grayscale(0%);<br />}<br />

Sevgiler.
Bir önceki yazımız olan WordPress için Youtube Tarzı Yükleniyor Çubuğu başlıklı makalemizi de okumanızı öneririz.