Skip to content

Instantly share code, notes, and snippets.

@bbilginn

bbilginn/dabblet.css

Created April 29, 2013 08:28
Show Gist options
  • Save bbilginn/5480369 to your computer and use it in GitHub Desktop.
Save bbilginn/5480369 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dabblet.css
/**
* menu
*/
* { margin: 0; padding: 0; }
body {
overflow: hidden;
background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg);
}
.ctrl {
position: absolute;
top: 50%; left: 50%;
font: 1.5em/1.13 Verdana, sans-serif;
transition: .5s;
}
a.ctrl, .ctrl a {
display: block;
opacity: .56;
background: #c9c9c9;
color: #7a8092;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px dimgrey;
}
a.ctrl:hover, .ctrl a:hover, a.ctrl:focus, .ctrl a:focus { opacity: 1; }
a.ctrl:focus, .ctrl a:focus { outline: none; }
.button {
z-index: 2;
margin: -.625em;
width: 1.25em; height: 1.25em;
border-radius: 50%;
box-shadow: 0 0 3px 1px white;
}
.tip {
z-index: 1;
/**outline: dotted 1px white;/**/
margin: -5em;
width: 10em; height: 10em;
transform: scale(.001);
list-style: none;
opacity: 0;
}
.tip:before, .tip:after {
position: absolute;
top: 34.4%;
width: .5em; height: 14%;
opacity: .56;
background: #c9c9c9;
content: '';
}
.tip:before {
left: 5.4%;
border-radius: .25em 0 0 .25em;
box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white,
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,
inset 0 1px 1px white, inset 0 -1px 1px white;
transform: rotate(75deg);
}
.button:focus + .tip {
transform: scale(1);
opacity: 1;
}
.slice {
overflow: hidden;
position: absolute;
/**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); }
.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); }
.slice:after {
position: absolute;
top: 26%; left: 26%;
width: 148%; height: 148%;
border-radius: 50%;
transform: skewY(-60deg);
content: '';
}
.slice a {
width: 200%; height: 200%;
border-radius: 50%;
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,
linear-gradient(-75deg,
transparent 50%, dimgrey 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;
line-height: 1.4;
}
.slice:nth-child(3) a:after {
position: absolute;
top: 13%; left: 50%;
margin: -.25em;
width: .5em; height: .5em;
box-shadow: 2px 2px 2px white;
transform: rotate(45deg);
background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
content: '';
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a class='button ctrl' href='#' tabindex='1'>★</a>
<ul class='tip ctrl'>
<li class='slice'><a href='#'>✦</a></li>
<li class='slice'><a href='#'>✿</a></li>
<li class='slice'><a href='#'>✵</a></li>
<li class='slice'><a href='#'>✪</a></li>
<li class='slice'><a href='#'>☀</a></li>
</ul>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment