GGshow reloaded GGshow reloaded

April 23, 2015

Grayscaling your website

A quick solution to convert webpages into black and white using CSS grayscale filter, supported by all major web browsers including MSIE, Firefox, Chrome, Safari. Suitable for making mourning page, paying tribute, & etc.

Demo

Convert the entire page into black & white:

body {
  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(1);
}

Convert selected elements into black & white:

.grayscale {
  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(1);
}

And add grayscale class to selected HTML elements. E.g.:

<div class="grayscale">
 ...
<div>

Print webpages in black & white:

@media print {
  .grayscale {
    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(1);
  }
}

CDN options
CSS also available on CDN.

Grayscale all:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale-all.css">

Grayscale selected:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale.css">

Grayscale print:

<link rel="stylesheet" type="text/css" href="http://cdn.ggshow.com/styles/grayscale-print.css">

Or using CSS import method:

Grayscale all:

@import url("http://cdn.ggshow.com/styles/grayscale-all.css");

Grayscale selected:

@import url("http://cdn.ggshow.com/styles/grayscale.css");

Grayscale print:

@import url("http://cdn.ggshow.com/styles/grayscale-print.css");
Filed under: CSS,HTML,Uncategorized — Tags: , , , , — GG @ 6:59 pm

© 2024 GGSHOW | Powered by WordPress