3D shadow

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

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="6">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>

CSS

@import url('https://fonts.googleapis.com/css?family=Teko');
    #hallo {
        font-family:'Teko', Arial, Sans-Serif;
        font-size: 90px;
        text-shadow: 0px 4px 0 #ccc, 0px 6px 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() || 6;
        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);
    }