Program 1 <html> <head> <style> button{ padding:30px; font-size:20px; color:white; border:none; cursor:pointer; display:inline-block; width:25%; height:100px; /*box-shadow:0px 8px 16px green;*/ border:2px solid green; } /*button:hover{ border:none; background-color:bisque; color:aqua; cursor:not-allowed; box-shadow:0px 8px 10px green; }*/ </style> </head>...
Program 1 <html> <head> <style> div{ border-image:url(C:\\Users\\Lenovo\\Downloads\\border.png) 30 stretch; border-style:solid; height:300px; border-width:7px; } </style> </head> <body> <div> </div> </body> </html>
Program 1 <html> <head> <style> /*body{ background-color: aqua; } @media (max-width:600px) { body{ background-color: aquamarine; } }*/ @media (orientation:landscape) { body{ background-color: beige; } } @media(orientation:portrait) { body{ background-color: bisque; } } </style> </head>...
Program 1 <html> <head> <style> div{ width:100px; height:100px; border:2px solid black; overflow:scroll; } </style> </head> <body> <div> Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a...
Program 1 <html> <head> <style> div{ width:200px; height:200px; background-color: red; transition:width 2s,height 2s,transform 2s; } div:hover{ width:500px; height:500px; transform:rotate(150deg); } </style> </head> <body> <div> Some text </div> </body> </html>
Program 1 <html> <head> <style> div{ width:100px; height:100px; background-color:red; transition:width 2s,height 4s; transition-delay:2s; } div:hover{ width:300px; height:300px; } </style> </head> <body> <div> Some text </div> </body> </html>
Program 1 <html> <head> <style> div{ width:200px; height:200px; background-color: red; /*transform:translate(300px,300px);*/ /*transform:rotate(-20deg);*/ /*transform:scale(2,3);*/ /*transform:scaleX(2);*/ /*transform:scaleY(3);*/ /*transform:skewY(10deg);*/ /*transform:skew(20deg,10deg);*/ /*transform:translate(200px,0px) rotate(20deg) skew(10deg,30deg);*/ /*transform:rotateZ(150deg) translateZ(250px);*/ } </style> </head> <body> <div> Some text </div> </body> </html>
Program 1 <html> <head> <style> div{ background-color:red; width:300px; height:300px; /*animation-name:example; animation-duration:3s; animation-delay:2s; animation-iteration-count:3; animation-timing-function: ease-out;*/ animation:example 2s linear 2s 3; } @keyframes example { from {background-color: red;} to {background-color: yellow;} } </style> </head> <body>...
Program 1 <html> <head> <style> p{ text-shadow:2px 2px red,5px 4px green; } div{ box-shadow:2px 2px 5px 7px lightblue inset,5px 5px 5px red; } </style> </head> <body> <p>This is some text</p> <div> This is a...
Program 1 <html> <head> <style> .flex-container{ display:flex; /*flex-direction:row-reverse;*/ justify-content:flex-end; } .flex-container>div{ background-color: blue; padding:20px; font-size:30px; } </style> </head> <body> <div class=”flex-container”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
