Various effects of filter in CSS3

Various effects of filter in CSS3

The Filter property in CSS3 can be said to be easy to use and powerful, and these effects can be used to implement some effects on the image (also on Vidio, where only the image effects are discussed).

Browser compatibility

At present, the major browsers for CSS3 compatibility has been very good, the latest version can support CSS3, the old version of IE9 or not support, but this is not the focus, Microsoft is ready to abandon these antique. In addition, IE filters can also be done, will be additional discussion.

The following effects are now supported in the specification:

Grayscale decimal value between 0-1 and gray

Sepia a decimal value between 0-1 and Brown

Saturate saturation value is num

Hue-rotate hue rotation value is angle

Invert a decimal between 0-1 and inverse color value

Opacity the opacity value is a decimal between 0-1

Brightness decimal between 0-1 luminance value

Contrast contrast value is num

Blur Blur value is length

Drop-shadow Shadow

Usage is the standard CSS notation, such as:

-webkit-filter:blur (2px);

The test browser is chrom browser version 44.0, the example image above is the original, and below the image with the Fifter effect.

Grayscale Grayscale

If there is no value in this effect parameter will be rendered in 100%, the value of 0-1 is a different grayscale. The following example renders 100%:-webkit-filter:grayscale (1);

Sepia

Brown, is the beauty 美图秀秀 has a nostalgic function of that effect, the value is also 0-1,-webkit-filter:sepia (1);

Saturation of saturate

This property changes the saturation of the image, the value range is a number, the default value of 100%, the example is 800%:-webkit-saturate (6);

Hue-rotate Hue Rotation

Hue-rotate used to change the hue of the image, the default value is 0deg, the value is angle, example:-webkit-filter:hue-rotate (180deg)

Invert inverse color

Invert's effect is a little similar to photographic negatives, example:-webkit-filter:invert (1)

Opacity transparency

This attribute is often encountered, example:-webkit-filter:opacity (0.3)

Brightness brightness

Change the brightness of the image by default to 100%, example:-webkit-filter:brightness (0.5)

Contrast contrast ratio

This attribute values and saturation saturate similar, example 500%:-webkit-filter:contrast (5)

Blur Blur

This property changes the sharpness of the image, the default value is 0, example:-webkit-filter:blur (1px)

Drop-shadow Shadow

This is similar to Box-shadow, which casts shadows on images, example:-webkit-filter:drop-shadow (10px 10px 10px #000)

Of course, adding multiple properties is also possible, example:-webkit-filter:saturate (hue-rotate) (500deg) grayscale (0.3) sepia (0.7) Contrast (2.5) invert (0.2 ) brightness (1.2);

