Surf the Dream A discourse of links and articles from Justin Avery

CSS3 Image Filters

Office Balcony View @ Lunch

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%);
}

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter