How to achieve font long shadow effect in css

First let’s take a look at the implementation effect, as shown in the figure below:

Important attributes:

text The -shadow property sets a shadow to the text.

(Video tutorial recommendation: css video tutorial)

HTML code:

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

CSS code:

 .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);
  }

Recommended tutorial: CSS basic tutorial

The above is the detailed content of How to achieve font long shadow effect in css. For more information, please follow other related articles on the PHP Chinese website!