CSS Grayscale Özelliği (Tüm Tarayıcılarla Uyumlu)

CSS ile bir nesnenin görünümünü gri tonda yapabilmemiz mümkün. Aslında gri ton bu özelliğin sadece bir değeri ???? Her neyse, lazım olur diye bende bloğumda paylaşıyorum.. Örneğin resme grayscale özelliğini vermek için graysale adında bir class ekleyelim. Daha sonra css’de bu class’ı tanımlayalım.

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><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 10+, Android için Firefox */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

kullanırken ise şöyle kullanıyoruz.

<img src="images/logo.png" class="grayscale" alt="" />

Grayscale olan bir nesneyi tekrar eski haline getirmek istersekte kodlarımız şöyle olacak;

.grayscale.disabled {
   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");
   -webkit-filter: grayscale(0%);
}

yani nesneye disabled classınıda ekledik mi kaldırmış oluyoruz ????

teşekkürler: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html