CSS3 Filters really are a pretty exciting prospect for us Web Designers while they make effects that we typically keep company with Photoshop, possible to apply in the browser with ease.
Grayscale: This converts color in our input image to a shade of gray.
img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
Saturate: This applies a color saturation effect to the colors which makes them look more vivid.
img{
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);
filter: saturate(50%);
}
Sepia: Thus giving the colors passed in a sepia tinge like in old photographs.
img{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}
Hue Rotate: What it does is shift the colors around to produce an input image look completely different.
img{
filter: hue-rotate(20deg);
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);
}
Blur: If you like the content being filtered to look semi-transparent, this is actually the one for you.
img {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
Invert: It requires a snapshot of the image, helps it be an individual color, blurs it, then offsets the end result a bit so it seems like a shadow of the original content.
img{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
}
Brightness: It adjusts the colors between completely black and the original color in proportion to the ‘amount'parameter.
img{
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);
filter: brightness(0.2);
}
Contrast: This may adjust the difference involving the darkest and lightest areas of the input image.
img{
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);
filter: contrast(150%);
}
