First, make the site a solid grey theme. The easiest and most straightforward way to do this is to apply a filter to the entire site, just like we do to our favorite filters after taking selfies.

We can also apply a filter to the page, but instead of putting a div mask over the entire page, we make the entire page gray.

The principle of

Gray is actually a more complicated color. From white to black, there are countless kinds of gray, so these different gray, can replace the color in our web page, so that the whole web page has different color value of gray, but still very hierarchical, and can express a deep feeling. What is gray scale, with pictures to explain is:

We know that RGB stands for three colors, Red, Green and Blue. RGB (0255,0255,0~255) three color values are combined to form different colors. But when we adjust the value of the three colors to the same number, the color is gray (remember when we knead silly putty when we were young, how we knead different colors together to make gray). Therefore, the grayscale image has 256 colors (from 0 to 255), that is, the three values of R, G and B are still consistent. The lighter the gray, the whiter the color, and the darker the gray, the darker the color.

implementation

Simply finish the gray scale. Let’s take a look at the CSS filters:

No doubt, do tomb-sweeping day gray theme of the web page, we have to choose the grayscale filter.

Attribute writing:

filter: grayscale();
Copy the code

Grayscale can be 0, 1, percentage, decimal or something? The larger the number in parentheses, the more thoroughly it grays. The smaller the value, the better the original color remains.

Our site is going to be pure gray, which is the most thoroughly gray, so it should be 100% in parentheses.

filter: grayscale(100%); -webkit-filter: grayscale(100%); // Compatible with Chrome and Safari and post-2013 OPERa-Moz-Filter: Grayscale (100%); // Compatible with Firefox - MS-filter: Grayscale (100%); // Compatible with IE, EDGE-O-filter: Grayscale (100%); // Compatible with Opera before 2013Copy the code

This code is what we have to write. Once you’ve written the base properties, add some properties that are compatible with different browsers.

Code rigor advanced

Filter is a CSS3 attribute. We know that some older versions of IE are not very compatible with CSS3, but we can still implement the effect of filters in older versions of IE:

filter: url(data:image/svg+xml; utf8,#grayscale); / / compatible with ie 10, IE11 filter: progid: DXImageTransform. Microsoft. BasicImage (grayscale = 1); // Compatible with IE6 to 9Copy the code