Text Stroke code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Stroke</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Stroke</h1> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: blue; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0; color: white; font-family: Verdana, Geneva, […]
Gradient Border code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gradient Border</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="box"></div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; } .box { width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 4px solid transparent; […]
Pencil Stroke Loader Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stroke Loader</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="stroke"></div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; } .stroke { width: 400px; height: 2px; background: white; position: absolute; top: 50%; left: […]
JQuery Image Comparison Plugin code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery Image Comparison Plugin</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="twentytwenty.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="jquery.event.move.js"></script> <script src="jquery.twentytwenty.js"></script> <script type="text/javascript"> $(function(){ $(".box[data-orientation!='vertical']").twentytwenty({default_offset_pct:0.1}); }) </script> </head> <body> <div class="box"> <img src="image1.jpg"> <img src="image3.jpg"> </div> </body> </html> 2.style.css: body { […]
Tobelight Text Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tobelight Text Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li>S</li> <li>M</li> <li>T</li> <li>P</li> <li>5</li> <li>8</li> <li>7</li> </ul> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; } ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); […]
3D Hover Effects code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Hover Effects</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <div class="box"></div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: yellow; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); perspective: 1000px; } .box […]
3D Flip Animation code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Flip Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <div class="front"> <img src="image1.jpg"> </div> <div class="back"> <img src="image3.jpg"> </div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: yellowgreen; } .box { position: absolute; top: 50%; […]
Text Layers Typography code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Layers Typography</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 data-title="Visual Code">Visual Code</h1> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: red; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0; font-family: […]
Split Text Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Split Text Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 data-title="Split">Split</h1> </body> </html> 2.style.css: body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 8em; […]
Cool Button Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cool Button Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#" data-title="Button">Button</a> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: black; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 180px; line-height: 60px; […]