Skip to content

Instantly share code, notes, and snippets.

@arieh

arieh/dabblet.css

Forked from anonymous/dabblet.css
Created December 16, 2011 17:28
Download ZIP

Revisions

  1. arieh revised this gist Dec 18, 2011. 1 changed file with 19 additions and 14 deletions.
    33 changes: 19 additions & 14 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -35,29 +35,34 @@ div.tip{
    width:140px;
    padding:0 20px;

    left:50px;
    left:48px;
    margin-top:50%;
    top:-22px;

    font-family: MuseoSansRounded700;
    content:attr(data-title);
    }
    .tip:after {
    content:'';
    border:7px solid transparent;
    border-right:10px solid rgba(0,0,0,0.7);
    height:0;
    width:0;
    left:15px;
    /* vertical align */
    top:-7px;
    margin-top:50%;
    }


    .tip.current:after{
    background:url(http://tests.arieh.co.il/current.png) 0 0 no-repeat;
    height:40px;
    width:19px;
    display:block;
    }
    border:0;
    top:-20px;
    left:37px
    }

    .tip:after,
    .tip.current:hover:after {
    content:'';
    border:11px solid transparent;
    border-right:13px solid rgba(0,0,0,0.6);
    height:0;
    width:0;
    left:24px;
    /* vertical align */
    top:-11px;
    margin-top:50%;
    background:none;
    }
  2. arieh revised this gist Dec 18, 2011. No changes.
  3. arieh revised this gist Dec 18, 2011. 2 changed files with 29 additions and 29 deletions.
    56 changes: 28 additions & 28 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,8 +8,10 @@ div.tip{
    position:relative;
    cursor:pointer;
    }
    .tip:hover:before, .tip:hover:after,
    .tip.hover.before, .tip.hover.after{
    .tip:hover:before,
    .tip:hover:after,
    .tip.hover:before,
    .tip.hover:after {
    display:block;
    }

    @@ -19,45 +21,43 @@ div.tip{
    font-size:0.8em;
    }

    .tip:after {/*tip*/
    content:'';
    border:7px solid transparent;
    border-right:10px solid rgba(0,0,0,0.7);
    height:0;
    width:0;
    left:20px;
    top:5px;
    }
    .tip:before {/* text*/
    background-color:rgba(0,0,0,0.7);
    background: rgba(0,0,0,0.7);
    border-radius:5px;
    box-shadow:0px 1px 8px rgba(0, 0, 0, 0.35), 0px 0px 2px rgba(0, 0, 0, 0.1);

    vertical-align:middle;

    color:#fff;

    height:30px;
    line-height:30px;
    height:44px;
    line-height:44px;
    width:140px;
    padding:0 10px;
    padding:0 20px;

    left:37px;
    top:-2px;
    left:50px;
    margin-top:50%;
    top:-22px;

    font-family: MuseoSansRounded700;
    content:attr(data-title);
    }
    .tip:after {
    content:'';
    border:7px solid transparent;
    border-right:10px solid rgba(0,0,0,0.7);
    height:0;
    width:0;
    left:15px;
    /* vertical align */
    top:-7px;
    margin-top:50%;
    }

    .tip.horiz:before {
    top:-40px;
    left:-65px;
    text-align:center;
    }

    .tip.horiz:after {
    border:7px solid transparent;
    border-top:10px solid rgba(0,0,0,0.7);
    left:5px;
    top:-10px;
    }
    .tip.current:after{
    background:url(http://tests.arieh.co.il/current.png) 0 0 no-repeat;
    height:40px;
    width:19px;
    display:block;
    }
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,2 @@
    <div class="tip" data-title="Cover"></div>
    <div class="tip horiz" data-title="Chapter 1"></div>
    <div class="tip current" data-title="Chapter 1"></div>
  4. arieh revised this gist Dec 16, 2011. No changes.
  5. arieh revised this gist Dec 16, 2011. No changes.
  6. arieh revised this gist Dec 16, 2011. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,7 @@ div.tip{
    border-radius:50%;
    background:linear-gradient(top, #f9f44a 2%, #ffa51e 61%, #d17308 100%);
    position:relative;
    cursor:pointer;
    }
    .tip:hover:before, .tip:hover:after,
    .tip.hover.before, .tip.hover.after{
  7. arieh revised this gist Dec 16, 2011. No changes.
  8. @invalid-email-address Anonymous created this gist Dec 16, 2011.
    62 changes: 62 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    div.tip{
    margin:100px 150px;
    width:25px;
    height:25px;
    border:1px solid orange;
    border-radius:50%;
    background:linear-gradient(top, #f9f44a 2%, #ffa51e 61%, #d17308 100%);
    position:relative;
    }
    .tip:hover:before, .tip:hover:after,
    .tip.hover.before, .tip.hover.after{
    display:block;
    }

    .tip:after, .tip:before {
    display:none;
    position:absolute;
    font-size:0.8em;
    }

    .tip:after {/*tip*/
    content:'';
    border:7px solid transparent;
    border-right:10px solid rgba(0,0,0,0.7);
    height:0;
    width:0;
    left:20px;
    top:5px;
    }
    .tip:before {/* text*/
    background-color:rgba(0,0,0,0.7);
    border-radius:5px;
    box-shadow:0px 1px 8px rgba(0, 0, 0, 0.35), 0px 0px 2px rgba(0, 0, 0, 0.1);

    vertical-align:middle;

    color:#fff;

    height:30px;
    line-height:30px;
    width:140px;
    padding:0 10px;

    left:37px;
    top:-2px;

    font-family: MuseoSansRounded700;
    content:attr(data-title);
    }

    .tip.horiz:before {
    top:-40px;
    left:-65px;
    text-align:center;
    }

    .tip.horiz:after {
    border:7px solid transparent;
    border-top:10px solid rgba(0,0,0,0.7);
    left:5px;
    top:-10px;
    }
    2 changes: 2 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <div class="tip" data-title="Cover"></div>
    <div class="tip horiz" data-title="Chapter 1"></div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"page":"css","view":"split"}