How to Render Filter Effects With This CSS Webkit
Go crazy with the cool CSS Filter Effects 1.0 tutorials from WebKit Nightly ! Here you’ll learn how to customize basic image or video rendering with Photoshop-like effects. Let’s check it out.
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 {
-webkitfilter: 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 click here.
0
503
