带透视的 CSS 文本阴影

Question

我想实现一种阴影效果，看起来文字的底部接触到地板，阴影投射在它后面。类似于此post 中的透视框或此图像中的阴影

_{（来源：psd-dude.com）}

我只需要阴影向一个方向移动。

有纯 CSS 解决方案吗？有解决办法吗？我已经看到它是用盒子完成的，但不是文本。上图是用Photoshop制作的

Answer 1

您可以使用 CSS 变换和透视图：

body {
  margin: 50px;
  text-align: center;
}
#shadow {
  border: 1px solid blue;
  position: relative;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  perspective: 50px;
  perspective-origin: 50% 100%;
  display: inline-block;
}
#shadow::after {
  content: 'p Shadow q';
  outline: 1px solid red;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: scaleY(0.5) rotateX(-15deg);
  transform-origin: 50% 100%;
  opacity: .3;
}

<div id="shadow">p Shadow q</div>

阴影的底部似乎与文本的底部并不完全重合，那是因为基线有点高。否则对gjpqy这样的字符会很不利。

如果你不想要这个空间，你可以减少行高。

body {
  margin: 50px;
}
#shadow {
  position: relative;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 0;
  perspective: 50px;
  perspective-origin: 50% 100%;
}
#shadow::after {
  content: 'p Shadow q';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: scaleY(0.5) rotateX(-15deg);
  transform-origin: 50% 100%;
  opacity: .3;
}

<div id="shadow">p Shadow q</div>

我在伪元素中硬编码了阴影文本。最好避免这种情况，并让它使用与元素相同的文本。 element() 背景可以做到这一点，只有 Firefox 支持。

body {
  margin: 50px;
  text-align: center;
}
#shadow {
  border: 1px solid blue;
  position: relative;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  perspective: 50px;
  perspective-origin: 50% 100%;
  display: inline-block;
}
#shadow::after {
  content: '';
  background: -moz-element(#shadow);
  background: element(#shadow);
  outline: 1px solid red;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: scaleY(0.5) rotateX(-15deg);
  transform-origin: 50% 100%;
  opacity: .3;
}

<div id="shadow">p Shadow q</div>

Answer 2

我想到了一个解决方案，在每个字母中添加一个:after-Element，例如对于字母T，使用content: "T"。然后让内容本身不可见，只需使用:after-Element 上的text-shadow 属性，我们可以通过text-transform: rotateX(70deg) 旋转它。

I made a draft on JSFiddle.