10 Effects of CSS3 filter

The filter default value is None, and he does not have inheritance, where Filter-function has the following properties:

1. Grayscale Grayscale
2. Sepia Brown (for professional pointing translator)
3. Saturation of saturate
4. Hue-rotate Hue Rotation
5. Invert inverse color
6. Opacity transparency
7. Brightness brightness
8. Contrast contrast ratio
9. Blur Blur
10. Drop-shadow Shadow

First, grayscale grayscale

Using this special effect, the image will be grayed out, that is to say, your picture would only have two colors "black" and "white".

. grayscale{
-webkit-filter:grayscale ();
}

default value:100%,

If you do not have any parameter values in grayscale (), it will be rendered as "100%". The effect is as follows:

　　　　

Second, sepia

Sepia do not know how to translate, temporarily called him "Brown", using this effect, your picture seems very old

. sepia{

-webkit-filter:sepia (1);

}

default value:100%,

If you do not have any parameter values in sepia (), it will be rendered as "100%" with the following effect:

Third, the saturation of saturate

The Saturat is used to change the saturation of the image.

. saturate{

-webkit-filter:saturate (0.5);

}

If we change the value to 300%

. saturate{

-webkit-filter:saturate (3);

}

The specific results are as follows:

　　

Four, hue-rotate hue rotation

Hue-rotate used to change the hue of a picture

. hue-rotate{

-webkit-filter:hue-rotate (40DEG);

}

default value:0deg

　　　　　

Five, invert anti-color

The effect of the invert is like the effect of the bottom surface of our camera.

. invert{

-webkit-filter:invert (1);

}

　　　　

Vi. transparency of opacity

That would be a good idea, to change the transparency of the picture.

. opacity{

-webkit-filter:opacity (0.2);

}

default value:100%

Seven, brightness brightness

Change the brightness of a picture

. brightness{

-webkit-filter:brightness (0.5);

}

If its value is below 1, it is gradually darkened, and more than 1 is gradually lightened

default value:100%

Eight, contrast contrast ratio

Change the contrast of the picture, the whole PSD, all understand this meaning

. contrast{

-webkit-filter:contrast (2);

}

default value:100%

　　　　

Nine, Blur Fuzzy

Just look at the literal meaning and change the sharpness of the picture.

. blur{

-webkit-filter:blur (3PX);

}

Default value:0

　　　　

X. The shadow of Drop-shadow

This is the same as the Box-shadow effect, just put this shadow film.

. drop-shadow{

-webkit-filter:drop-shadow (5px 5px 5px Gray);

}

　　

　　The above is my summary of the filter properties of the 10 kinds of effects, I hope to bring you some help.

10 Effects of CSS3 filter