CSS - 信背后的影子

Question

我想用背后的阴影制作文字效果,如下所示:

这是我的代码:

span {
  font-family: Calibri;
  font-size: 110pt;
  text-shadow: -14pt 18pt 4pt rgba(0,0,0,0.5);
}

<span>Text</span>

但这个简单的文字阴影,我需要改造它.如何使用CSS创建此效果,只有一个 HTML标签<span>？
感谢帮助.

Answer 1

您可以使用psuedo元素而不是阴影来执行此操作:

[data-shadowtext] {
  position: relative;
  font-size: 150px;
}

[data-shadowtext]::before,
[data-shadowtext]::after {
  content: attr(data-shadowtext);
}

[data-shadowtext]::before {
  position: absolute;
  z-index: 0;
  top: -60px;
  left: 3px;
  font-size: 1.2em;
  /* the text is 20% larger than the parent */
  color: transparent;
  /* hide the text */
  text-shadow: 0 0 25px black;
  /* create a shadow only from the blur */
  transform-origin: bottom;
  transform: rotateX(75deg) skew(15deg);
  letter-spacing: -15px;
}

[data-shadowtext]::after {
  position: relative;
  z-index: 1;
}

body {
  margin: 20px 0 0 80px;
}

<div data-shadowtext="Text"></div>