CSS3 filters to achieve a picture of different rendering effects examples

This site in the first page of the article cover map from colorless to non-ferrous, as well as page switching, post messages and other information hints of the background blur are used to the CSS3 filter filter. CSS3 filter is the filter defined in the full-screen CSS Filter Effect 1.0, a filter that uses CSS to change the blur, brightness, contrast, saturation, and so on of images and HTML. At present there are grayscale, blur, invert, saturate and other 10 filter-function. The Filter property currently supports less browsers, Chrome,firefox basic support, IE only edge (this is IE?) Partial support. Please test yourself for specific compatibility. The demo here is tested on chrome (47.0.2526.80), Firefox (43). ：

Filter is mainly used for pictures, SVG and other elements, its default value is None, with the following 10 filter-function values optional:
Grayscale (grayscale) effect is similar to coloring or black and white in PS
Blur (fuzzy) effect is similar to Gaussian blur in PS
The invert (inverse) effect is similar to the inverse phase in PS
Opacity (transparency) effect is similar to layer opacity in PS
Saturate (saturation) effect is similar to the saturation in PS
Brightness (brightness) effect is similar to brightness in PS
Contrast (contrast) effect is similar to the contrast in PS
Drop-shadow (shadow) effect is similar to the projection in PS
Sepia (retro) effect similar to the old photo filter in the camera
The Hue-rotate (hue) effect is similar to the Hue + rotation in PS (I don't know what to say)

Grayscale (grayscale)

. filter-grayscale{
-webkit-filter:grayscale (1);
Filter:grayscale (1);

}

Blur (Fuzzy)

. filter-blur{
-webkit-filter:blur (3PX);
Filter:blur (3PX);
}

Invert (reverse phase)

. filter-invert{
-webkit-filter:invert (1);

Opacity (transparency)

. filter-opacity{
-webkit-filter:opacity (. 3);
Filter:opacity (. 3);
}

Saturate (saturation)

. filter-saturate{
-webkit-filter:saturate (. 3);
Filter:saturate (. 3);
}

Brightness (brightness)

. filter-brightness{
-webkit-filter:brightness (. 3);
Filter:brightness (. 3);
}

Contrast (contrast)

. filter-contrast{
-webkit-filter:contrast (3);
Filter:contrast (3);
}

Drop-shadow (Shadow)

. filter-drop-shadow{
-webkit-filter:drop-shadow (5px 3px 7px #888);
Filter:drop-shadow (5px 3px 7px #888);
}

Sepia (Nostalgia)

. filter-sepia{
-webkit-filter:sepia (1);
Filter:sepia (1);
}

Hue-rotate (Hue)

. filter-hue-rotate{
-webkit-filter:hue-rotate (135DEG);
Filter:hue-rotate (135DEG);
}