By using css filters a developer can apply different visual effects (something like photoshop filters for the browser) . There are different css filter properties which we can use for different purpose. Filters are mostly use to make an effect on a background image.

CSS supprt multiple filters (Definition by W3schools):

  • blur (px) (Applies a blur effect to the image. A larger value will create more blur.)
  • brightness(%) (Adjusts the brightness of the image. 0% will make the image completely black.
    100% (1) is default and represents the original image. Values over 100% will provide brighter results.)
  • contrast(%) (Adjusts the contrast of the image. 0% will make the image completely black.
    100% (1) is default and represents the original image. Values over 100% will provide results with less contrast.)
  • drop-shadow(h-shadow v-shadow blur spread color) (Applies a drop shadow effect to the image. )
  • grayscale(%) (Converts the image to grayscale.)
  • hue-rotate(deg) (Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.)

Further properties and their use you can see here.

One example i am sharing with my viewers how we can implement Css Filter Blur. See below code and its output

<body>

<img src="http://www.themesrefinery.net/wp-content/uploads/2014/06/samsung_galaxy_s3-HD.jpg" alt="Pineapple" width="300" height="300">

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>

</body>

Css Code:

img {
        filter:blur(5px);
       -moz-filter:blur(5px);
}

Important Note for Css Filters:

Some browsers not support only filter element. To make it work we need to add browsers compatible tag with it like in above example i have added “-moz-” this is for mozilla. Other properties are

-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
 

About The Author

Related Posts

Leave a Reply

Your email address will not be published.