代码之家 › 专栏 › 技术社区 › Jack Bashford

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

3d text css html javascript

Jack Bashford · 技术社区 · 7 年前

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

我该怎么做?我试着创造一个 <div> 元素以相同的文本但不同的效果放在后面,但这不起作用。我怎么能做到最好?我的代码如下。

<h1>My Header Here</h1>

CSS

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

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

3 回复 | 直到 7 年前

Roko C. Buljan 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>

Patryk Cieszkowski 7 年前

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/

这可能会有帮助。

BobRodes 7 年前

这会让你开始。首先,转到 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>

推荐文章

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user28928120 · 在textarea中选择文本,通过packspace/delete删除它,为另一个元素添加css

1 年前

Earlien · 将解析文本中的加号作为ggplot2运算符进行求值

1 年前

user54097 · 滚动菜单项上的导航栏动画文本徽标

1 年前

Dawken · 从文本中提取字符串表情符号

2 年前

stack programming · 如何将损坏的文本恢复为阿拉伯语

2 年前

user25445882 · ggplot2文本位于上边距,翻转坐标

2 年前

Alexis Mora · 我在python中的reg ex与使用re.serach()不匹配

2 年前

jlklein · 带有geom_textpath()的多层圆环图:如何删除黑色连接线?

2 年前

Taylan Morcol · 替换字符的所有实例,但只能在匹配的字符串中替换

2 年前