CSS文本阴影与透视

Question

我希望实现一个阴影效果，看起来文本的底部正在触摸地板，阴影在其后面投射。类似于此post中的透视框或此图像中的阴影

Shadows http://www.psd-dude.com/tutorials/create-a-text-shadow-in-photoshop/text-shadow.jpg

我只需要将阴影向一个方向前进。

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

Answer 1

您可以使用CSS转换和透视：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

阴影的底部似乎与文本的底部完全不一致，因为基线稍微高一些。否则对于g j p q y这样的字符会很糟糕。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在伪元素中对阴影文本进行了硬编码。希望避免这种情况，并让它使用与元素相同的文本。这可能具有element()背景，仅受Firefox支持。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

I made a draft on JSFiddle