Digamos que você queira fazer um tipo de efeito de “rollover” de imagem em que um logotipo fica em tons de cinza até que o mouse rolar. Então, a imagem é colorida. É uma ótima opção para aqueles momentos em que você deseja que algo seja menos perceptível e apenas obtenha “foco” quando o usuário mostrar interesse.
Se você pesquisar por “escala de cinza CSS”, obterá várias dicas úteis sobre como fazer isso. Na maioria das vezes, eles estão corretos:
Aqui está um exemplo:
/* Firefox 10+, Firefox on Android */
filter: url("data:image/svg+xml;utf8,<svg >);
/* IE6-9 */
filter: gray;
/* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(100%);Mas essa solução muito comum está um pouco errada. A primeira coisa é que ele está usando a matriz errada. A segunda é que se você usasse a matriz correta, seria redundante, pois a operação correta já está definida. Este é o CSS que você deve usar:
/* Firefox 10+, Firefox on Android */
filter: url("data:image/svg+xml;utf8,<svg >);
/* IE6-9 */
filter: gray;
/* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(100%);O feColorMatrix foi substituído por:
<feColorMatrix type='saturate' values='0'/>que dessatura completamente a imagem (remove todas as cores) e o inverso é:
<feColorMatrix type='saturate' values='1'/>Mais simples e correto.