[CSS3] CSS3 filter implementation, css3 Filter Implementation

[CSS3] CSS3 filter implementation, css3 Filter Implementation
Author: ^_^ fatzi John Source: CSS3 magic Hall: CSS3 filter and Canvas, SVG and IE filter alternatives

The Filter unique to IE is often supplemented by downgrading of various new features of CSS3. After Adobe switched to HTML5, it cooperated with Chrome to launch the Filter feature of CSS3. Therefore, currently, only Webkit kernel browsers support CSS3 Filter, FF and IE10 + require SVG filters (svg effects for html) or Canvas as an alternative solution, while IE5.5 ~ 9. Use the IE filter, JS + DIV, or VML for processing!

This article only applies the filter implementation of CSS3. For more information, see the source article.

CSS3 Filter compatibility table:

 

Filter Implementation:

PC display:

Mobile phone display:

Related code:

1. HTML code

<! DOCTYPE html> 
 
2. CSS code
. Div_20160110 img {max-width: 150px; max-height: 150px ;}. sepia {/** format, filer: sepia (effect range) * effect range, value range: 0-1 or 0-100%; 0 indicates no effect, 1 or 100% indicates the maximum effect */-webkit-filter: sepia (100%);-moz-filter: sepia (100%);-o-filter: sepia (100% ); -ms-filter: sepia (100%); filter: sepia (100% );}. grayscale {/** format, filer: grayscale (effect range) * effect range, value range: 0-1 or 0-100%; 0 indicates no effect, 1 or 100% indicates the maximum effect */-webkit-filter: grayscale (100%);-o-filter: grays Cale (100%);-moz-filter: grayscale (100%);-ms-filter: grayscale (100%); filter: grayscale (100% );}. blur {/** format, filer: blur (blur radius) * blur radius, value range: 0 ~ Npx, 0 is ineffective */-webkit-filter: blur (2px);-moz-filter: blur (2px);-o-filter: blur (2px ); -ms-filter: blur (2px); filter: blur (2px );}. invert {/** format, filer: invert (effect range) * effect range, value range: 0 ~ 1 or 0 ~ 100%, 0 indicates no effect, 1 or 100% indicates the maximum effect */-webkit-filter: invert (1);-moz-filter: invert (1);-o-filter: invert (1);-ms-filter: invert (1); filter: invert (1 );}. saturate {/** format, filer: saturate (effect range) * effect range, value range> = 0 number or percentage, 1 is ineffective, 0 is a grayscale image */-webkit-filter: saturate (2);-moz-filter: saturate (2);-o-filter: saturate (2);-ms-filter: saturate (2); filter: saturate (2 );}. contrast {/** format, filer: contrast (effect range) * effect range, value range> = 0 Number or percentage, 1 is ineffective */-webkit-filter: contrast (2);-moz-filter: contrast (2);-o-filter: contrast (2 ); -ms-filter: contrast (2); filter: contrast (2 );}. brightness {/** format, filer: brightness (effect range) * effect range, value range> = 0 number or percentage, 1 is ineffective */-webkit-filter: brightness (2);-moz-filter: brightness (2);-o-filter: brightness (2);-ms-filter: brightness (2); filter: brightness (2 );}. hue-rotate {/** format, filer: hue-rotate (effect range) * Effect Value Range: 0deg ~ 365deg, 0 (default) is ineffective */-webkit-filter: hue-rotate (200deg);-moz-filter: hue-rotate (200deg);-o-filter: hue-rotate (200deg);-ms-filter: hue-rotate (200deg); filter: hue-rotate (200deg );}. drop-shadow {/** format, filer: drop-shadow (x-offset y-offset shadow blur radius shadow color) * x-offset and y-offset represent the displacement distance between the shadow and the upper left corner of the element. * Note: * 1. the appearance of the shadow is affected by the border-radius style. * 2.: after and: before and other pseudo elements will inherit the shadow effect. */-Webkit-filter: drop-shadow (1px 1px 0px #333);-moz-filter: drop-shadow (1px 1px 0px #333);-o-filter: drop-shadow (1px 1px 0px #333);-ms-filter: drop-shadow (1px 1px 0px #333); filter: drop-shadow (1px 1px 0px #333 ); /* rounded corner */border: solid 2px # e00;-webkit-border-radius: 1px ;}
 
Test address: http://ycdoit.com/test/2016/20160110.html