Improved Windows 8 Logo

dabblet.css

/* Improved Windows 8 Logo */

* {
	font-family: "Myriad Pro";
	font-size: 96px;
}
body {
	padding: 50px;
	color: #646464;
}
body > section {
	width: 650px;
	-webkit-perspective: 300px;	
	-moz-perspective: 300px;
	-ms-perspective: 300px;
	-o-perspective: 300px;
	perspective: 300px;
}
div {
	display: inline-block;
	vertical-align: middle;
}
#text {
	text-indent: -40px;
	letter-spacing: -4px;
}
#text > span {
	vertical-align: 28px;
	font-size: 0.3em;
}
#window {
	width: 250px;
	height: 100px;
	-webkit-transform: rotateY(-25deg);
	-moz-transform:  rotateY(-25deg);
	-ms-transform: rotateY(-25deg);
	-o-transform: rotateY(-25deg);
	transform: rotateY(-25deg);
}
#window span {
	display: block;
	float: left;
	margin: 0 3% 2% 0;
	width: 46%;
	height: 46%;
}
#window span:nth-of-type(1) {
	background: #f97439;
}
#window span:nth-of-type(2) {
	background: #5bd73a;
}
#window span:nth-of-type(3) {
	background: #088ccc;
}
#window span:nth-of-type(4) {
	background: #fbc912;
}

dabblet.html

<section>
	<div id="window">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div id="text">
		Windows<span>®</span> 8
	</div>
</section>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}