CSS filter-introduction and use of webkit-filter

You may be very interested in the filter effects of the Instagram iPhone APP. In fact, CSS3 also has a filter (not the IE filter). These filter effects were originally used for SVG, w3C introduced it to CSS3 and developed the CSS Filter Effects 1.0 specification. Webkit took the lead in supporting it.

-Webkit-filter usage

-Webkit-filter: Standard CSS format, for example:

-Webkit-filter: blur (2px);-webkit-filter supports the following effects:

• Blur
• Brightness
• Contrast
• Drop-shadow
• Grayscale
• Opacity transparency
• Sepia Brown
• Invert reversed
• Saturate saturation
• Hue-rotate color phase Rotation

The following are the specific effects and codes of these filters. Please check the effects in the latest Safari and Chrome browsers:

Source image

Blur

-webkit-filter:blur(2px);

Brightness

-webkit-filter:brightness(25%);

Contrast

-webkit-filter: contrast(50%);

Drop-shadow

-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

Opacity transparency

-webkit-filter: opacity(50%);

Grayscale

-webkit-filter: grayscale(80%);

Sepia Brown

-Webkit-filter: sepia (100% );

Invert reversed

-webkit-filter: invert(100%);

Hue-rotate color phase Rotation

-webkit-filter:hue-rotate(180deg);

Saturate saturation

-webkit-filter: saturate(1000%);

Source: http://fairyfish.net/m/webkit-filter/