Implementing long shadow of text in less in CSS3

This article mainly introduces how to implement long text shadow in CSS3 LESS, and shares it with you. The details are as follows:

question

To achieve the following effect

Main knowledge points

Font shadow in css text-shadowless

Loops and merge code in syntax

<div class="long-shadow">豮艸芔茻</div>

 .loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));
    text-shadow+: (1px * @counter) (1px * @counter) #2d585a;
  }
 .long-shadow{
    overflow: hidden;
    background-color: #5f9ea0;
    width:800px;
    height: 160px;
    line-height: 160px;
    text-align: center;
    letter-spacing: 80px;
    color: #fff;
    font-size: 100px;
    .loop(200);
  }

This is the end of this article about how to implement long shadow of text in less in CSS3. For more relevant content about long shadow of text in less, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!