📜  如何在不使用 HTML 和 CSS 中的 text-shadow 的情况下创建文本的长阴影?

📅  最后修改于: 2021-09-01 02:05:40             🧑  作者: Mango

阴影确实是为任何文本赋予深度和 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

    
  

输出: