Skip to content

Instantly share code, notes, and snippets.

@bbilginn

bbilginn/dabblet.css

Created April 29, 2013 08:28
Download ZIP

Revisions

  1. Ana Tudor revised this gist Oct 30, 2012. 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
    @@ -39,6 +39,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    /**outline: dotted 1px white;/**/
    margin: -5em;
    width: 10em; height: 10em;
    transform-origin: 50% 35%;
    transform: scale(.001);
    list-style: none;
    opacity: 0;
  2. Ana Tudor revised this gist Oct 30, 2012. No changes.
  3. Ana Tudor revised this gist Oct 30, 2012. 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
    @@ -7,6 +7,7 @@ body {
    overflow: hidden;
    background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg);
    }
    /* generic styles for button & circular menu */
    .ctrl {
    position: absolute;
    top: 50%; left: 50%;
  4. Ana Tudor revised this gist Oct 30, 2012. 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
    @@ -13,6 +13,7 @@ body {
    font: 1.5em/1.13 Verdana, sans-serif;
    transition: .5s;
    }
    /* generic link styles */
    a.ctrl, .ctrl a {
    display: block;
    opacity: .56;
  5. Ana Tudor revised this gist Oct 30, 2012. 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
    @@ -31,6 +31,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    border-radius: 50%;
    box-shadow: 0 0 3px 1px white;
    }
    /* circular menu */
    .tip {
    z-index: 1;
    /**outline: dotted 1px white;/**/
  6. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    list-style: none;
    opacity: 0;
    }
    /* the ends of the menu */
    .tip:before, .tip:after {
    position: absolute;
    top: 34.3%;
    @@ -62,6 +63,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    inset 0 1px 1px white, inset 0 -1px 1px white;
    transform: rotate(75deg);
    }
    /* make the menu appear on click */
    .button:focus + .tip {
    transform: scale(1);
    opacity: 1;
  7. Ana Tudor revised this gist Oct 30, 2012. 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
    @@ -66,6 +66,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    transform: scale(1);
    opacity: 1;
    }
    /* slices of the circular menu */
    .slice {
    overflow: hidden;
    position: absolute;
  8. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -104,16 +104,20 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    width: 200%; height: 200%;
    border-radius: 50%;
    box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
    /* "unskew" & rotate by -A°/2 */
    transform: skewY(-60deg) rotate(-15deg);
    background: linear-gradient(75deg,
    background: /* lateral separators */
    linear-gradient(75deg,
    transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,
    linear-gradient(-75deg,
    transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,
    /* make sure inner part is transparent */
    radial-gradient(rgba(127,127,127,0) 49%,
    rgba(255,255,255,.7) 51%, #c9c9c9 52%);
    background-size: 15% 15%, 15% 15%, cover;
    line-height: 1.4;
    }
    /* arrow for middle link */
    .slice:nth-child(3) a:after {
    position: absolute;
    top: 13%; left: 50%;
  9. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -95,9 +95,11 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    top: 32%; left: 32%;
    width: 136%; height: 136%;
    border-radius: 50%;
    /* "unskew" = skew by minus the same angle by which parent was skewed */
    transform: skewY(-60deg);
    content: '';
    }
    /* menu links */
    .slice a {
    width: 200%; height: 200%;
    border-radius: 50%;
  10. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -88,6 +88,8 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    .slice:nth-child(3) { transform: rotate(15deg) skewY(60deg); }
    .slice:nth-child(4) { transform: rotate(45deg) skewY(60deg); }
    .slice:last-child { transform: rotate(75deg) skewY(60deg); }
    /* covers for the inner part of the links so there's no hover trigger between
    star button & menu links; give them a red background to see them */
    .slice:after {
    position: absolute;
    top: 32%; left: 32%;
  11. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -73,6 +73,16 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    width: 50%; height: 50%;
    transform-origin: 100% 100%;
    }
    /*
    * rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A°
    * where A is the angle of 1 slice (30° in this case)
    * k is the number of the slice (in {1,2,3,4,5} here)
    * and n is the number of slices (5 in this case)
    * formula works for odd number of slices (n odd)
    * for even number of slices (n even) the rotation angle is (k - n/2)*A°
    *
    * after rotating, skew on Y by 90°-A°; here A° = the angle for 1 slice = 30°
    */
    .slice:first-child { transform: rotate(-45deg) skewY(60deg); }
    .slice:nth-child(2) { transform: rotate(-15deg) skewY(60deg); }
    .slice:nth-child(3) { transform: rotate(15deg) skewY(60deg); }
  12. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /**
    * menu
    * Circular Tooltip (SO)
    * http://stackoverflow.com/q/13132864/1397351
    */
    * { margin: 0; padding: 0; }
    body {
  13. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -71,7 +71,6 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    /**outline: dotted 1px yellow;/**/
    width: 50%; height: 50%;
    transform-origin: 100% 100%;
    transform: skewY(60deg);
    }
    .slice:first-child { transform: rotate(-45deg) skewY(60deg); }
    .slice:nth-child(2) { transform: rotate(-15deg) skewY(60deg); }
  14. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -31,11 +31,9 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    box-shadow: 0 0 3px 1px white;
    }
    .tip {
    overflow: hidden;
    z-index: 1;
    /**outline: dotted 1px white;/**/
    margin: -5.1em;
    padding: .1em;
    margin: -5em;
    width: 10em; height: 10em;
    transform: scale(.001);
    list-style: none;
  15. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -31,9 +31,11 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    box-shadow: 0 0 3px 1px white;
    }
    .tip {
    overflow: hidden;
    z-index: 1;
    /**outline: dotted 1px white;/**/
    margin: -5em;
    margin: -5.1em;
    padding: .1em;
    width: 10em; height: 10em;
    transform: scale(.001);
    list-style: none;
  16. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -80,8 +80,8 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    .slice:last-child { transform: rotate(75deg) skewY(60deg); }
    .slice:after {
    position: absolute;
    top: 30%; left: 30%;
    width: 140%; height: 140%;
    top: 32%; left: 32%;
    width: 136%; height: 136%;
    border-radius: 50%;
    transform: skewY(-60deg);
    content: '';
  17. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    /**
    * Circular Tooltip (SO)
    * http://stackoverflow.com/q/13132864/1397351
    * menu
    */
    * { margin: 0; padding: 0; }
    body {
    @@ -81,8 +80,8 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    .slice:last-child { transform: rotate(75deg) skewY(60deg); }
    .slice:after {
    position: absolute;
    top: 26%; left: 26%;
    width: 148%; height: 148%;
    top: 30%; left: 30%;
    width: 140%; height: 140%;
    border-radius: 50%;
    transform: skewY(-60deg);
    content: '';
  18. Ana Tudor revised this gist Oct 30, 2012. No changes.
  19. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /**
    * menu
    * Circular Tooltip (SO)
    * http://stackoverflow.com/q/13132864/1397351
    */
    * { margin: 0; padding: 0; }
    body {
  20. Ana Tudor revised this gist Oct 30, 2012. No changes.
  21. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    }
    .tip:before, .tip:after {
    position: absolute;
    top: 34.5%;
    top: 34.3%;
    width: .5em; height: 14%;
    opacity: .56;
    background: #c9c9c9;
  22. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    }
    .tip:before, .tip:after {
    position: absolute;
    top: 34.4%;
    top: 34.5%;
    width: .5em; height: 14%;
    opacity: .56;
    background: #c9c9c9;
  23. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -50,14 +50,14 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    .tip:before {
    left: 5.4%;
    border-radius: .25em 0 0 .25em;
    box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white,
    box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey,
    inset 0 1px 1px white, inset 0 -1px 1px white;
    transform: rotate(-75deg);
    }
    .tip:after {
    right: 5.4%;
    border-radius: 0 .25em .25em 0;
    box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white,
    box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey,
    inset 0 1px 1px white, inset 0 -1px 1px white;
    transform: rotate(75deg);
    }
  24. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -92,9 +92,9 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
    transform: skewY(-60deg) rotate(-15deg);
    background: linear-gradient(75deg,
    transparent 50%, dimgrey 50%, transparent 54%) no-repeat 36.5% 0,
    transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,
    linear-gradient(-75deg,
    transparent 50%, dimgrey 50%, transparent 54%) no-repeat 63.5% 0,
    transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,
    radial-gradient(rgba(127,127,127,0) 49%,
    rgba(255,255,255,.7) 51%, #c9c9c9 52%);
    background-size: 15% 15%, 15% 15%, cover;
  25. Ana Tudor revised this gist Oct 30, 2012. No changes.
  26. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -98,7 +98,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    radial-gradient(rgba(127,127,127,0) 49%,
    rgba(255,255,255,.7) 51%, #c9c9c9 52%);
    background-size: 15% 15%, 15% 15%, cover;
    line-height: 1.5;
    line-height: 1.4;
    }
    .slice:nth-child(3) a:after {
    position: absolute;
  27. Ana Tudor revised this gist Oct 30, 2012. 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
    @@ -98,6 +98,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    radial-gradient(rgba(127,127,127,0) 49%,
    rgba(255,255,255,.7) 51%, #c9c9c9 52%);
    background-size: 15% 15%, 15% 15%, cover;
    line-height: 1.5;
    }
    .slice:nth-child(3) a:after {
    position: absolute;
  28. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -101,10 +101,11 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    }
    .slice:nth-child(3) a:after {
    position: absolute;
    top: 14%; left: 50%;
    top: 13%; left: 50%;
    margin: -.25em;
    width: .5em; height: .5em;
    box-shadow: 2px 2px 2px white;
    transform: rotate(45deg);
    background: red;
    background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
    content: '';
    }
  29. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -101,7 +101,7 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    }
    .slice:nth-child(3) a:after {
    position: absolute;
    top: 15%; left: 50%;
    top: 14%; left: 50%;
    margin: -.25em;
    width: .5em; height: .5em;
    transform: rotate(45deg);
  30. Ana Tudor revised this gist Oct 30, 2012. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -102,5 +102,9 @@ a.ctrl:focus, .ctrl a:focus { outline: none; }
    .slice:nth-child(3) a:after {
    position: absolute;
    top: 15%; left: 50%;
    margin: -.25em;
    width: .5em; height: .5em;
    transform: rotate(45deg);
    background: red;
    content: '';
    }