CSS3 Filter Image Processing

CSS3 added filter, that is, filtering function, this function is not IE filter

I think it would appeal to you to look at the effect above, and if you do it yourself, I think you will feel more magical. A look at these effects is like Photoshop, which is actually true, and there are many effects that are similar to those in Photoshop. But one thing you need to pay special attention: here CSS3 filter and CSS filter are completely two things. It's not the IE filter we've been talking about. What is the specific point? Everyone interested can click here. I will not say more, because said also not clear, I just want to discuss with you are like to use this "CSS3 Filter". So let's get started.

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:

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.

Refer to the CSS3 Magic Hall for Compatibility options: CSS3 filter and canvas, SVG and IE filter alternatives

CSS3 Filter Image Processing