Text Shadow

Text Shadow code:

1.index.html:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Shadow</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="center"> <h1 data-title="SHADOW">SHADOW</h1> </div> </body> </html>

2.style.css:

body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; overflow: hidden; background: red; } .center { margin: 300px 0 0 300px; } h1 { font-size: 12em; color: rgba(0,0,0,0.2); position: relative; margin: 0; padding: 0; transform-origin: bottom; transform: skewX(50deg); } h1::before { content: attr(data-title); position: absolute; color: white; transform-origin: bottom; transform: skewX(-50deg) translate(-50px,22px) scaleY(1.5); }

Оставьте комментарий

Ваш адрес email не будет опубликован.