Search within TutorialsPark

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()

Leeds Castle
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()

Leeds Castle
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()

Leeds Castle
saturate():

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

CSS Example: Filter saturate()

Give it a TRY! » Note: The mask effects are applied to all elements and its descendants


Applying Hue effects Effects to Image using filter : hue-rotate()

Leeds Castle
hue-rotate():

1.The filter function hue-rotate() can shift the spectrum of colors from 0deg to 360deg to create great effects.

Example: CSS Filters hue-rotate()

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


Applying Inversion of Colors Effects to Image using filter : invert()

Leeds Castle
invert():

1. The filter function invert() inverts the color value for each pixels in an image, it creates a photo-negative of the image.

Example: CSS3 gradients mask on texts

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


Applying Opacity Effects to Image using filter : opacity()

Leeds Castle
opacity():

1. The filter function opacity() assigns the degree of transparency for an image, the value of 0(is complete transparent) , the value of 1 (is completely Opaque).

CSS Example: Filter opacity() Property

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


Applying Brightness Effects to Image using filter : brightness()

Leeds Castle
brightness():

1.The filter function brightness() sets the brightness of the image, just like the brightness controls on TV

CSS Example: Filter brightness()

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



Applying Contrast Effects to Image using filter : contrast()

Leeds Castle
contrast():

The filter function contrast() is used to set the difference between the dark and light colored pixels, the higher the value the more is the difference.

CSS Example: Filter contrast()

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



Applying Blur Effects to Image using filter : blur()

Leeds Castle
blur():

The filter function blur() is used to give a soft edge to images, the effect is a smudged image. Similar to the condition wherein the eyes are not focused

CSS Example: Filter blur()

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