machal/dabblet.css

## dabblet.css
/**
 * Dabblet: CSS speech or tooltip bubble with box shadow
 * Author: Martin Michálek, twitter.com/machal
 */

.bubble {
  	width: 200px;
}

.bubble_head {
	position: relative;
	bottom: -22px;
	left: 50%;
	width: 40px;
	height: 40px;
	background: #5FA316;
	box-shadow: 5px -2px 5px rgba(0, 0, 0, .3);
	margin-top: -11px;
  	-webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
     	-moz-transform: rotate(45deg);  /* FF3.5+ */
        -o-transform: rotate(45deg);  /* Opera 10.5 */
        -ms-transform: rotate(7.5deg);  /* IE9 */
        transform: rotate(45deg);
 	/* CSS rotation for MSIE 8- – look at the HTML conditional comment  */
}

.bubble_body {
	position: relative;
	width: 200px;
	background: #5FA316;
	color: #fff;
	padding: 20px;
	margin: 0;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, .3);
	border-radius: 10px;
}

body {
	font-family: sans-serif;
}

## dabblet.html
<head>

<!--[if lte IE 8]>
.bubble_head {
	/* CSS rotation transform tnx to http://www.useragentman.com/IETransformsTranslator/  */
	margin-left: -11px;
	margin-top: -11px;
 	/* IE8+ - must be on one line, unfortunately */
   	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
	/* IE6 and 7 */
   	filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.7071067811865475,
            M12=-0.7071067811865477,
            M21=0.7071067811865477,
            M22=0.7071067811865475,
            SizingMethod='auto expand');
}
<![endif]-->

</head>

<body>

<div class="bubble">
	<div class="bubble_head"></div>
	<p class="bubble_body">
	  Pure CSS speech or tooltip bubble with box-shadow and border-radius.
	</p>
</div>

</body>

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Dabblet: CSS speech or tooltip bubble with box shadow
	* Author: Martin Michálek, twitter.com/machal
	*/

	.bubble {
	width: 200px;
	}

	.bubble_head {
	position: relative;
	bottom: -22px;
	left: 50%;
	width: 40px;
	height: 40px;
	background: #5FA316;
	box-shadow: 5px -2px 5px rgba(0, 0, 0, .3);
	margin-top: -11px;
	-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
	-moz-transform: rotate(45deg); /* FF3.5+ */
	-o-transform: rotate(45deg); /* Opera 10.5 */
	-ms-transform: rotate(7.5deg); /* IE9 */
	transform: rotate(45deg);
	/* CSS rotation for MSIE 8- – look at the HTML conditional comment */
	}

	.bubble_body {
	position: relative;
	width: 200px;
	background: #5FA316;
	color: #fff;
	padding: 20px;
	margin: 0;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, .3);
	border-radius: 10px;
	}

	body {
	font-family: sans-serif;
	}
	<head>

	<!--[if lte IE 8]>
	.bubble_head {
	/* CSS rotation transform tnx to http://www.useragentman.com/IETransformsTranslator/ */
	margin-left: -11px;
	margin-top: -11px;
	/* IE8+ - must be on one line, unfortunately */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
	/* IE6 and 7 */
	filter: progid:DXImageTransform.Microsoft.Matrix(
	M11=0.7071067811865475,
	M12=-0.7071067811865477,
	M21=0.7071067811865477,
	M22=0.7071067811865475,
	SizingMethod='auto expand');
	}
	<![endif]-->

	</head>

	<body>

	<div class="bubble">
	<div class="bubble_head"></div>
	<p class="bubble_body">
	Pure CSS speech or tooltip bubble with box-shadow and border-radius.
	</p>
	</div>

	</body>