Image

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        img{

            border: solid red ;
            width: 500px;
            margin: 10px;

        }

        .blur {filter: blur(4px);}
        .brightness {filter: brightness(0.30);}
        .contrast {filter: contrast(180%);}
        .grayscale {filter: grayscale(100%);}
        .huerotate {filter: hue-rotate(180deg);}
        .invert {filter: invert(100%);}
        .opacity {filter: opacity(50%);}
        .saturate {filter: saturate(7);}
        .sepia {filter: sepia(100%);}
        .shadow {filter: drop-shadow(8px 8px 10px green);}

        .test{
            opacity: 50%;
        }

        .s{
            box-shadow: 8px 8px 10px green;
        }
    </style>
</head>
<body>
<img src="img/1.jpg">
<img class="blur" src="img/1.jpg">
<img class="brightness" src="img/1.jpg">
<img class="contrast" src="img/1.jpg">
<img class="grayscale" src="img/1.jpg">
<img class="huerotate" src="img/1.jpg">
<img class="invert" src="img/1.jpg">
opacity
<img class="opacity" src="img/1.jpg">

Opacity pro
<img class="test" src="img/1.jpg">

<img class="saturate" src="img/1.jpg">
<img class="sepia" src="img/1.jpg">
shadow
<img class="shadow" src="img/img22.png">
<img class="s" src="img/img22.png">

</body>
</html>

Comments

Post a Comment