3D Heading Via CSS

dabblet.css

/*
	3D Heading Via CSS
*/
body
{
  background: #5F616C;
}

h1
{
  font-family: 'Dosis', sans-serif;
  font-size: 7em;
  font-weight: 400;
  color: #fff;
  margin: 0.5em 0;
  text-align: center;
  
  /* THIS DOES THE TRICK */
  text-shadow:
	1px 1px 0 #CCC,
	2px 2px 0 #CCC, /* end of light grey shadow */
	3px 3px 0 #444,
	4px 4px 0 #444,
	5px 5px 0 #444, /* end of deep dark shadow */
	0 -1px 20px rgba(0,0,0,0.7); /* some area shadow makes it nicer */
}

/*
	Loosely based on this http://pgwebdesign.net/blog/3d-css-shadow-text-tutorial
*/

dabblet.html

<!-- some nice font from Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>

<h1>3D Heading Via CSS</h1>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"all"}