Snow Fall Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Snow Falling Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section> <div class="snow1"></div> <div class="snow2"></div> <div class="snow3"></div> </section> </body> </html> 2.style.css: body { margin: 0; padding: 0; } section { background: url(image.jpg); background-size: cover; width: 100%; height: 1000px; position: relative; […]
Архивы по годам: 2022
218 записей
Stretchable Text Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Hover Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>VISUAL CODE</h1> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: rgb(204,102,102); } h1 { color: chartreuse; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Arial, […]
Stretchable Button Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stretchable Button</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <a href="#">VISUAL CODE</a> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: gold; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 15px 0; font-size: […]
3D Menu Hover Effect Code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Menu Hover Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul> <li><a href="#"><span title="Home">Home</span></a></li> <li><a href="#"><span title="About">About</span></a></li> <li><a href="#"><span title="Service">Service</span></a></li> <li><a href="#"><span title="Contact">Contact</span></a></li> </ul> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: gray; } ul { […]
Arrow CSS code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Arrow CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> 2.style.css: body { margin: 0; padding: 280px 0 0 500px; background: rebeccapurple; } .left, .right { width: 100px; height: 100px; transition: 0.5s; float: left; box-shadow: -2px […]
Text Clipping Mask code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Clipping Mask</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>visual<br>code</h1> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: rgb(120,198,243); } h1 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12em; text-align: center; margin: 250px auto; text-transform: uppercase; […]
Full Background Image code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Full Background Image</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ut odit molestias tempora numquam, ducimus, modi provident distinctio illo, commodi architecto adipisci perspiciatis! Aliquam accusantium nulla recusandae delectus iusto […]
Grayscale Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Grayscale Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <img src="image.jpg"> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: rgb(211,11,1); } img { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); filter: grayscale(100%); transition: 0.5s ease-in-out; […]
Skewed Background Using Border code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Skewed Background Using Border</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="sec1"></section> <section class="sec2"></section> <section class="sec3"></section> </body> </html> 2.style.css: body { margin: 0; padding: 0; } .sec1, .sec2, .sec3 { height: 400px; width: 100%; } .sec1 { background: rgb(211,200,1); […]
Skewed Background Tutorial code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Skewed Background</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="sec1"></section> <section class="sec2"></section> </body> </html> 2.style.css: body { margin: 0; padding: 0; } .sec1 { width: 100%; height: 500px; background: rgb(137,212,255); position: relative; } .sec2 { width: 100%; height: 500px; background: […]