Skip to content

Instantly share code, notes, and snippets.

@pattyok

pattyok/dabblet.css

Created December 20, 2012 19:32
Show Gist options
  • Save pattyok/4347965 to your computer and use it in GitHub Desktop.
Save pattyok/4347965 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
; /**
* Christmas
*/
body{
background: #fff;
background: linear-gradient(180deg, #fff, #78C2C2);
min-height: 300px;
}
.snowball {
border-radius:50%;
background-color:#fff;
height:20px;
width:20px;
float:left;
position:absolute;
animation: snowfall 2s infinite;
}
.ball1 {
left:12px;
animation: snowfall 5s infinite;
}
.ball2 {
left:25px;
animation: snowfall 3s infinite;
}
.ball3 {
left:45px;
animation: snowfall 5s infinite;
}
.ball4 {
left:45px;
animation: snowfall 4s infinite;
}
.ball5 {
left:75px;
animation: snowfall 6s infinite;
}
.container1{position:relative;}
.container2{position:relative;left:50px; }
.container3{position:relative;left:150px; }
.container4{position:relative;left:250px; }
.container6{position:relative;left:350px; }
@keyframes snowfall {
0% {top:0px;}
100% {top: 200px;}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="container1">
<div class="snowball ball1"></div>
<div class="snowball ball2"></div>
<div class="snowball ball3"></div>
<div class="snowball ball4"></div>
<div class="snowball ball5"></div>
</div>
<div class="container2">
<div class="snowball ball1"></div>
<div class="snowball ball2"></div>
<div class="snowball ball3"></div>
<div class="snowball ball4"></div>
<div class="snowball ball5"></div>
</div>
<div class="container3">
<div class="snowball ball1"></div>
<div class="snowball ball2"></div>
<div class="snowball ball3"></div>
<div class="snowball ball4"></div>
<div class="snowball ball5"></div>
</div>
<div class="container5">
<div class="snowball ball1"></div>
<div class="snowball ball2"></div>
<div class="snowball ball3"></div>
<div class="snowball ball4"></div>
<div class="snowball ball5"></div>
</div><div class="container4">
<div class="snowball ball1"></div>
<div class="snowball ball2"></div>
<div class="snowball ball3"></div>
<div class="snowball ball4"></div>
<div class="snowball ball5"></div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","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