阴影确实是为任何文本赋予深度和 3D 外观的好方法。通常,我们使用 text-shadow 为文本提供阴影,但此阴影很短,但要创建长阴影(文本像反射一样可见的阴影),我们必须在选择器和倾斜函数之前使用。
做法:做法是先用skew来创建倾斜的文字,然后再用before来制作使用skew函数创建阴影的原始文字。
HTML 代码:在本节中,我们将文本包裹在h1标签中。
HTML
Long Shadow Effect
GEEKS
CSS
HTML
Long Shadow Effect
GEEKS
CSS 代码:对于 CSS,请按照以下给出的步骤操作。
- 第1步:将灰色背景应用于身体。
- 第 2 步:将文本居中对齐并在其上使用倾斜函数。
- 第 3 步:将倾斜文本的颜色更改为背景颜色的略暗版本。
- 第四步:使用before选择器,将内容设置为h1标签的属性值。
- 步骤5:现在使用与原始角度相同的倾斜函数,但要取反。
注意:确保倾斜角度不超过70 度,并且“h1”标签样式和选择器之前使用的角度相同,一个是另一个的负值。
CSS
完整代码:是以上两段代码的组合。
HTML
Long Shadow Effect
GEEKS
输出: