Message box with glassy border

dabblet.css

/* 
 * Message box with glassy border
 * http://stackoverflow.com/questions/10576099/glass-opaque-transparent-border-around-boxes/1057632
 */
 
 .box {
 	background: #f0edcc;
	background-clip: padding-box;
	border: 4px solid rgba(255,255,255,.2);
	border-radius: 3px;
	box-shadow:
		0 0 1px rgba(255,255,255,.8),
		0 0 3px rgba(0,0,0,.8),
		1px 1px 0 rgba(0,0,0,.8) inset,
		-1px -1px 0 rgba(0,0,0,.8) inset;
	padding: 10px;
}







/* -------------------------------------------
   Decorative (not relevant to technique)
   ------------------------------------------- */
html {
	background: 
		radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
		radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
		radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
		radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
		radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
		radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
		linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
	background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
	background-color: #840b2a;
	font: 13px/17px Segoe UI, Tahoma, Helvetica, sans-serif;
	height: 100%;
	width: 100%;
}

c {
	background: rgba(255,255,255,.5);
	box-shadow: 0 0 3px rgba(0,0,0,.4);
	color: #840b2a;
	font-family: Consolas, Courier New, Courier, monospace;
	font-weight: bold;
	padding: 0 3px;
}

.box {
	bottom:0;
	height: 150px;
	left:0;
	margin:auto;
	position:absolute;
	top:0;
	right:0;
	width: 250px;

}

.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }

dabblet.html

<div class="box">
	<p>A simple message box with a glassy border.
	<p>The main border is a semi-opaque RGBA colour, with <c>box-shadow</c> used to add highlights and shadows.
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}