有没有一种方法可以使用JavaScript/CSS制作3D文字效果？

Question

我在我的网站上有一个标题，我希望它看起来像一个3D绘制的标题 - 就像下面的图片一样：

我该怎么做？我尝试创建一个<div>元素并将其放在它的后面，但是效果不同，但这并没有起作用。最好的方法是什么？到目前为止，我的代码如下。

<h1>My Header Here</h1>

CSS

h1 {
    color: white;
    border-color: black;
}

解决方案不一定要使用纯CSS，可以使用JS，但不允许使用外部库（除了jQuery）。

- Jack Bashford

---

CSS text-shadow - Jaromanda X

@JaromandaX 我该如何使它变得坚固？ - Jack Bashford

CSS text-shadow（文字阴影） - Jaromanda X

Answer 1

您可以像这样使用许多text-shadow：

body{ font-family: sans-serif; font-size: 2em; }

.coolShadow {
    color: white; 
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    text-shadow: 
      -1px 1px 0 #000,
      -2px 2px 0 #000,
      -3px 3px 0 #000,
      -4px 4px 0 #000,
      -5px 5px 0 #000,
      -6px 6px 0 #000,
      -7px 7px 0 #000;
}

<h1 class="coolShadow">My Header Here</h1>
<h2>No shadows for me :(</h2>
<h3 class="coolShadow">I'M COOL! :)<h3>

- Roko C. Buljan

Answer 2

1）使用 text-shadow

h1 {
  text-shadow: 2px 2px black;
}

2) 这种方法可能比方案#1更愚蠢，可能会带来更多的伤害，但是也许能够更好地解决问题。渲染多个元素，一个接一个地放置，并使用position: absolute进行定位。

<div class="h1_block">
  <h1 class="h1">StackOverflow</h1>
  <span class="h1 h1_shadow" style="top: 0; left: 0;">StackOverflow</span>
  <span class="h1 h1_shadow" style="top: -1; left: -1;">StackOverflow</span>
  <span class="h1 h1_shadow" style="top: -2; left: -2;">StackOverflow</span>
  <span class="h1 h1_shadow" style="top: -3; left: -3;">StackOverflow</span>
</div>

可能类似于这样的东西。

3）使用画布或图像。您可以在画布上动态渲染文本，并应用所选效果。

https://www.html5rocks.com/en/tutorials/canvas/texteffects/

这可能会有帮助。

- Patryk Cieszkowski

Answer 3

这应该能帮助你入门。首先，前往https://fonts.google.com/并找到适合你的谷歌字体（如果你不喜欢我选择的那个）。有数百种字体可供选择。然后尝试阴影值和阴影颜色。（我经常使用此工具处理颜色：https://www.w3schools.com/colors/colors_picker.asp。）

编辑：仅为了好玩，我选择了几个其他字体，并借用了Roko的技巧，使用多个text-shadow值（这比我的答案更好）。然后我尝试创建一个渐变阴影，在其中灰色逐渐变浅。

div {
  text-shadow:       
    -1px 1px 0 #aaa,
    -2px 2px 0 #a8a8a8,
    -3px 3px 0 #bbb,
    -4px 4px 0 #b8b8b8,
    -5px 5px 0 #ccc,
    -6px 6px 0 #c8c8c8,
    -7px 7px 0 #ddd;
}

#indie {
  font-family: 'Indie Flower', cursive;
  font-size: 112px;
  font-weight: bold;
}

#jua {
  font-family: 'Jua', sans-serif;
  font-size: 80px;
  font-weight: bold;
}

#neucha {
  font-family: 'Neucha', cursive;
  font-size: 80px;
  font-weight: bold;
}

#perm {
  font-family: 'Permanent Marker', cursive;
  font-size: 80px;
  font-weight: bold;
}

<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Jua|Neucha|Permanent+Marker" rel="stylesheet">

<div id="indie">LOVE</div>
<div id="jua">LOVE</div>
<div id="neucha">LOVE</div>
<div id="perm">LOVE</div>

- BobRodes