Fractured Text code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Fractured Text</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1 data-name="SMTP587">SMTP587</h1> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: gold; } h1 { margin: 0; padding: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: transparent; font-family: Arial, Helvetica, sans-serif; font-size: 10em; } h1::before, h1::after { content: attr(data-name); color: aqua; position: absolute; top: 0; left: 0; overflow: hidden; transition: 0.3; } h1::before { -webkit-clip-path: polygon(55% 0 , 0 0 , 0 100% , 35% 100%); clip-path: polygon(55% 0 , 0 0 , 0 100% , 35% 100%); } h1::after { -webkit-clip-path: polygon(55% 0 , 100% 0 , 100% 100% , 35% 100%); clip-path: polygon(55% 0 , 100% 0 , 100% 100% , 35% 100%); } h1:hover::before { top: -5px; left: -10px; transform: rotate(-5deg); } h1:hover::after { top: 5px; left: 10px; transform: rotate(5deg); }
