Categories
Writing

CSS3 Image Filters

Everyone loves instagram, and before instagram was around everyone loved to use the image filters on their point and shoot cameras because lets face it, who doesn’t look better in Sepia or Black and White.

Now this simple trick can be taken from Photoshop and done directly within the browswer. This means that you only need to upload a single image in full colour and let the browser restyle it in the way you want it. This is truly separating style from content.

So I can use them today?

Now before I get carried away I should warn you that this is an emerging technology
At the moment CSS3 filters are only available in Chrome and they are soon to be available in Safari 6. You can keep up to date with the availability of CSS3 filters by visiting when can I use

The filter effects

Blur

 

[one_half]

Office Balcony View @ Sunset
Office Balcony View @ Sunset
[/one_half]

[one_half_last]

Office Balcony View @ Sunset
..with Blur
[/one_half_last]

.img-blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}

Greyscale

 

[one_half]

Office Balcony View @ Sunset
Office Balcony View @ Sunset
[/one_half]

[one_half_last]

Office Balcony View @ Sunset
..with greyscale
[/one_half_last]

.img-greyscale{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}

Sepia

 

[one_half]

Office Balcony View @ Sunset
Office Balcony View @ Sunset
[/one_half]

[one_half_last]

Office Balcony View @ Sunset
..with sepia
[/one_half_last]

.img-sepia{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}

Brightness

 

[one_half]

Office Balcony View @ Sunset
Office Balcony View @ Sunset
[/one_half]

[one_half_last]

Office Balcony View @ Sunset
..with brightness
[/one_half_last]

.img-brightness {
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);
filter: brightness(0.2);
}

Saturate

 

[one_half]

Office Balcony View @ Sunset
Office Balcony View @ Sunset
[/one_half]

[one_half_last]

Office Balcony View @ Sunset
..with saturate
[/one_half_last]

.img-saturate{
-webkit-filter: saturate(200%);
-moz-filter: saturate(200%);
-o-filter: saturate(200%);
-ms-filter: saturate(200%);
filter: saturate(200%);
}

Hue Rotate

 

[one_half]

Office Balcony View @ Sunset
Office Balcony View @ Sunset
[/one_half]

[one_half_last]

Office Balcony View @ Sunset
..with hue
[/one_half_last]

.img-hue{
filter: hue-rotate(90deg);
-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
-o-filter: hue-rotate(90deg);
-ms-filter: hue-rotate(90deg);
}

Contrast

 

[one_half]

Office Balcony View @ Sunset
Office Balcony View @ Sunset
[/one_half]

[one_half_last]

Office Balcony View @ Sunset
..with contrast
[/one_half_last]

.img-contrast{
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);
filter: contrast(150%);
}

Invert

 

[one_half]

Office Balcony View @ Sunset
Office Balcony View @ Sunset
[/one_half]

[one_half_last]

Office Balcony View @ Sunset
..with invert
[/one_half_last]

.img-invert{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
}

Leave a Reply

Your email address will not be published. Required fields are marked *