dziudek · May 23, 2013 08:56
diff --git a/dabblet.css b/dabblet.css
 /**
 * File icon in CSS
 */

 .file {
 	background: #fa8;
 	border-radius: 10px 40px 10px 10px;
 	box-shadow: 0 0 20px rgba(0, 0, 0, .4);
 	height: 200px;
 	margin: 0 auto;
 	overflow: hidden;
 	position: relative;
 	width: 150px;
 }

 .file:after {
 	background: #d86;
 	border-radius: 0 0 0 20px;
 	content: "";
 	height: 40px;
 	position: absolute;
 	right: 0;
 	top:0;
 	width: 40px;
 }

 .file:before {
 	background: #e97;
 	bottom: 0;
 	content: "";
 	height: 30px;
 	left: 0;
 	position: absolute;
 	transform: rotateZ(5deg) translateX(-10px);
 	transform-origin: 0% 50%;
 	width: 120%;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <div class="file"></div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* File icon in CSS
	*/

	.file {
	background: #fa8;
	border-radius: 10px 40px 10px 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .4);
	height: 200px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 150px;
	}

	.file:after {
	background: #d86;
	border-radius: 0 0 0 20px;
	content: "";
	height: 40px;
	position: absolute;
	right: 0;
	top:0;
	width: 40px;
	}

	.file:before {
	background: #e97;
	bottom: 0;
	content: "";
	height: 30px;
	left: 0;
	position: absolute;
	transform: rotateZ(5deg) translateX(-10px);
	transform-origin: 0% 50%;
	width: 120%;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class="file"></div>