Nintendo Gamecube Logo done in pure CSS
http://forum.fronteers.nl/post/196/#p196
HTML
<div id="logo">
<div id="gamecube">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
</div>
<h1>Nintendo</h1>
<h2>Gʌme Cube</h2>
</div>
CSS
body {
background: #000;
}
#logo {
position: relative;
text-align: center;
}
#gamecube {
display: inline-block;
position: relative;
width: 125px;
height: 130px;
-webkit-transform: scale3d(1.15,1,1);
-moz-transform: scale(1.05,1);
-0-transform: scale(1.05,1);
-ms-transform: scale(1.05,1);
transform: scale(1.05,1);
}
#gamecube > div {
position: absolute;
}
#gamecube > div > div {
position: relative;
}
#gamecube > div,
#gamecube > div > div {
width: 64px;
height: 64px;
}
#gamecube > div:nth-child(1) {
top: 9px;
left: 25px;
-webkit-transform: scale3d(1.07,0.59,1);
-moz-transform: scale(1.07,0.59);
-0-transform: scale(1.07,0.59);
-ms-transform: scale(1.07,0.59);
transform: scale(1.07,0.59);
}
#gamecube > div:nth-child(1) > div {
background-color: #FCFDFF;
background: -webkit-radial-gradient(20% 20%, farthest-side, #c5d2ff 0%, #FCFDFF 100%);
background: -moz-radial-gradient(20% 20%, farthest-side, #c5d2ff 0%, #FCFDFF 100%);
background: -o-radial-gradient(20% 20%, farthest-side, #c5d2ff 0%, #FCFDFF 100%);
background: -ms-radial-gradient(20% 20%, farthest-side, #c5d2ff 0%, #FCFDFF 100%);
background: radial-gradient(20% 20%, farthest-side, #c5d2ff 0%, #FCFDFF 100%);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#gamecube > div:nth-child(1) > div:before {
display: block;
position: absolute;
right: 0;
bottom: 0;
content: '';
width: 32px;
height: 32px;
border-top: 10px solid #000;
border-left: 10px solid #000;
}
#gamecube > div:nth-child(1) > div:after {
display: block;
position: absolute;
right: 0;
top: 0;
content: '';
width: 0;
height: 32px;
border-left: 10px solid #000;
border-right: 2px solid #FFF;
}
#gamecube > div:nth-child(2) {
top: 50px;
left: 49px;
...