Is there a way to make a 3D-text effect with JavaScript/CSS

Question

I have a header on my website, and I'd like it to look like a 3D drawn header - like the image below:

How should I do this? I tried creating a <div> element to put behind it with the same text but a different effect, but that didn't work. How best could I do this? My code so far is below.

<h1>My Header Here</h1>

CSS

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

The solution does not have to be pure CSS, it can be JS, but no external libraries (apart from jQuery)

Answer 1

You could use lots of text-shadows like this:

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

1) Use text-shadow

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

2) Stupid and might cause more harm than good, but might work better than solution #1. Render multiple elements, one below another and position them with 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>

Probably something similar to that.

3) Use canvas. Or an image. You can dynamically render the text on your canvas, and apply chosen effects.

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

this might be helpful.