È possibile trasformare un'intera pagina Web in scala di grigi usando i CSS?

Question

Mi piacerebbe trasformare un intero sito in scala di grigi. Naturalmente, posso modificare manualmente il CSS e regolare ogni singolo color, background-color & co. proprietà, e posso regolare ogni singola immagine in Photoshop.

Ma c'è un modo più semplice, ad es. usando puro CSS?

Ad es. Qualcosa come la sovrapposizione di un 100% x 100% di sovrapposizione div in cima al sito che trasforma tutti i colori in gradazioni di grigio?

Eventuali suggerimenti?

Answer 1

Sì c'è, basta usare il filtro in scala di grigi

CSS

*{ 
    -moz-filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    filter: gray; /* IE6-9 */ 
    filter: grayscale(100%); 
} 

Nota: È possibile applicare questo in qualsiasi elemento (html, corpo, colpo di testa, ecc ...)

DEMO HERE

Answer 2

Non è necessario impostare il filtro su ogni voce le element, È possibile applicare il filtro su HTML.

html { 
    -moz-filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    filter: gray; /* IE6-9 */ 
    filter: grayscale(100%); 
} 

o corpo se si desidera mantenere uno sfondo colorato su html.

http://codepen.io/anon/pen/VLawaK