Posted By
Bajarangi soft ,
Posted On 08-10-2020
Approach: The approach is to use a skew to create tilted text first and then use before to make the original text whose shadow was created using the skew function.
HTML Code: In this section, we have our text wrapped inside a h1 tag.
Complete Code: It is the combination of the above two sections of code.
<!DOCTYPE html>
<html>
<head>
<title>Long Shadow Effect</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: rgb(122, 116, 116);
}
.center {
margin: 200px 0 0 350px;
}
h1 {
font-size: 6em;
color: rgba(0, 0, 0, .2);
position: absolute;
margin: 0;
padding: 0;
transform-origin: bottom;
transform: skewX(50deg);
}
h1::before {
content: attr(data-title);
position: absolute;
color: #fff;
transform-origin: bottom;
transform: skewX(-50deg)
}
</style>
</head>
<body>
<div class="center">
<h1 data-title="Bajarangi">Bajarangi</h1>
</div>
</body>
</html>
Note: Make sure the skew angle is not more than 70deg and the angle used in “h1” tag styling and before selector are the same with one being the nagative value of the other.