Visual Effects with CSS3 Filters
Using CSS Filters we can apply some crazy awesome visual effects to almost any DOM element like
body, etc. In this demo we'll go through all the 10 functions that the
filter property supports -
blur - Value of the blur radius is a CSS length (like you use in box or text shadow) but does not accept percentage values.
brightness - Value can be 0-1 or 0%-100%
contrast - Value of 0% creates a black image. Value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast.
drop-shadow - It's like our very own
box-shadow(accepts arguments similarly without the commas and
insetkeyword is not allowed). But then what's the difference between box-shadow vs filter: drop-shadow ? If you ever wanted your
box-shadowto take the transparent parts of an image into account and apply outer shadows there, then this function is for you!
grayscale - Value can be 0-1 or 0%-100%
hue-rotate - 0-360 degrees
invert - Value can be 0-1 or 0%-100%
saturate - Value of 0% is completely un-saturated. Value of 100% leaves the input unchanged. Other values multiples the effect linearly. Values over 100% are allowed, providing super-saturated results.
sepia - Value can be 0-1 or 0%-100%
opacity - Value of 100% or 1 is opaque. 0% or 0 is transparent. Values between 0% and 100% or 0 and 1 are linear multipliers on the effect. Default is 100%.
You can quickly read the spec for a complete description on each function.
Consider this demo as a filter effects chart or cheatsheet or just a quick way to brush up. Ofcourse you can extend such examples to do more on your ever-awesome sites like implementing neat and simple hover effects on image galleries for portfolios or something else. Who knows!
Note - Currently CSS Filters are only supported in Webkit based browsers. Stay tuned to caniuse.
- Bon'o'Bon Pure CSS
- Ping-Pong Game Tutorial with HTML5 Canvas and Sounds
- Particles Explosion with Canvas v2 - Mouse Controlled and Gravity
- Circle Lines
- Different CSS3 Image Gallery / Hover Effects