A Pen by Tim Daubenschütz.

index.html

<span>T</span>

<!-- 
Twitter: https://twitter.com/TimDaub

The most important thing creating the effect is, using a darker tone of your background color as the text-shadow color. So you wouldn't use a grey tone but a darker orange

I took the tones from: 
http://www.google.com/design/spec/style/color.html

-->

Long-Shadow-Explained-JS.markdown

Long Shadow Explained JS

I wanted to understand how these longshadows work, so I decided to code it myself.

Looks pretty sweet if you ask me :)

A Pen by Tim Daubenschütz on CodePen.

License.

script.js

// This method simple creates a string
// of the form
//
// 1px 1px 0px #123456, 2px 2px 0px #123456, 3px 3px 0px #123456, ...
// 
// Pretty straight forward if you ask me  :D
// Go ahead and play with the parameters of the function at the bottom!

var genLongShadow = function(num, color) {
  
  var value = '';
  
  for(var i = 1; i < num; i++) {
    value += i+'px '+i+'px 0px '+color;
    
    if(i != num-1) {
      value += ', ';
    }
  }
  
  
  return value;
};

document.querySelector('span').style.textShadow = genLongShadow(120, '#e64a19 ');

style.css

/*
I'm looking for a job in Berlin in 2015 (would also work in SF haha)!

So if you're interested send me a mail or DM at Twitter and I send you my CV!

tim.daubenschuetz@gmail.com
WIP: http://codepen.io/TimDaub/pen/bfCLz

*/

span {
  display:block;
  
  height:1.1em;
  width:1.1em;
  border-radius:0.05em;
  
  text-align:center;
  
  background-color: #ff5722;
  
  font-family: 'Lucida Grande';
  font-size:14em;
  color:#f5f5f5;
  
  
  /* IGNORE THIS PART
  
  This is just centering the button on the preview of codepen
  
  */
  position:absolute;
  top:0.125em;
  left:1.2em;
  overflow:hidden;
}