-What is the webkit-filter attribute used for?-webkit-filter attribute

Source: Internet
Author: User

-What is the webkit-filter attribute used for?-webkit-filter attribute
In the past two days, I have seen that foreign websites have introduced webkit-filter, which is very confusing. Do you want to learn IE? Today, I saw that it has nothing to do with the IE filter, and the effect is very good! These Filter Effects were originally used for SVG. W3C was introduced to CSS and then CSS Filter Effects 1.0 was developed. Now webkit is the first to support them. Currently, the following effects are supported in the specifications:

  • Grayscale
  • Sepia Brown
  • Saturate saturation
  • Hue-rotate color phase Rotation
  • Invert reversed
  • Opacity transparency
  • Brightness
  • Contrast
  • Blur
  • Drop-shadow
Well, some of them are repeated with CSS3. However, we need to take a look at the specific situation. At least we can achieve the same effect in different ways-for example, transparency. The usage is standard CSS:-webkit-filter: blur (2px );

Eric Bidelman wrote a demo to conveniently view various effects. However, considering that a website cannot be accessed in China for unknown reasons, I simply translated the demo page and put it here for you to preview. Please click here to view it.

Please note that only the latest webkit nightly and Chrome 18.0.976 and later versions are supported to change the filter. Therefore, you need to download the latest version to try it out ~~ I use webkit nightly. Now, let's take a look at some simple results: the source image.
Fuzzy
50% grayscale
100% grayscale
50% Brown
100% Brown
50% brightness
100% brightness
Color
Reversed color
Saturation
Contrast
Well, we can also implement various webpage special effects on mobile phones, such as lomo and Japanese. We can also implement some simple page effects, with CSS 3 shadow, mask, gradient, and so on. I believe there is no need for instagram to be much different.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.