CSS3 Filter Effect

CSS3 Filter and IE filter are exactly two things.

Filters is mainly used in pictures to achieve some special effects. (although they can also be used on video), but we are only going to discuss the use of images.

Grammar

Elm {        Filter:none | <filter-function > [<filter-function>]*}      

Its default value is None, and he does not have inheritance, where filter-function one has the following values to choose from:

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

　　

Browser compatibility

There are so few browsers that support this property now, only WebKit support, and only WebKit nightly version and Chrome 18.0. More than 976 versions are supported, so if you want to see the effect you need to download one of these two versions, I'm using Google Chrome Canary.

First, grayscale grayscale

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

. 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);}          

default value:100%,

If we change the value to 300%

. saturate{         -webkit-filter:saturate (3);      }

　　

　　

Four, hue-rotate hue rotation

Hue-rotate used to change the hue of a picture

. hue-rotate{           -webkit-filter:hue-rotate (90deg);       }

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);        }

default value:100%

　　

Vi. transparency of opacity

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

. opacity{        -webkit-filter:opacity (. 2);      }    

default value:100%

　　

Seven, brightness brightness

Change the brightness of a picture

. brightness{            -webkit-filter:brightness (. 5);        }

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

It's like a box-shadow effect, and it gives the picture a shadow effect.

. drop-shadow{            -webkit-filter:drop-shadow (5px 5px 5px #ccc);            

Summarize

So above is the filter in the 10 kinds of effects, of course, you can customize according to their own needs:

. custom{            -webkit-filter:saturate (5) hue-rotate (500deg) grayscale (0.3) sepia (0.7) Contrast (1.5) invert (0.2) Brightness (. 9);        }

　　

　　

CSS3 Filter Effect