带透视的 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>

阴影底部和文字底部似乎并不完全重合，那是因为基线高了一点。否则对于像 g j p q y 这样的字符来说是不好的。

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

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>