title: Is there a way to make a 3D-text effect with JavaScript/CSS
body: <p>I have a header on my website, and I'd like it to look like a 3D drawn header - like the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/RofHp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RofHp.jpg" alt=""></a></p>
  
  <p>How should I do this? I tried creating a <code>&lt;div&gt;</code> 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.</p>
  
  <pre><code>&lt;h1&gt;My Header Here&lt;/h1&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>h1 {
      color: white;
      border-color: black;
  }
  </code></pre>
  
  <p>The solution does not have to be pure CSS, it can be JS, but no external libraries (apart from jQuery)</p>