Skip to content

Instantly share code, notes, and snippets.

@yangg

yangg/dabblet.css

Created Aug 29, 2012
Embed
What would you like to do?
Amazing CSS bubble
/**
* 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; }
<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>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment