SabbaKilam · February 19, 2017 15:41
diff --git a/dabblet.css b/dabblet.css
 /**
 * CSS Prespective
 */
 body{
 	background: linear-gradient(45deg, #f06, yellow);
 	min-height: 100%;
 }

 .outer{
 	position: absolute;
 	margin: auto;
 	width: 50%;
 	height: 25%;
 	border: 1px solid black;
 	left: 0;
 	right:0;
 	top: 0;
 	bottom: 0;
 	perspective: 90rem;
 }
 .inner{
 	color: #222;
 	text-shadow: 0 1px 0 white;
 	padding: 0.5rem;
 	box-sizing: border-box;
 	background: #ddd;
 	border: 1px solid green;
 	position: absolute;
 	left: 0;
 	right: 0;
 	top:0;
 	bottom: 0;
 	margin: auto;
 	height: 98%;
 	width: 98%;
 	transform-origin: top;
 	transform: rotateX(45deg);
 	overflow: hidden;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <div class="outer">
 	<div class="inner">
 	 <p>
 	 You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
 	 </p>
 	</div>
 </div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* CSS Prespective
	*/
	body{
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	}

	.outer{
	position: absolute;
	margin: auto;
	width: 50%;
	height: 25%;
	border: 1px solid black;
	left: 0;
	right:0;
	top: 0;
	bottom: 0;
	perspective: 90rem;
	}
	.inner{
	color: #222;
	text-shadow: 0 1px 0 white;
	padding: 0.5rem;
	box-sizing: border-box;
	background: #ddd;
	border: 1px solid green;
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	margin: auto;
	height: 98%;
	width: 98%;
	transform-origin: top;
	transform: rotateX(45deg);
	overflow: hidden;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class="outer">
	<div class="inner">
	<p>
	You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
	</p>
	</div>
	</div>