CSS3 – Siyah-Beyaz Resimler
12 yıl önce Beyazıt Kölemen tarafından yazılmıştır.-2.948 Okunma
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..
|
1 2 3 4 5 |
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.
test