Skewed Papper Text Effect code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PAPER</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="center"> <h1 data-title="PAPER">PAPER</h1> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: gold; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } h1 { margin: 0; padding: 0; font-size: 10em; font-family: Arial, Helvetica, sans-serif; color: rgba(252,4,4,0.4); text-shadow: 1px 2px 6px gold , 1px 0 0 rgba(131,131,131,0.6); transform: rotate(-20deg) skew(20deg); } h1::before { content: attr(data-title); position: absolute; color: white; transform: translate(50px , 0) skew(-40deg); text-shadow: none; }
