Amazing CSS bubble

dabblet.css

/**
 * Amazing CSS bubble
 */
body { font:14px/1.6 Lucida Grande,Droid Sans,Verdana,Microsoft YaHei; }
.bubble { height: 120px; width: 400px; left: 20%; }

/* bubble core */
.bubble { position: absolute; border: 1px solid #53a8c9; padding: 10px; min-width: 100px;
    border-radius: 5px; box-shadow: 0 0 5px 1px #dbf6ff;
    background: #FFF; background: -webkit-linear-gradient(bottom, #e8f5ff, #fff 20px);
 }
.bubble .arrow, .bubble .arrow-inner { position: absolute; height: 0; width: 0; font-size: 0; border: 10px solid transparent; }
/* top */
.bubble-top .arrow { border-bottom-color: #53a8c9; bottom: 100%; left: 50%; margin-left: -10px; }
.bubble-top .arrow-inner { border-bottom-color: #FFF; top: -9px; left: -10px; }
/* right */
.bubble-right .arrow { border-left-color: #53a8c9; left: 100%; top: 50%; margin-top: -10px; }
.bubble-right .arrow-inner { border-left-color: #FFF; top: -10px; left: -11px; }
/* bottom */
.bubble-bottom .arrow { border-top-color: #53a8c9; top: 100%; left: 50%; margin-left: -10px; }
.bubble-bottom .arrow-inner { border-top-color: #FFF; top: -11px; left: -10px; }
/* left */
.bubble-left .arrow { border-right-color: #53a8c9; right: 100%; top: 50%; margin-top: -10px; }
.bubble-left .arrow-inner { border-right-color: #FFF; top: -10px; left: -9px; }

/* css3-bubble */
.css3-bubble::before, .css3-bubble::after { content: ""; position: absolute; height: 0; width: 0; font-size: 0; border: 10px solid transparent; }
/* css3-bubble top */
.css3-bubble.bubble-top::before, .css3-bubble.bubble-top::after { border-bottom-color: #53a8c9; bottom: 100%; left: 50%; margin-left: -10px; }
.css3-bubble.bubble-top::after { border-bottom-color: #FFF; margin-bottom: -1px; }

dabblet.html

<div class="bubble bubble-top css3-bubble" style="top: 40px" >
    Amazing CSS3 bubble <br/> Top
    <!-- <div class="arrow" ><div class="arrow-inner"></div></div> -->
</div>
<div class="bubble bubble-right" style="top: 210px;" >
    <h3>References:</h3>
    <ul>    
        <li><a href="http://jonrohan.me/guide/css/creating-triangles-in-css/">Creating Triangles in CSS</a></li>
        <li><a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">Pure CSS speech bubbles</a></li>
    </ul>
    <div class="arrow" ><div class="arrow-inner"></div></div>
</div>
<div class="bubble bubble-bottom" style="top:380px;" >
    Bottom
    <div class="arrow" ><div class="arrow-inner"></div></div>
</div>
<div class="bubble bubble-left" style="top: 550px;" >
    Left
    <div class="arrow" ><div class="arrow-inner"></div></div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}