Sunday, 8 February 2015

CSS3: Filters

The filter property gives You the power to manipulate image view by adding blur, changing brightness, saturation, contrast, opacity ans so on. 

We'll gonna introduce You the most important and usable of them.

NOTE: The CSS3 filter property requires vendor prefixes for some of the browsers.


-webkit-filter: blur(3px); // chrome and safari
-moz-filter: blur(3px); // mozilla and gecko
-o-filter: blur(3px); // opera
-ms-filter: blur(3px); // IE
filter: blur(3px); // for old browser versions

Syntax:

filter: function( value );

Example:

filter: blur( 3px );


We'll gonna discover 8 filter function:


blur()
This function make an image or any element blurry.

filter: blur(3px);













contrast()
This function allows You to change the contrast.
Default value is 1. If its higher than 1, the contrast will be higher and if its lower then 1, lower contrast.

filter: contrast(1.5);













brightness()
Using this function You can change the brightness.
The value is same as contrast().

filter: brightness(0.4);















grayscale()
With this You can make black and white images, with other words Grey images.
Max value is 100%. Change the value to see the effect.

filter: grayscale(100%);













opacity()
Opacity can change easily the transparency of an image or any element.
Value is also in percentes. 100% is absolutely visible, 0% is absolutely transparent.

filter: opacity(50%);














sepia()
Convert Your image to sepia.
Value is in percents. Max is 100%. Minimum 0%.

filter: sepia(100%);














saturate()
This function saturates the image.
Default value is 100% and its unchanged. Higher and lower value makes the changes.

filter: saturate(220%);













invert()

Inverts the samples in the input image.
Value of 100% is absolutely inverted, and value of 0% is unchanged.

filter: invert(100%);













EXAMPLE CODE:

<html>
<head>
<style>
#lee_hyori {
width: 580px;
height: 370px;
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}
</style>
</head>
<body>

<img id="lee_hyori" src="http://1.bp.blogspot.com/-DV27oDNOQbk/VNOJwOjBBLI/AAAAAAAAAME/3ryxwoSR6sw/s1600/lee-hyori-3106-1920x1200.jpg"/>

</body>
</html>