Есть ли способ сделать эффект 3D-текста с помощью JavaScript / CSS?

Question

У меня есть заголовок на моем веб-сайте, и я хотел бы, чтобы он выглядел как нарисованный 3D-заголовок - как на рисунке ниже:

Как мне это сделать?Я попытался создать элемент <div>, чтобы поместить за ним тот же текст, но с другим эффектом, но это не сработало.Как лучше всего я могу это сделать?Мой код пока приведен ниже.

<h1>My Header Here</h1>

CSS

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

Решение не должно быть простым CSS, это может быть JS, но не внешние библиотеки (кроме jQuery)

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>

Answer 2

Это должно помочь вам начать.Сначала перейдите на https://fonts.google.com/ и найдите шрифт Google, который, по вашему мнению, будет работать (если вам не нравится тот, который я выбрал, то есть).Их сотни.Затем поэкспериментируйте со значениями тени и цветами тени.(Я все время использую этот инструмент для работы с цветами: https://www.w3schools.com/colors/colors_picker.asp.)

Редактировать: просто для удовольствия, я взял несколько других шрифтов и позаимствовал у Роко технику использования нескольких значений 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>

Answer 3

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) Используйте canvas.Или изображение.Вы можете динамически отображать текст на холсте и применять выбранные эффекты.

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

это может быть полезно.