CSS3 Fliters

Use CSS3 filters to apply special visual effects to bitmap Images.

CSS3 filters : Concepts and Usage

1. CSS3 filter enable you to process bitmap
images and other contents before they appear on the main page.

2. It basically makes the contents pass through a filter before they are displayed on the webpage,
the effects are not permanent and do not affect the original image

3. Before this feature, developers needed to use Photoeditors like photoshop, Gimp etc to apply filters, and the effects were permanent.
Now, you can apply filters on the fly leaving the original image untouched.

Applying GreyScale to Image using filter : greyscale()

greyscale():

To convert colored pixels in an image to shades of grey only, it creates an old style black-white image

CSS Example : Filter grayscale()

Give it a TRY! » Note: The filter property is supported only on webkit (chrome, safari and opera) browsers

Applying Speia Effects to Image using filter : sepia()

sepia():

To apply sepia toning effects to color pixels, like in old images.

CSS Example : Filter speia() property

Give it a TRY! » Note: The filter property is supported only on webkit (chrome and safari) browsers

Applying Saturation Effects to Image using filter : saturate()

saturate():

1. The fuction saturate() sets the intensity of colors in an image. Higher the value, more intense is the color.