Some fancy experimenting with an animated, transformed, multiple-box-shadowed logo :/

dabblet.css

/* Some fancy experimenting with an animated, transformed, multiple-box-shadowed logo :/ */
body { background:#EEE; min-height: 60em; }

#logo {

	XXXborder: 0 solid #FFF;
	XXXborder-width: 0 .25em .25em 0;
	XXXborder-radius: .125em;
	width: 5em;
	height: 5em;
	background: #000;
	color: #FFF;
	font-size: 1.68em;
	font-weight: normal;
	padding: 1em;
	margin: 0;
	line-height: 1;
	XXopacity: .3;
	box-shadow: 
		5em 10em 0 18em rgba(200,200,0,0.025),
		0 5em 0 5em rgba(0,200,200,0.05),
		0 5em 0 15em rgba(0,0,200,0.05),
		0 0 0 .5em rgba(255,255,255,.8)



	;
	text-align: center;
	
	transform: rotate(-45deg); 
	position: fixed; /* or absolute */
	top: 0;
	left: -3.5em;

	transition: box-shadow .6s;



}
#logo:hover { box-shadow: none; }
#logo a {
	color:#FFF;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	display: inline-block;
	width: 50%;



	transition: transform .6s;
	/* http://davidwalsh.name/translate3d */
	backface-visibility: hidden;
	perspective: 1000;



	position: absolute;
	bottom: 1.125em;
	right: .5em;

	transform: rotate(45deg); 

}
#logo a:hover,
#logo a:focus,
#logo a:active { transform: none; }

dabblet.html

<h1 id="logo"><a href="#">David Hund</a></h1>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}