Skip to content

Instantly share code, notes, and snippets.

@ninjascribble

ninjascribble/dabblet.css

Created September 27, 2012 18:47
Show Gist options
  • Save ninjascribble/3795676 to your computer and use it in GitHub Desktop.
Save ninjascribble/3795676 to your computer and use it in GitHub Desktop.
Download ZIP
Circledots!
Raw
dabblet.css
/**
* Circledots!
*/
.circle {
background: #555;
width: 100px;
height: 100px;
border: 25px solid black;
border-radius: 50%;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
}
.dot {
background: #bee;
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
transform-origin: 50px 50px;
position: absolute;
cursor: pointer;
transition-property: background;
transition-duration: .5s;
}
.dot:hover {
background: #f00;
transition-property: background;
transition-duration: .5s;
}
.dot:after {
display: block;
position: absolute;
width: 100px;
height: 100px;
content: "I";
transform: rotate(20deg);
color: #fff;
}
.d0 { transform: rotate(-180deg); }
.d1 { transform: rotate(0deg); }
.d2 { transform: rotate(-30deg); }
.d3 { transform: rotate(-60deg); }
.d4 { transform: rotate(-90deg); }
.d5 { transform: rotate(-120deg); }
.d6 { transform: rotate(-150deg); }
.d7 { transform: rotate(-210deg); }
.d8 { transform: rotate(-240deg); }
.d9 { transform: rotate(-270deg); }
.d10 { transform: rotate(-300deg); }
.d11 { transform: rotate(-330deg); }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul class="circle">
<li class="dot d0"></li>
<li class="dot d1"></li>
<li class="dot d2"></li>
<li class="dot d3"></li>
<li class="dot d4"></li>
<li class="dot d5"></li>
<li class="dot d6"></li>
<li class="dot d7"></li>
<li class="dot d8"></li>
<li class="dot d9"></li>
<li class="dot d10"></li>
<li class="dot d11"></li>
</ul>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment