Visual Effects with CSS3 Filters
Using CSS Filters we can apply some crazy awesome visual effects to almost any DOM element like image, video, 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 andinsetkeyword is not allowed). But then what's the difference between box-shadow vs filter: drop-shadow ? If you ever wanted yourbox-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.