Filter special effects in css3 and css3filter Special Effects

Filter special effects in css3 and css3filter Special Effects

The filter attribute in css3 is simple, easy to use, and powerful. These effects are used to implement some special effects on images (or in vidio. Only image effects are discussed here ).

Browser compatibility

Currently, major browsers are very compatible with css3, and the latest version supports css3. Earlier versions of ie9 are not supported, but this is not the focus, microsoft is ready to give up these old antiques. In addition, the ie filter can also be done, and will be discussed separately.

Currently, the following effects are supported in the specifications:

• The gray scale value of grayscale is a decimal point between 0 and 1.
• The sepia brown value is a decimal point between 0 and 1.
• The saturate saturation value is num.
• Hue-rotate the color phase rotation value is angle
• Invert reversed decimal number between 0 and 1
• The opacity transparency value is a decimal point between 0 and 1.
• Brightness is a decimal place between 0 and 1.
• The contrast value is num.
• The Fuzzy Value of blur is length.
• Drop-shadow

The usage is standard CSS writing, such:

-Webkit-filter: blur (2px );

The test browser is chrom browser version 44.0. In the example, the top picture is the source image and the bottom picture is the image after the character ter effect is added.

Grayscale

If no value exists in this effect parameter, it will be rendered as 100%, and the gray scale is different between 0 and 1. The following example shows the rendering of 100%:-webkit-filter: grayscale (1 );

Sepia

The brown color is the effect of a nostalgic function in meitu xiuxiu. The value is 0-1, and the value is-webkit-filter: sepia (1 );

Saturate saturation

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

Hue-rotate color phase Rotation

Hue-rotate is used to change the color of an image. The default value is 0deg and the value is angle. Example:-webkit-filter: hue-rotate (180deg)

Invert reversed

The effect of invert is similar to that of the Photo negatives. Example:-webkit-filter: invert (1)

Opacity transparency

This attribute is frequently encountered. Example:-webkit-filter: opacity (0.3)

 

Brightness

Changes the brightness of an image. The default value is 100%. For example,-webkit-filter: brightness (0.5)

Contrast

This property value is similar to the saturation saturate, for example, 500%:-webkit-filter: contrast (5)

Blur

This attribute changes the image definition. The default value is 0. For example,-webkit-filter: blur (1px)

Drop-shadow

This is similar to box-shadow and adds a shadow to the image. For example:-webkit-filter: drop-shadow (10px 10px #000)

Of course, you can also add multiple attributes. Example:-webkit-filter: saturate (10) hue-rotate (500deg) grayscale (0.3) sepia (0.7) contrast (2.5) invert (0.2) brightness (1.2 );

There are so many filters in earlier ie versions that will be discussed next time.