jimryan · February 21, 2012 00:10
diff --git a/dabblet.css b/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);
 }
diff --git a/dabblet.html b/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>
diff --git a/settings.json b/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>