Long Text shadow Effect Using HTML & CSS | CSS Tricks

 

Long Text shadow Effect

Hello there, Today, I am sharing another simple CSS trick for text effect. In this project, I have shown how we can create a simple long text-shadow text effect using HTML and CSS. First, I have taken a div named 'wrapper,' and inside that div, I have taken an h1 tag with a data-title attribute. In this case, the data-title text and the main text have to the same. After giving a gradient-background, I have given the wrapper div padding, so the content is placed in the middle of the viewport. Later, I styled the h1 tag and gave it a CSS transform skew value of 60deg. After that, I styled the before pseudo-element of the h1 tag and gave it a CSS transform skew value of '-60deg'. I have shared a couple of CSS tricks snippets before. Please make sure to check those projects as well.



I hope you liked this simple snippet. If so, please share the articles of this blog and follow our social media profile to stay connected with this blog. Thank you for stopping by.

Please do not enter any spam link in the comment box.

Post a Comment

Please do not enter any spam link in the comment box.

Post a Comment (0)

Previous Post Next Post