CSS code for filter property

on

 <!DOCTYPE html>

<html>

    <head>

        <title>Page Title</title>

        <style>

            img.first{

    filter: drop-shadow(0px 0px 10px purple);

}

img.second{

    filter: grayscale(100%);

}

img.third{

    filter: sepia(100%);

}

img.fourth{

    filter: saturate(500%);

}

img.fifth{

    filter: hue-rotate(240deg);

}

img.sixth{

    filter: invert(100%);

}

img.seventh{

    filter:opacity(10%);

}

img.eighth{

    filter:brightness(150%);

}

img.ninth{

    filter: contrast(500%);

}

img.tenth{

    filter:blur(5px);

}

img.eleventh{

    filter: blur(1px) saturate(150%) drop-shadow(20px 20px 2px gray);

}

        </style>

    </head>

    <body>

        <img class="normal" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="first" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="second" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="third" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="fourth" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="fifth" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="sixth" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="seventh" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="eighth"

src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="ninth" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="tenth" src="https://www.linkpicture.com/q/0_15.png"/>

        <img class="eleventh" src="https://www.linkpicture.com/q/0_15.png"/>

    </body>

</html>


OUTPUT




Comments

Post a Comment