single element

index.haml

.wrapper
  .sublime

script.js

/*
===============================================
Sublime Text2 logo - pure CSS
===============================================
Created by Azik Samarkandiy

21/08/2012
===============================================
*/

style.css

@import url(http://fonts.googleapis.com/css?family=Averia+Libre);

html{
  background: linear-gradient(#444444, #cccccc);
  width: 278px;
  height: 100%;
  margin: 0 auto;
  padding: 10px;
}

.sublime{
  background: #d9d9d9;
  width: 256px;
  height: 230px;
  position: relative;
  margin: 30px;
  border-radius: 15px;
  transform: rotateX(10deg);
  box-shadow: 
    0 1px 0 #999999,
		0 2px 0 #888888,
		0 3px 0 #888888,
		0 4px 0 #888888,
		0 5px 0 #888888,
		0 6px 0 #888888,
		0 7px 0 #888888,
		0 9px 10px #444444,
		0 3px 7px #444444;
}
.sublime:before{
	background: #4a4a4a;
	content: "";
	width: 234px;
	height: 197px;
	position: absolute;
	margin: -20px 10px;
	border: solid 1px #222222;
	border-radius: 15px;
	box-shadow:
		0 0 5px #cccccc inset,
		0 14px 0 #333333, 
		0 2px 0 #333333,
		0 4px 0 #333333,
		0 6px 0 #333333,
		0 8px 0 #333333,
		0 10px 0 #333333,
		0 12px 0 #333333,
		0 14px 0 #333333,
		0 16px 0 #333333,
		0 18px 0 #333333,
		0 20px 0 #333333,
		0 22px 0 #333333,
		0 24px 0 #333333,
		0 26px 0 #333333,
		0 28px 0 #333333;
	z-index: 2;
}

.sublime:after{
	background: -webkit-linear-gradient(rgba(255,255,255, 0.1) 43%, rgba(255,255,0, 0) 43%);
	width: 236px;
	height: 223px;
	content: "s";
	color: #ff7b00;
	font-size: 180px;
  font-weight: bold;
	line-height: 195px;
	text-align: center;
	font-family: 'Averia Libre';
	text-transform: uppercase;
	text-shadow: 
		-1px -2px 3px #000000,
		0 0 23px #ff7b00;
	box-shadow: 0 5px 3px #000;
	position: absolute;
	margin: -18px 0 0 10px;
	border-radius: 15px;
	z-index: 3;
}

.wrapper{
	perspective:800;
}