Untitled
unknown
plain_text
a month ago
2.8 kB
3
Indexable
Never
<!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