Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@ZeeAgency

ZeeAgency/dabblet.css

Created January 23, 2012 23:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ZeeAgency/1666558 to your computer and use it in GitHub Desktop.
Save ZeeAgency/1666558 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
div {
position: absolute;
padding: 3px;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
text-align: center;
color: #FFF;
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
#sin-1 {
top: 90%;
left: 50%;
margin-left: -35px;
margin-top: -35px;
width: 70px;
height: 70px;
}
#sin-2 {
top: 88.042%;
left: 37.639%;
margin-left: -34.511px;
margin-top: -34.511px;
width: 69.021px;
height: 69.021px;
}
#sin-3 {
top: 82.361%;
left: 26.489%;
margin-left: -33.09px;
margin-top: -33.09px;
width: 66.18px;
height: 66.18px;
}
#sin-4 {
top: 73.511%;
left: 17.639%;
margin-left: -30.878px;
margin-top: -30.878px;
width: 61.756px;
height: 61.756px;
}
#sin-5 {
top: 62.361%;
left: 11.958%;
margin-left: -28.09px;
margin-top: -28.09px;
width: 56.18px;
height: 56.18px;
}
#sin-6 {
top: 50.0%;
left: 10%;
margin-left: -25px;
margin-top: -25px;
width: 50px;
height: 50px;
}
#sin-7 {
top: 37.639%;
left: 11.958%;
margin-left: -21.91px;
margin-top: -21.91px;
width: 43.82px;
height: 43.82px;
}
#sin-8 {
top: 26.489%;
left: 17.639%;
margin-left: -19.122px;
margin-top: -19.122px;
width: 38.244px;
height: 38.244px;
}
#sin-9 {
top: 17.639%;
left: 26.489%;
margin-left: -16.91px;
margin-top: -16.91px;
width: 33.82px;
height: 33.82px;
}
#sin-10 {
top: 11.958%;
left: 37.639%;
margin-left: -15.489px;
margin-top: -15.489px;
width: 30.979px;
height: 30.979px;
}
#sin-11 {
top: 10%;
left: 50.0%;
margin-left: -15px;
margin-top: -15px;
width: 30px;
height: 30px;
}
#sin-12 {
top: 11.958%;
left: 62.361%;
margin-left: -15.489px;
margin-top: -15.489px;
width: 30.979px;
height: 30.979px;
}
#sin-13 {
top: 17.639%;
left: 73.511%;
margin-left: -16.91px;
margin-top: -16.91px;
width: 33.82px;
height: 33.82px;
}
#sin-14 {
top: 26.489%;
left: 82.361%;
margin-left: -19.122px;
margin-top: -19.122px;
width: 38.244px;
height: 38.244px;
}
#sin-15 {
top: 37.639%;
left: 88.042%;
margin-left: -21.91px;
margin-top: -21.91px;
width: 43.82px;
height: 43.82px;
}
#sin-16 {
top: 50.0%;
left: 90%;
margin-left: -25px;
margin-top: -25px;
width: 50px;
height: 50px;
}
#sin-17 {
top: 62.361%;
left: 88.042%;
margin-left: -28.09px;
margin-top: -28.09px;
width: 56.18px;
height: 56.18px;
}
#sin-18 {
top: 73.511%;
left: 82.361%;
margin-left: -30.878px;
margin-top: -30.878px;
width: 61.756px;
height: 61.756px;
}
#sin-19 {
top: 82.361%;
left: 73.511%;
margin-left: -33.09px;
margin-top: -33.09px;
width: 66.18px;
height: 66.18px;
}
#sin-20 {
top: 88.042%;
left: 62.361%;
margin-left: -34.511px;
margin-top: -34.511px;
width: 69.021px;
height: 69.021px;
}
Raw
dabblet.html
<body>
<div id="sin-1">1</div><div id="sin-2">2</div><div id="sin-3">3</div><div id="sin-4">4</div><div id="sin-5">5</div><div id="sin-6">6</div><div id="sin-7">7</div><div id="sin-8">8</div><div id="sin-9">9</div><div id="sin-10">10</div><div id="sin-11">11</div><div id="sin-12">12</div><div id="sin-13">13</div><div id="sin-14">14</div><div id="sin-15">15</div><div id="sin-16">16</div><div id="sin-17">17</div><div id="sin-18">18</div><div id="sin-19">19</div><div id="sin-20">20</div>
</body>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment