Css ile resmi siyah-beyaz yap

www.mvmedya.net

css ile resmi siyah beyaz yapmak çoğu tasarımcı ve bu alanla ilgilenen kişiler tarafından kullanılan birşeydir. ama burada önemli olan birşey var ki , O da her tarayıcıda uyumudur. Bu herkes tarafından dikkat edilmez. aşşağıda vereceğim kod birçok tarayıcıda uyumlu olarak çalışmaktadır (firefox Dahil :) )
 

 
CSS Kodlarımız

 

img.sb {
    filter: url("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\'/>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
 -webkit-transition:all 300ms linear;
 -moz-transition:all 300ms linear;
 -o-transition:all 300ms linear;
 transition:all 300ms linear;
}

/* Tabi bide üzerine gelince renkli olsun dersiniz... oda aşağıda olduğu gibi.. */

img.sb:hover {
    filter: url("values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/>#grayscale");
    -webkit-filter: grayscale(10%);
 -webkit-transition:all 300ms linear;
 -moz-transition:all 300ms linear;
 -o-transition:all 300ms linear;
 transition:all 300ms linear;
}