Use Photo Editing Effects by HTML & CSS Programming
<!DOCTYPE html>
<html>
<head>
<title>Create Effective Photo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
</head>
<center><body>
<div class="header">
<div id="a">
<img src=" " height="10px">
</div>
<div id="t">
<font size="10">Photo Editing</font>
</div>
<div id="b">
<img src=" " height="1px">
</div>
</div>
<div class="container">
<div id="myimg">
<img src="https://wallpapercave.com/wp/wp4110355.jpg" class="mainimg">
</div>
<div class="btnset">
<button type="button"
onclick="document.getElementById('myimg').style.filter='blur(4px)'"; class="pink">
<font size="5">Blur</font>
</button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='brightness(140%)'"; class="pink">
<font size="5">Brighten</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='contrast(80%)'"; class="pink">
<font size="5">Contrast</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='grayscale(130%)'"; class="pink">
<font size="5">B&W</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='opacity(60%)'"; class="pink">
<font size="5">Opaque</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='saturate(10)'"; class="pink">
<font size="5">Colourful</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='sepia(100%)'"; class="pink">
<font size="5">Sepia</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='none'"; class="violet">
<font size="5">RESET</font></button>
</div>
</div>
</body></center>
</html>
<html>
<head>
<title>Create Effective Photo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet">
</head>
<center><body>
<div class="header">
<div id="a">
<img src=" " height="10px">
</div>
<div id="t">
<font size="10">Photo Editing</font>
</div>
<div id="b">
<img src=" " height="1px">
</div>
</div>
<div class="container">
<div id="myimg">
<img src="https://wallpapercave.com/wp/wp4110355.jpg" class="mainimg">
</div>
<div class="btnset">
<button type="button"
onclick="document.getElementById('myimg').style.filter='blur(4px)'"; class="pink">
<font size="5">Blur</font>
</button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='brightness(140%)'"; class="pink">
<font size="5">Brighten</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='contrast(80%)'"; class="pink">
<font size="5">Contrast</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='grayscale(130%)'"; class="pink">
<font size="5">B&W</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='opacity(60%)'"; class="pink">
<font size="5">Opaque</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='saturate(10)'"; class="pink">
<font size="5">Colourful</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='sepia(100%)'"; class="pink">
<font size="5">Sepia</font></button>
<button type="button"
onclick="document.getElementById('myimg').style.filter='none'"; class="violet">
<font size="5">RESET</font></button>
</div>
</div>
</body></center>
</html>
OUTPUT
Posts
55 Comments
Best program
ReplyDeleteAmazing 🤗🤗🤗
ReplyDeleteWow
ReplyDeleteGood very good 💐💐💐
ReplyDeleteVery good 💐💐💐💐💐
ReplyDeletegreat done
ReplyDeleteAmazing
ReplyDelete😲😲😲😲😲
ReplyDeleteGood Job
ReplyDeleteWaw
ReplyDeleteWonderful
ReplyDeleteNicely done
ReplyDeleteGood Effect
ReplyDeleteAttractive
ReplyDeleteAttractive work
ReplyDeleteMind Blowing
ReplyDeleteSuperb
ReplyDeleteNicely Work
ReplyDeleteBright Work
ReplyDeleteSuperb
ReplyDeleteperfect
ReplyDeletePerfect Work
ReplyDeleteAttractive
ReplyDeleteGood Work
ReplyDeleteperfect 👌
ReplyDeleteperfect 👌
ReplyDeleteGreat
very nice
ReplyDeletevery nice work
ReplyDeleteosm
ReplyDeleteSuper
ReplyDeletegood effects on photo
ReplyDeleteSuper
ReplyDeleteAWSM
ReplyDeleteN I C E W O R K
ReplyDeleteW O W GREAT W O R K
ReplyDeleteKallu
ReplyDeleteWow beautiful
Fantastically work
ReplyDeleteSuperb Effects
ReplyDeleteExclusive
ReplyDeletefabulous idea
ReplyDeleteW O N D E R F U L
ReplyDeleteOUTSTANDING
ReplyDeletePerfect 👌
ReplyDeleteexcellent job
ReplyDeleteGreattttttt
ReplyDeleteW o W o W o W
ReplyDeleteGazab
ReplyDeleteGood
ReplyDeleteWow amazing 🌼🌼🌼
ReplyDeleteWonderful 💐💐💐
ReplyDeleteAmazing
ReplyDeleteKallu good
ReplyDeleteExcellent
ReplyDeletewow amazing
ReplyDeleteN I c e w o r k
ReplyDelete