CSS3 Webkit Filter Effects

CSS3 Webkit Filter Effects

Using filter effects is one of the cooler and more fun aspects of web design. So WebKit Nightly has implemented the CSS Filter Effects 1.0 which provides a method to customize basic image or video rendering with Photoshop-like effects. Let’s take a look at how it’s used.

Note: To test and view the effects, use Webkit Nightly and Chrome Canary.

Here are some CSS snippets that will change the element:

Blur

img {

  -webkit-filter: blur(2px);

}

Hue-rotate

img {  

 -webkit-filter: hue-rotate(90deg);  

  }

Grayscale

img {  

 -webkit-filter: grayscale (100%);  

  }

Sepia

img {  

 -webkit-filter: sepia (100%);  

  }

Opacity

Default is 100%, no transparency.

img {  

 -webkit-filter: opacity (30%);  

  }

For more of these awesome tutorials, you may check this out:

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

You can learn more of jQuery Tutorials for the masses