jimryan/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

body {
	-webkit-perspective: 900;
	background:#E7E7E7;
}

.doorway {
	background: url('http://dl.dropbox.com/u/6727078/dursos-site.jpg');
	width: 250px;
	height: 350px;
	border: black solid 1px;

	margin: 100px auto;

	/*-webkit-transition: -webkit-transform ease-in-out 1s;*/
	box-shadow: inset 0 0 10px black;
}

p {
	position: absolute;
	bottom: 0;
	width: 400px;
	opacity: 0;
	/*display: none;*/
	font-family: "Arial";
	font-size: 12px;
	color: white;
	background: rgba(0,0,0,.6);
	padding: 10px;

	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;

	box-shadow: 2px 0 4px black;

	-webkit-transition-property: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 400ms;
	/*z-index: 1;*/
}

.doorway .door{
	position: absolute;
	background: rgba(255,255,255,.5);
	border: black solid 1px;
	box-shadow: 0 0 5px black;
	width: 250px;
	height: 350px;

	-webkit-transition-property: z-index, -webkit-transform;
	-webkit-transition-duration: 900ms;
	-webkit-transition-delay: 400ms;
	-webkit-transition-timing-function: ease-out;
	-webkit-transform-origin: 251px center;
	-webkit-transform-style: preserve-3d;

	/*z-index: 2;*/
}

.doorway .door:before {
	content: '';
	position: absolute;
	top: 170px;
	left: 15px;
	width: 20px;
	height: 20px;
	background: black;
	border-radius: 10px;
	box-shadow: 0 0 2px black;
}

.door .above_window, .door .left_of_window, .door .right_of_window,
.door .below_window {
	background: #0094cb;
}

.door .above_window {
	line-height: 40px;
	text-align: center;
	font-family: "Lucida Sans";
	color: black;
}

.door .left_of_window,
.door .right_of_window {
	height: 120px;
	width: 40px;
}

.door .left_of_window {
	float: left;
}

.door .right_of_window {
	float: right;
}

.door .below_window {
	clear: both;
	height: 190px;
}

	.door .below_window .technologies {
		position: relative;
		background: rgba(255,255,255,.3);
		box-shadow: inset 0 0 5px black;
		width: 170px;
		height: 130px;
		top: 25px;
		margin: 0 auto;
			font-family: "Lucida Sans";

	}
		.door .technologies h2 {
			background: rgba(0,0,0,.3);
			color: white;
			padding: 5px;
			text-align: center;
			font-size: 20px;
		}
		.door .technologies ul {
			list-style-type: none;
		}

.doorway:hover p{
	-webkit-transition-delay: 300ms;
	-webkit-transition-duration: 1s;
	opacity: 1;
}

.doorway:hover .door{
	/*z-index: 1;*/
	-webkit-transition-delay: 0;
	/*-webkit-transition: -webkit-transform ease-out 900ms;*/
	-webkit-transform: rotateY(180deg);
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<div class="doorway">
	<div class="door">
		<div class="above_window">SiteSwan</div>
		<div class="left_of_window"></div>
		<div class="right_of_window"></div>
		<div class="below_window">
			<div class="technologies">
			<h2>Technologies</h2>
				<ul>
				<li>Ruby on Rails</li>
				<li>MySQL</li>
				<li>jQuery</li>
				<li>Backbone</li>
				</ul>
			</div>
		</div>
	</div>
	<p class="description">
		SiteSwan wanted a platform for creating web sites for small businesses that was “social friendly, search-optimized, and mobile ready”. All web site owners are given a variety of tools allowing them to give their site’s their own personal touch and post the information and media that showcases their offerings. Whether it’s a slideshow of their latest products, their latest posts on Twitter, or upcoming events, there’s plenty of options for adding content to keep the customers engaged.
	</p>
</div>

## settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
	/**
	* The first commented line is your dabblet’s title
	*/

	body {
	-webkit-perspective: 900;
	background:#E7E7E7;
	}

	.doorway {
	background: url('http://dl.dropbox.com/u/6727078/dursos-site.jpg');
	width: 250px;
	height: 350px;
	border: black solid 1px;

	margin: 100px auto;

	/-webkit-transition: -webkit-transform ease-in-out 1s;/
	box-shadow: inset 0 0 10px black;
	}

	p {
	position: absolute;
	bottom: 0;
	width: 400px;
	opacity: 0;
	/display: none;/
	font-family: "Arial";
	font-size: 12px;
	color: white;
	background: rgba(0,0,0,.6);
	padding: 10px;

	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;

	box-shadow: 2px 0 4px black;

	-webkit-transition-property: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 400ms;
	/z-index: 1;/
	}

	.doorway .door{
	position: absolute;
	background: rgba(255,255,255,.5);
	border: black solid 1px;
	box-shadow: 0 0 5px black;
	width: 250px;
	height: 350px;

	-webkit-transition-property: z-index, -webkit-transform;
	-webkit-transition-duration: 900ms;
	-webkit-transition-delay: 400ms;
	-webkit-transition-timing-function: ease-out;
	-webkit-transform-origin: 251px center;
	-webkit-transform-style: preserve-3d;

	/z-index: 2;/
	}

	.doorway .door:before {
	content: '';
	position: absolute;
	top: 170px;
	left: 15px;
	width: 20px;
	height: 20px;
	background: black;
	border-radius: 10px;
	box-shadow: 0 0 2px black;
	}

	.door .above_window, .door .left_of_window, .door .right_of_window,
	.door .below_window {
	background: #0094cb;
	}

	.door .above_window {
	line-height: 40px;
	text-align: center;
	font-family: "Lucida Sans";
	color: black;
	}

	.door .left_of_window,
	.door .right_of_window {
	height: 120px;
	width: 40px;
	}

	.door .left_of_window {
	float: left;
	}

	.door .right_of_window {
	float: right;
	}

	.door .below_window {
	clear: both;
	height: 190px;
	}

	.door .below_window .technologies {
	position: relative;
	background: rgba(255,255,255,.3);
	box-shadow: inset 0 0 5px black;
	width: 170px;
	height: 130px;
	top: 25px;
	margin: 0 auto;
	font-family: "Lucida Sans";

	}
	.door .technologies h2 {
	background: rgba(0,0,0,.3);
	color: white;
	padding: 5px;
	text-align: center;
	font-size: 20px;
	}
	.door .technologies ul {
	list-style-type: none;
	}

	.doorway:hover p{
	-webkit-transition-delay: 300ms;
	-webkit-transition-duration: 1s;
	opacity: 1;
	}

	.doorway:hover .door{
	/z-index: 1;/
	-webkit-transition-delay: 0;
	/-webkit-transition: -webkit-transform ease-out 900ms;/
	-webkit-transform: rotateY(180deg);
	}
	<!-- content to be placed inside <body>…</body> -->

	<div class="doorway">
	<div class="door">
	<div class="above_window">SiteSwan</div>
	<div class="left_of_window"></div>
	<div class="right_of_window"></div>
	<div class="below_window">
	<div class="technologies">
	<h2>Technologies</h2>
	<ul>
	<li>Ruby on Rails</li>
	<li>MySQL</li>
	<li>jQuery</li>
	<li>Backbone</li>
	</ul>
	</div>
	</div>
	</div>
	<p class="description">
	SiteSwan wanted a platform for creating web sites for small businesses that was “social friendly, search-optimized, and mobile ready”. All web site owners are given a variety of tools allowing them to give their site’s their own personal touch and post the information and media that showcases their offerings. Whether it’s a slideshow of their latest products, their latest posts on Twitter, or upcoming events, there’s plenty of options for adding content to keep the customers engaged.
	</p>
	</div>