Skip to content

Instantly share code, notes, and snippets.

@addyosmani
Created April 11, 2012 23:36
Show Gist options
  • Save addyosmani/2363486 to your computer and use it in GitHub Desktop.
Save addyosmani/2363486 to your computer and use it in GitHub Desktop.
Happy Birthday!
/**
* Happy Birthday!
*/
/* @group Body */
#flamegroup {
margin:0 auto;
position:relative;
top:-200px;
left:150px;
width:120px;
height:156px;
}
.flame {
margin:0 auto;
position:absolute;
width:100px;
height:136px;
background:url(http://sitepointstatic.com/examples/css3/animation/flame-sprite.png?r=6) 0px 0px no-repeat;
}
#fl1 {
animation: flicker 1.3s steps(1) infinite;
top:20px;
left:10px
}
#fl2 {
animation: flicker .7s steps(1) infinite;
top:10px;
left:20px;
}
#fl3 {
animation: flicker 1.1s steps(1) infinite;
}
@keyframes flicker { /* flame pulses */
0%,
100%{background-position:0px 0px; opacity:.8 }
25% {background-position:-100px 0px;}
50% {background-position:-200px 0px;; opacity:.4;}
75% {background-position:-100px 0px;}
}
body {
background:
-moz-radial-gradient(#FFF 15%, transparent 16%) 0 0,
-moz-radial-gradient(#FFF 15%, transparent 16%) 8px 8px,
-moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
-webkit-radial-gradient(#FFF 15%, transparent 16%) 0 0,
-webkit-radial-gradient(#FFF 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color: #E3F6F3;
background-size: 16px 16px;
text-align: center;
margin: 0;
overflow: hidden;
}
/* @group Text */
@font-face {
font-family: "Vtks Black";
src: url('Vtks_black.ttf');
}
p.wishText {
font-family: "Vtks Black", sans-serif;
font-size: 100px;
color: #805841;
text-shadow:
1px 1px 0 #FFB0BE,
2px 2px 0 #FFB0BE,
3px 3px 0 #FFB0BE,
5px 5px 2px #a5c5c0;
margin: auto;
position:relative;
/*-moz-animation: moveText 5s;*/
}
@-moz-keyframes moveText
{
0% { top: -200px; }
100% { top: 0; }
}
/* @end */
/* @group Cake */
.cake
{
position: absolute;
top: -55px;
left: 50%;
z-index: 1;
width: 320px;
height: 100px;
-moz-border-radius: 160px / 50px;
-webkit-border-radius: 160px / 50px;
margin: auto;
background: #F7F1DC;
box-shadow: 0 1px #fffbef, 0 2px #fffbef, 0 3px #805841, 0 4px #805841, 0 5px #805841, 0 6px #805841, 0 7px #805841, 0 8px #805841, 0 9px #805841, 0 10px #805841,
0 11px #805841, 0 12px #805841, 0 13px #805841, 0 14px #805841, 0 15px #805841, 0 16px #805841, 0 17px #805841, 0 18px #805841, 0 19px #805841, 0 20px #805841,
0 21px #805841, 0 22px #805841, 0 23px #805841, 0 24px #805841, 0 25px #805841, 0 26px #805841, 0 27px #805841, 0 28px #805841, 0 29px #805841, 0 30px #805841,
0 31px #805841, 0 32px #805841, 0 33px #805841, 0 34px #805841, 0 35px #805841, 0 36px #805841, 0 37px #805841, 0 38px #805841, 0 39px #805841, 0 40px #805841,
0 41px #805841, 0 42px #805841, 0 43px #805841, 0 44px #805841, 0 45px #805841, 0 46px #805841, 0 47px #805841, 0 48px #805841, 0 49px #805841, 0 50px #805841;
}
/* @group candles */
.candles
{
color: #FFF;
font-size: 100px;
font-weight: bold;
position: absolute;
left: 50%;
text-shadow:
0 -1px 0 #ccc,
0 -2px 0 #c9c9c9,
0 -3px 0 #bbb,
0 -4px 0 #b9b9b9,
0 -5px 0 #aaa;
margin: 0;
}
.candles:before
{
content: "";
width: 0;
height: 5px;
border-left: 1px solid #000;
position: absolute;
top: 9px;
left: 20%;
}
/* @end */
/* @end */
/* @group Floor */
footer {
position: absolute;
bottom: 0;
width: 120%;
left: -10%;
height: 200px;
overflow: visible;
perspective: 150;
-webkit-perspective: 150;
}
footer .floor {
width: 100%;
height: 100%;
background-color: #f7f1DC;
background-image: -moz-linear-gradient(left center , #f7f1DC 50%, #F1D4AF 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f7f1DC), color-stop(50%,#f7f1DC), color-stop(50%,#F1D4AF), color-stop(100%,#F1D4AF));
background-size: 50px 50px;
-webkit-transform: rotateX(15deg);
margin: 0;
}
footer .floor:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: -moz-linear-gradient(top, #475754 0%, transparent 30%);
background: -webkit-linear-gradient(top, #475754 0%, transparent 30%);
opacity: .2;
}
/* @end */
/* @end */
<p class="wishText">Happy Birthday, Julian!</p>
<footer>
<div id="flamegroup">
<div class="flame" id="fl1"></div>
<div class="flame" id="fl2"></div>
<div class="flame" id="fl3"></div>
</div>
<div class="cake">
<p class="candles">21</p>
</div>
<div class="floor"></div>
</footer>​
{"view":"split","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment