Centered bubble

dabblet.css

/**
 * Centered bubble
 */

* { margin:0; padding:0 }

figure { text-align:center; position:absolute;
	top:20%; left:50%; margin-left:-53px }
	
a { display:inline-block;
	background:#93C44F; width:47px; height:47px }
	
i { display:block; padding:14px; top:10px;
	border-radius:9px; position:relative;
	box-shadow:0 1px 1px 0 rgba(0, 0, 0,.5); text-shadow:0 1px 1px rgba(0,0,0,0.2);
	background-color:#57ABC7; font:17px/1.2 helvetica; color:#fff }
	
i:after { content:''; height:0; width:0;
	position:absolute; border:14px solid transparent;
	border-bottom-color:#57ABC7; bottom:100%; left:50%;
	margin-left:-14px }

dabblet.html

<figure><a></a><i>Center me</i></figure>

dabblet.js

// alert('Hello world!');

settings.json

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