Home>Article>Web Front-end> How to achieve font long shadow effect in css

How to achieve font long shadow effect in css

王林
王林 forward
2020-05-18 09:12:45 2949browse

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:

How to achieve font long shadow effect in css

Important attributes:

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

(Video tutorial recommendation:css video tutorial)

HTML code:

屮艸芔茻

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!

Statement:
This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete