Untitled
unknown
plain_text
5 months ago
3.3 kB
0
Indexable
DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
border-width:1px;
border-style:solid;
transition-property: height, width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay:0s;
}
div:hover
{
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>
<p> Hover over this div and wait to see the changes </p>
</div>
</body>
</html>
8. Program to Demonstrate shorthand properties in CSS.
lab8A.html
<!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>Leave a Comment