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)

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)

• javascript
• html
• css
• text
• 3d

• 1 CSS text-shadow – Jaromanda X Commented Aug 26, 2018 at 23:26
• @JaromandaX How would I be able to make that solid? – Jack Bashford Commented Aug 26, 2018 at 23:27
• 1 CSS text-shadow – Jaromanda X Commented Aug 26, 2018 at 23:28

3 Answers 3

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>

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./en/tutorials/canvas/texteffects/

this might be helpful.

This should get you started. First, go to https://fonts.google./ and find a google font that you think will work (if you don't like the one I picked, that is). There are hundreds of them. Then experiment with shadow values, and shadow colors. (I use this tool all the time to work with colors: https://www.w3schools./colors/colors_picker.asp.)

Edit: just for fun, I grabbed a few other fonts, and borrowed Roko's technique of using multiple text-shadow values (which improves on my answer). Then I experimented with creating a gradient in the shadows, where the grey gets progressively lighter.

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./css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis./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>