3D shadow

style a text-shadow to a 3D text with shadow

by Robert Kolatzek

HTML

<div id="hallo"> Hallo!</div>
  <label for="shadowX">X</label><input id="shadowX" type="range" min="-100" max="100" value="0" step="10">
  <label for="shadowY">Y</label><input id="shadowY" type="range" min="-100" max="100" value="100" step="10"><br>
  <label for="blockDeep">Block deep</label>
  <input type="text" id="blockDeep" value="4">px<br>
  <label for="shadowDeep">Shadow deep</label>
  <input type="text" id="shadowDeep" value="8">px<br>
  <label for="blockColor">Block color</label>
  <input type="color" id="blockColor" value="#CCC"><br>
  <label for="shadowColor">Shadow color</label>
  <input type="color" id="shadowColor" value="#666">
  <p id="values2"></p>  
  <p><a href="http://robert.kolatzek.org" target="_blank">Author: Robert Kolatzek</a></p>
      <p><a href="https://creativecommons.org/licenses/by-sa/3.0/deed.de">License: CC-BY-SA 3.0</a></p>

CSS

#hallo {
      font-family: 'Open Sans', Arial, Sans-Serif;
      font-size: 90px;
      text-shadow: 0px 4px 0 #ccc, 0px 8px 0 #888;
      background-color: #999;
      color: #FFF;
    }

JavaScript

$('#shadowX, #shadowY, #blockDeep, #shadowDeep, #blockColor, #shadowColor').on('change keyup click',follow);
    function follow(){
      var blockColor = $('#blockColor').val()||'#CCC';
      var blockDeep = $('#blockDeep').val()||4;
      var shadowColor = $('#shadowColor').val()||'#666';
      var shadowDeep = $('#shadowDeep').val()||8;
      var sh1 = $('#shadowX').val();
      var sh2 = $('#shadowY').val();
      var css = '';
      for(var i = 1; i <= blockDeep; i++){
        var x = Math.round((i*sh1)/100);
        var y = Math.round((i*sh2)/100);
        css = css + ''+ x+'px '+y+'px 0px '+blockColor+', ';
      }
      for(var i = 1; i <= shadowDeep; i++){
        var x = Math.round((i*sh1)/100);
        var y = Math.round((i*sh2)/100);
        css = css + ''+ x+'px '+y+'px 0px '+shadowColor+', ';
      }
      $('#values2').text('text-shadow: '+css.substring(0, css.length-2)+';');
      css2 = {textShadow: css.substring(0, css.length-2)};
      $('#hallo').css(css2);
    }