Skip to content

Instantly share code, notes, and snippets.

@rafaelperez

rafaelperez/dabblet.css

Forked from alicelara/dabblet.css
Created February 17, 2014 19:55
Show Gist options
  • Save rafaelperez/9057802 to your computer and use it in GitHub Desktop.
Save rafaelperez/9057802 to your computer and use it in GitHub Desktop.
Download ZIP
Happy Valentine's Day
Raw
dabblet.css
/**Happy Valentine's Day
*/
*, *:before, *:after {
box-sizing: border-box
}
body{
background-color:#E03840;
}
.happy{
margin-top: 80px;
font-family: 'Cookie', cursive;
font-size: 5em;
text-align: center;
color: #FFF;
text-shadow: 2px 2px 2px #000;
}
.wrapper {
position:relative;
width:385px;
margin: 10px auto;
}
.circle {
width: 200px;
height: 200px;
background-color:#FFF;
border-radius: 100px;
-webkit-animation: grows 1s infinite ease;
}
.right {
position: absolute;
top: 0;
left: 185px;
}
.bottom {
position: relative;
top: -64px;
right: 6.02px;
width: 0px;
height: 0px;
border-radius: 100px;
border-left: 199px solid transparent;
border-right: 199px solid transparent;
border-top: 190px solid #fff;
-webkit-animation: grow 1s infinite ease;
}
.shadow {
position:relative;
left: 2px;
top: 2px;
}
.circle-shadow {
position:absolute;
width: 200px;
height: 200px;
background-color:#000;
border-radius: 100px;
-webkit-animation: grows 1s infinite ease;
}
.bottom-shadow {
position: absolute;
top: 136px;
right: -6px;
width: 0px;
height: 0px;
border-radius: 100px;
border-left: 199px solid transparent;
border-right: 199px solid transparent;
border-top: 190px solid #000;
-webkit-animation: grow 1s infinite ease;
}
@-webkit-keyframes grows {
from {-webkit-transform: scale(1);}
to {-webkit-transform: scale(1.03);}
}
@-webkit-keyframes grow {
from {-webkit-transform: scale(1);}
to {-webkit-transform: scale(1.03);}
}
Raw
dabblet.html
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<!-- content to be placed inside <body>…</body> -->
<div class="happy"> Happy Valentine's Day</div>
<div class="wrapper">
<div class="shadow">
<div class="circle-shadow"></div>
<div class="circle-shadow right"></div>
<div class="bottom-shadow"></div>
</div>
<div class="heart-top">
<div class="circle"></div>
<div class="circle right"></div>
<div class="bottom"></div>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment