Happy Birthday!

dabblet.css

/**
 * 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 */



​

dabblet.html

<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>​

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"html"}