Grayscale Web Pages with CSS

In Thailand, due to a period of mourning on the death of the King of Thailand, many websites have removed color and gone black-and-white (grayscale) for home pages, and some for all pages. There is a fairly easy way to do this with CSS, with the exception of images used as background images in CSS (for those I recommend generating a new background image, and for YouTube thumbnails).


/* make everything gray */ a {color: #aaa !important;} a:hover, a:focus {color: #000 !important;} img {-webkit-filter: grayscale(100%) !important;filter: grayscale(100%) !important;} .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);} .nav .navbar-default .navbar-nav > li > a {color: #aaa;} .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: #000 !important;}