CSS3 filters

CSS3 Filters allow you to modify HTML elements and images with blurs, grayscales, brightness and a lot more.
The property to control the filters is:

filter: filter(value);

For the full syntax of this property, browser prefixes will be required. For now, only -webkit- browser engine supports these properties (Chrome and Safari).

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Multiple filters can be applied and separated by space:

filter: blur(2px) grayscale (0.5) opacity(0.8);

I will provide the original image (first photo), the filtered version of the image (the second one) and a picture of what the filter should look like (the third photo) for the browsers that can’t see the filters.

Blur

The original image Filtered image Photo of filter

Blur is measured in pixels. The code is:

filter: blur(5px);

// Browser Specific
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

Brightness

The original image Filtered image Photo of filter

Brightness is measured from zero to one, 1 being complete brightness and 0 being the original brightness.

filter: brightness(0.3);

// Browser Specific
-webkit-filter: brightness(0.3);
-moz-filter: brightness(0.3);
-o-filter: brightness(0.3);
-ms-filter: brightness(0.3);

Contrast

The original image Filtered image Photo of filter

Contrast is measured using percentages. 100% is the default value, 0% is a black image, and over 100% adds contrast.

filter: contrast(120%);

// Browser Specific
-webkit-filter: contrast(120%);
-moz-filter: contrast(120%);
-o-filter: contrast(120%);
-ms-filter: contrast(120%);

Grayscale

The original image Filtered image Photo of filter

Grayscale is measured in percentages (0% – 100%) – the measure of the amount you wish to grayscale the image by.

filter: grayscale(100%);

// Browser Specific
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

Hue Rotate

The original image Filtered image Photo of filter

Hue Rotate allows you to alter the hue by rotating it. It’s measured in degrees.

filter: hue-rotate(30deg);

// Browser Specific
-webkit-filter: hue-rotate(30deg);
-moz-filter: hue-rotate(30deg);
-o-filter: hue-rotate(30deg);
-ms-filter: hue-rotate(30deg);

Saturation

The original image Filtered image Photo of filter

Saturation is measured in percentages (0-100%).

filter: saturate(70%);

// Browser Specific
-webkit-filter: saturate(70%);
-moz-filter: saturate(70%);
-o-filter: saturate(70%);
-ms-filter: saturate(70%);

Sepia

The original image Filtered image Photo of filter

Similar to grayscale, it is the amount you wish to add sepia to the image. 100% will be complete sepia, 0% will be the initial image.

filter: sepia(100%);

// Browser Specific
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s