Skip to content

Instantly share code, notes, and snippets.

@brianblakely
Created March 14, 2012 17:07
Show Gist options
  • Save brianblakely/2037931 to your computer and use it in GitHub Desktop.
Save brianblakely/2037931 to your computer and use it in GitHub Desktop.
Improved Windows 8 Logo
/* 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;
}
<section>
<div id="window">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="text">
Windows<span>®</span> 8
</div>
</section>
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment