Project: CA Arunkumar and Co.(Website for CA Firm)

on

Write an html and CSS program to apply different Image Filter for an image

on

 Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Filter</title>

<style type="text/css">

img{

width: 33%;

height: auto;

float: left;

max-width: 235px;

}

.blur{

filter: blur(4px);

}

.brightness{

filter: brightness(250%);

}

.contrast{

filter: contrast(180%);

}

.grayscale{

filter: grayscale(100%);

}

.huerotate{

filter: hue-rotate(180deg);

}

.invert{

filter: invert(100%);

}

.opacity{

filter: opacity(50%);

}

.saturate{

filter: saturate(70%);

}

.sepia{

filter: saturate(100%);

}

.shadow{

filter: drop-shadow(8px 8px 10px green);

}

</style>

</head>

<body>

<p><strong>Note :</strong>The Filter Property not working on Internet Explorer or Edge 1.2 Earlier Versions</p>

<img src="pine.png" alt="Pineapple" height="300" width="300">

<img class="blur" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="brightness" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="contrast" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="grayscale" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="huerotate" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="invert" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="opacity" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="saturate" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="sepia" src="pine.png" alt="Pineapple" height="300" width="300">

<img class="shadow" src="pine.png" alt="Pineapple" height="300" width="300">

</body>

</html>

Output: