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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[one_half_last]
.img-invert{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
}