Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Filters

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 152
    Comment on it

    Hey Readers :)

    We apply different in-built filters to our day to day pictures. Some of these filters, if not all, can be applied to the images we use in our websites with the help of CSS. This is done by the CSS property filter.

    CSS Filters is a very powerful property. Developers use this to achieve various fun and appealing visual effects.

    Browser support for CSS Filter is not very great.

    Different filters available for use are :

    • blur()
    • brightness()
    • contrast()
    • drop-shadow()
    • grayscale()
    • hue-rotate()
    • invert()
    • opacity()
    • saturate()
    • sepia()
    • url()

    Multiple filters can also be applied separated by a space.

    Here is an example below.

     

    HTML :

    <img src="pineapple.jpg" alt="Pineapple">
    

     

    CSS :

    img {
        -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
        filter: grayscale(100%);
    }
    /* Apply multiple filters */
    img {
        filter: contrast(175%) brightness(3%);
    }

    OUTPUT :

    Original image---

     

    After filter---

     

    Keep Coding!!

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: