Untitled

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.element { 
width: 500px; 
height: 200px; 
border: 1px solid; 
font-size: 25px; 
transition: height 2s ease-in-out 1s; 
} 
.element:hover { 
height: 400px; 
background-color: green; 
} 
</style> 
</head> 
<body> 
<div class = "element"> 
<p> Hover over this div and wait to see the changes </p> 
</div> 
</body> 
</html>
PART B
8. Program to demonstrate Text shadows using HTML Canvas. 
lab8B.html 
<!DOCTYPE html> 
<html> 
<head><title>Text Shadow</title> 
</head> 
<body> 
<canvas id="myCanvas" width="500" height="600"></canvas> 
<script> 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'blue'; 
ctx.shadowColor = 'aqua'; 
ctx.shadowBlur = 2; 
ctx.shadowOffsetX = 5; 
ctx.font = 'italic 32px sans-serif'; 
ctx.fillText('JAIN BCA', 10, 50); 

ctx.fillStyle = 'blue'; 
ctx.shadowColor = 'aqua'; 
ctx.shadowBlur = 2; 
ctx.shadowOffsetX = -5; 
ctx.font = 'italic 32px sans-serif'; 
ctx.fillText('JAIN BCA', 250, 50); 

ctx.fillStyle = 'red'; 
ctx.shadowColor = 'grey'; 
ctx.shadowBlur = 3; 
ctx.shadowOffsetY = 7; 
ctx.font = 'italic 32px sans-serif'; 
ctx.fillText('JAIN BCA', 10, 150); 

ctx.fillStyle = 'red'; 
ctx.shadowColor = 'grey'; 
ctx.shadowBlur = 3; 
ctx.shadowOffsetY = -7; 
ctx.font = 'italic 32px sans-serif'; 
ctx.fillText('JAIN BCA', 250, 150); 
</script> 
</body> 
</html>







9. Program to Demonstrate Source-Over, Source-in, and Source-Out properties for composition using HTML Canvas. 
lab9B.html 
<!DOCTYPE HTML> 
<html> 
<head> 
<script> 
window.onload = function() 
{ 
drawShapes("source-over"); 
drawShapes("source-in"); 
drawShapes("source-out"); 
} 
function drawShapes(type) 
{ 
canvas = document.getElementById(type); 
context = canvas.getContext("2d"); 
context.fillStyle = "blue"; 
context.fillRect(15,15,70,70); 
context.globalCompositeOperation = type; 
context.fillStyle = "red"; 
context.beginPath(); 
context.arc(75,75,35,0,Math.PI*2); 
context.fill(); 
} 
</script> 
<style type="text/css"> 
td {text-align:center;} 
</style> 
</head> 
<body> 
<table border="1" align="center"> 
<tr> 
<td> 
<canvas id="source-over" width="120" height="110"></canvas><br/>Source-over 
</td> 
<td> 
<canvas id="source-in" width="120" height="110"></canvas><br/>Source-in 
</td> 
<td> 
<canvas id="source-out" width="120" height="110"></canvas><br/>Source-out 
</td> 
</tr> 
</table> 
</body> 
</html>


10. Program to create a rectangle and animate increase and decrease the size of rectangle. 
lab10B.html 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.rectangle { 
width: 100px; 
height: 50px; 
background-color: blue; 
animation: resize 3s infinite; 
} 
@keyframes resize { 
0%{ 
width: 100px; 
height: 50px; 
} 
50% { 
width: 200px; 
height: 100px; 
} 
} 
</style> 
</head> 
<body> 
<div class="rectangle"></div> 
</body> 
</html>
Editor is loading...