Skip to content

Instantly share code, notes, and snippets.

@yangg

yangg/dabblet.css

Created August 29, 2012 02:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yangg/3506247 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yangg/3506247 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yangg revised this gist Sep 12, 2012. 2 changed files with 12 additions and 17 deletions.
    21 changes: 8 additions & 13 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,32 +5,27 @@ 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;
    .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 { top: -21px; }
    .bubble-top .arrow, .bubble-top .arrow-inner { border-bottom-color: #53a8c9; border-bottom-style: solid; }
    .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 { right: -21px; }
    .bubble-right .arrow, .bubble-right .arrow-inner { border-left-color: #53a8c9; border-left-style: solid; }
    .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 { bottom: -21px; }
    .bubble-bottom .arrow, .bubble-bottom .arrow-inner { border-top-color: #53a8c9; border-top-style: solid; }
    .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 { left: -21px; }
    .bubble-left .arrow, .bubble-left .arrow-inner { border-right-color: #53a8c9; border-right-style: solid; }
    .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 dashed transparent; }
    .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; border-bottom-style: solid; left: 50px; }
    .css3-bubble.bubble-top::before { top: -21px; }
    .css3-bubble.bubble-top::after { border-bottom-color: #FFF; top: -20px; left: 50px; }
    .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; }

    8 changes: 4 additions & 4 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,20 @@
    <div class="bubble bubble-top css3-bubble" style="top: 40px" >
    Amazing CSS3 bubble <br/> Top
    <!-- <div class="arrow" style="left: 55px;"><div class="arrow-inner"></div></div> -->
    <!-- <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" style="top: 55px;"><div class="arrow-inner"></div></div>
    <div class="arrow" ><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble bubble-bottom" style="top:380px;" >
    Bottom
    <div class="arrow" style="left: 135px;"><div class="arrow-inner"></div></div>
    <div class="arrow" ><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble bubble-left" style="top: 550px;" >
    Left
    <div class="arrow" style="top: 55px;"><div class="arrow-inner"></div></div>
    <div class="arrow" ><div class="arrow-inner"></div></div>
    </div>
  2. yangg revised this gist Sep 3, 2012. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,13 @@
    <a href="http://jonrohan.me/guide/css/creating-triangles-in-css/">Creating Triangles in CSS</a>

    <div class="bubble bubble-top css3-bubble" style="top: 40px" >
    Amazing CSS3 bubble <br/> Top
    <!-- <div class="arrow" style="left: 55px;"><div class="arrow-inner"></div></div> -->
    </div>
    <div class="bubble bubble-right" style="top: 210px;" >
    Right
    <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" style="top: 55px;"><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble bubble-bottom" style="top:380px;" >
  3. yangg revised this gist Aug 29, 2012. 2 changed files with 15 additions and 8 deletions.
    19 changes: 13 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,15 @@
    /**
    * Amazing CSS3 bubble
    * Amazing CSS bubble
    */
    body { font:14px/1.6 Droid Sans,Verdana,Lucida Grande,Verdana,Microsoft YaHei; }
    body { font:14px/1.6 Lucida Grande,Droid Sans,Verdana,Microsoft YaHei; }
    .bubble { height: 120px; width: 400px; left: 20%; }

    .bubble { position: absolute; border: 1px solid #53a8c9;
    width: 100%; height: 100%; padding: 10px;
    /* bubble core */
    .bubble { position: absolute; border: 1px solid #53a8c9; padding: 10px;
    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 dashed transparent; }
    .bubble .arrow, .bubble .arrow-inner { position: absolute; height: 0; width: 0; font-size: 0; border: 10px solid transparent; }
    /* top */
    .bubble-top .arrow { top: -21px; }
    .bubble-top .arrow, .bubble-top .arrow-inner { border-bottom-color: #53a8c9; border-bottom-style: solid; }
    @@ -26,4 +27,10 @@ body { font:14px/1.6 Droid Sans,Verdana,Lucida Grande,Verdana,Microsoft YaHei; }
    .bubble-left .arrow, .bubble-left .arrow-inner { border-right-color: #53a8c9; border-right-style: solid; }
    .bubble-left .arrow-inner { border-right-color: #FFF; top: -10px; left: -9px; }

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

    4 changes: 2 additions & 2 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    <a href="http://jonrohan.me/guide/css/creating-triangles-in-css/">Creating Triangles in CSS</a>

    <div class="bubble bubble-top" style="top: 40px" >
    <div class="bubble bubble-top css3-bubble" style="top: 40px" >
    Amazing CSS3 bubble <br/> Top
    <div class="arrow" style="left: 35px;"><div class="arrow-inner"></div></div>
    <!-- <div class="arrow" style="left: 55px;"><div class="arrow-inner"></div></div> -->
    </div>
    <div class="bubble bubble-right" style="top: 210px;" >
    Right
  4. yangg revised this gist Aug 29, 2012. 2 changed files with 14 additions and 18 deletions.
    14 changes: 6 additions & 8 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,29 +3,27 @@
    */
    body { font:14px/1.6 Droid Sans,Verdana,Lucida Grande,Verdana,Microsoft YaHei; }

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

    .bubble-wrapper { height: 120px; width: 400px; left: 100px; }

    .bubble { height: 120px; width: 400px; left: 20%; }
    18 changes: 8 additions & 10 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,18 @@
    <a href="http://jonrohan.me/guide/css/creating-triangles-in-css/">Creating Triangles in CSS</a>

    <div class="bubble-wrapper bubble-top" >
    <div class="bubble">Amazing CSS3 bubble <br/> Top
    </div>
    <div class="bubble bubble-top" style="top: 40px" >
    Amazing CSS3 bubble <br/> Top
    <div class="arrow" style="left: 35px;"><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble-wrapper bubble-right" style="top: 210px;" >
    <div class="bubble">Right</div>
    <div class="bubble bubble-right" style="top: 210px;" >
    Right
    <div class="arrow" style="top: 55px;"><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble-wrapper bubble-bottom" style="top:380px;" >
    <div class="bubble">Bottom</div>
    <div class="bubble bubble-bottom" style="top:380px;" >
    Bottom
    <div class="arrow" style="left: 135px;"><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble-wrapper bubble-left" style="top: 560px; left: 80px;" >
    <div class="bubble">Left</div>
    <div class="bubble bubble-left" style="top: 550px;" >
    Left
    <div class="arrow" style="top: 55px;"><div class="arrow-inner"></div></div>
    </div>

  5. yangg created this gist Aug 29, 2012.
    31 changes: 31 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    /**
    * Amazing CSS3 bubble
    */
    body { font:14px/1.6 Droid Sans,Verdana,Lucida Grande,Verdana,Microsoft YaHei; }

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

    .bubble-wrapper { height: 120px; width: 400px; left: 100px; }

    20 changes: 20 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <a href="http://jonrohan.me/guide/css/creating-triangles-in-css/">Creating Triangles in CSS</a>

    <div class="bubble-wrapper bubble-top" >
    <div class="bubble">Amazing CSS3 bubble <br/> Top
    </div>
    <div class="arrow" style="left: 35px;"><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble-wrapper bubble-right" style="top: 210px;" >
    <div class="bubble">Right</div>
    <div class="arrow" style="top: 55px;"><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble-wrapper bubble-bottom" style="top:380px;" >
    <div class="bubble">Bottom</div>
    <div class="arrow" style="left: 135px;"><div class="arrow-inner"></div></div>
    </div>
    <div class="bubble-wrapper bubble-left" style="top: 560px; left: 80px;" >
    <div class="bubble">Left</div>
    <div class="arrow" style="top: 55px;"><div class="arrow-inner"></div></div>
    </div>

    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}