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元素而不是阴影来执行此操作：

＆＃13;

＆＃13;

[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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

另一种展示方式，

span {
  color: black;
  position: relative;
  font-family: Calibri;
  font-size: 110pt;
}

span:before {
  bottom: 2px;
  color: rgba(0, 0, 0, 0.1);
  content: attr(title);
  left: 9px;
  position: absolute;
  text-shadow: 0 0 20px grey;
  transform-origin: bottom;
  transform: skew(30deg) scale(0.8, 1);
  z-index: -1;
}

<span title="Text">Text</span>

Answer 3

编写核心CSS是不可能的。 您只能使用Text Shadow生成的。

Answer 4

它不完全相同，但你可以得到这个想法!!

span {
      display: inline-block;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      position: relative;
      padding: 20px;
      border: none;
      font: normal 100px/1 "Oswald", Helvetica, sans-serif;
      color: #e74c3c;
      text-align: center;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      letter-spacing: 15px;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
    }
    
    span:after {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      z-index: -1;
      position: absolute;
      content: "Text";
      top: 34px;
      left: 28px;
      padding: 20px;
      border: none;
      font: normal 77px/1 "Oswald", Helvetica, sans-serif;
      color: rgba(255,255,255,0.2);
      text-align: center;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      letter-spacing: 23px;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
      -webkit-transform: rotateX(50deg)   skewX(-30deg);
      transform: rotateX(50deg)   skewX(-30deg);
    }

<span title="Text">Text</span>

Answer 5

您可以使用translate方法及其矩阵属性：

我的JS小提琴示例：https://jsfiddle.net/gsmjjm7b/

HTML：

<div id="relative">

  <h1 id="title">TEXT</h1>
  <h1 class="shadow">TEXT</h1>
</div>

CSS：

#relative{position:relative;margin:100px}

h1 {font-size:80px;margin:0}

h1.shadow {
  position:absolute;
  top:0;
  left:-25px;
  -ms-transform: matrix(1, 0, 0.7, 1, 0, 0); /* IE 9 */
  -webkit-transform: matrix(1, 0, 0.7, 1, 0, 0); /* Safari */
  transform: matrix(1, 0, 0.7, 1, 0, 0);
  text-shadow:2px 2px 4px rgba(0,0,0,0.6);
  opacity:1;color:rgba(0,0,0,0)
  }