Skip to content

Instantly share code, notes, and snippets.

@SergeyParamoshkin

SergeyParamoshkin/dabblet.css

Last active July 2, 2016 15:42
Show Gist options
  • Save SergeyParamoshkin/e95e3bc2c5961b4b0486ba3ace0d9ddb to your computer and use it in GitHub Desktop.
Save SergeyParamoshkin/e95e3bc2c5961b4b0486ba3ace0d9ddb to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
/** * Position icons into circle (SO) * http://stackoverflow.com/q/12813573/1397351 */
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
/* 2em = 4em/2 */ /* half the width */
}
.circle-container img {
display: block;
width: 100%;
}
.deg0 {
transform: translate(12em);
}
/* 12em = half the width of the wrapper */
.deg45 {
transform: rotate(45deg) translate(12em) rotate(-45deg);
}
.deg135 {
transform: rotate(135deg) translate(12em) rotate(-135deg);
}
.deg180 {
transform: translate(-12em);
}
.deg225 {
transform: rotate(225deg) translate(12em) rotate(-225deg);
}
.deg315 {
transform: rotate(315deg) translate(12em) rotate(-315deg);
}
/* this is just for showing the angle on hover */
.circle-container a:not(.center):before {
position: absolute;
width: 4em;
color: white;
opacity: 0;
background: rgba(0,0,0,.5);
font: 1.25em/3.45 Courier, monospace;
letter-spacing: 2px;
text-decoration: none;
text-indent: -2em;
text-shadow: 0 0 .1em deeppink;
transition: .7s;
/* only works in Firefox */
content: attr(class)'°';
}
.circle-container:after {
position:absolute;
top:2.8em;
left:2.8em;
width:24em;
height:24em;
border:dashed 1px #FF1493;
border-radius:50%;
opacity:.3;
pointer-events:none;
content:'';
}
.circle-container a:not(.center):after {position:absolute;top:50%;left:50%;width:4px;height:4px;border-radius:50%;box-shadow:0 0 .5em .5em #FFF;background:#FF1493;opacity:.3;content:'';margin:-2px;}.circle-container a:hover:after {opacity:.3;}.circle-container a:hover:before,.circle-container:hover:after,.circle-container:hover a:after {opacity:1;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
Raw
dabblet.js
// alert('Hello world!');
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