CSS3 – Siyah-Beyaz Resimler

Beyazıt Kölemen

11 sene önce

CSS3 de gelen WebKit özelliği sayesinde artık resimlere renk,parlaklık olarak da müdahale edebiliyoruz..

Sitemizdeki resimleri siyah-beyaz yapmak için ufak bir webkit aracılığı ile kolaylıkla yapabiliriz..

img.gri {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); 
    filter: gray; 
    -webkit-filter: grayscale(100%); 
}

img.gri {

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");

filter: gray;

-webkit-filter: grayscale(100%);

}

Kodlarını kullanarak ve resmimize gri sınıfını tanımlayarak kullanabilirsiniz örnek olarak…

Filter: Firefox ve firefox android versiyonu için geçerlidir.
filter: İnternet Explorer 6-9 arası için geçerlidir.
-webkit-filter: Chrome ve Safari için geçerlidir..

Özellikle hover olarak kullandığımızda ve transition efektini de uyguladığımızda harika bir görünüm ortaya çıkıyor.

Bunu paylaş: