stitched-effect

dabblet.css

div {
	margin: 50px auto;
}

/**
 * stitched-effect
 */
.stitched-effect {
	position: relative;
	width: 300px;
	height: 120px;
	background:linear-gradient(top, #c00, #900);
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(0,0,0,.6);
	z-index: 0;
}

.stitched-effect:before,
.stitched-effect:after {
	position: absolute;
	content: ' ';
	z-index: -1;
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	border-radius: 7px;
	border: dashed 1px #ccc;
}

.stitched-effect:after {
	top: 2px;
	right: 4px;
	bottom:4px;
	left: 2px;
	border-color: rgba(0,0,0,.5);
}

.blue { color: #CCF5F3}

.stitched-effect {
	padding: 14px;
	font: normal 24px/1.25em 'Myriad Pro', 'Trebuchet MS', Helvetica, Arial;
	color: beige;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

dabblet.html

<div class="stitched-effect">
	This is an example of <strong class="blue">Stitched Effect</strong> using <span class="blue">:before</span> and <span class="blue">:after</span> pseudo-classes and absolute positioning
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}