有没有办法用JavaScript / CSS制作3D文字效果

时间:2018-08-26 23:23:24

标签: javascript html css text 3d

我的网站上有一个标头,我希望它看起来像3D绘制的标头-如下图所示:

我应该怎么做?我尝试创建一个<div>元素,以使其具有相同的文本但效果不同,但这没有用。我该怎么做?到目前为止,我的代码如下。

<h1>My Header Here</h1>

CSS

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

解决方案不必是纯CSS,也可以是JS,但是没有外部库(jQuery除外)

3 个答案:

答案 0 :(得分:7)

您可以像这样使用许多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>

答案 1 :(得分:1)

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/

这可能会有所帮助。

答案 2 :(得分:0)

这应该使您入门。首先,转到https://fonts.google.com/,找到您认为可以使用的google字体(如果您不喜欢我选择的字体,那就是)。有数百个。然后尝试阴影值和阴影颜色。 (我一直使用此工具处理颜色:https://www.w3schools.com/colors/colors_picker.asp。)

编辑:只是为了好玩,我抓了一些其他字体,并借用了Roko使用多个def f(x): return x - 1, x + 1 x = tf.zeros((), dtype=tf.float32) y, z = tf.py_func(f, (x,), (tf.float32, tf.float32)) print(y.op is z.op) # True 值的技术(这对我的回答有所改善)。然后我尝试在阴影中创建渐变,使灰色逐渐变亮。

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