Cake!

HTML
<!-- To : Angga. *.py birthday! Wish you all the best! Keep solid, bitch! #muehehehe ~ Sena --> <div class="cake"> <div class="velas"> <div class="fuego"></div> <div class="fuego"></div> <div class="fuego"></div> <div class="fuego"></div> <div class="fuego"></div> </div> <div class="cobertura"></div> <div class="bizcocho"></div> <h1>happy birthday!</h1> <p>Angga R.</p> </div>
LESS
@import url(https://fonts.googleapis.com/css?family=Lato:300italic); //////////////////////////////////////////// var @D:100px; // Control diameter /////////////////////////////////////////// html, body{ height:100%; } body{ background: #776A57 url("http://i0.kym-cdn.com/photos/images/original/000/924/017/722.png")no-repeat; background-attachment: fixed; background-size: 25%; background-position: left bottom; } body{ } /* ============================================== POSITION */ .cake{ position:absolute; top:50%; left:50%; margin-left:-(@D/2); margin-top:-(@D/2); width:@D; height:@D; } /* ============================================== BASE */ .cake:after{ background:rgba(235,227,225,1); border-radius:@D; content:""; position:absolute; bottom:0; left:0; width:@D; height:@D/50; } .cake:before{ } /* ============================================== Candle */ .velas{ background:rgba(255,255,255,1); border-radius:100%; position:absolute; top:50%; left:50%; margin-left:-(@D/2)/20; margin-top:-(@D/2)/6; width:@D/20; height:@D/6; } .velas:after, .velas:before{ background:rgba(255,0,0,0.4); content:""; position:absolute; width:100%; height:@D/45; } .velas:after{ top:25%; left:0; } .velas:before{ top:45%; left:0; } /* ============================================== Fire */ .fuego{ border-radius:100%; box-shadow:0 0 40px 10px rgba(248,233,209,0.2); position:absolute; top:-12px; left:50%; margin-left:-(@D/2)/15; //margin-top:-(@D/2)/10; width:@D/15; height:@D/8; } .fuego:nth-child(1){ animation:fuego 2s infinite; } .fuego:nth-child(2){ animation:fuego 1.5s infinite; } .fuego:nth-child(3){ animation:fuego 1s infinite; } .fuego:nth-child(4){ animation:fuego 0.5s infinite; } .fuego:nth-child(5){ animation:fuego 0.2s infinite; } /* ============================================== Animation Fire */ @keyframes fuego{ 0%{ background:rgba(254,248,97,0.5); transform:translateY(0) scale(1); } 50%{ background:rgba(255,50,0,0.1); transform:translateY(-(@D/5)) scale(0); } 100%{ background:rgba(254,248,97,0.5); transform:translateY(0) scale(1); } } /* ============================================== Frosting */ .cobertura{ background:rgba(236,231,227,1); border-radius:@D/2; position:absolute; top:60%; left:50%; margin-left:-(@D/2)/1.8; margin-top:-(@D/2)/10; width:@D/1.8; height:@D/8; z-index:10; } .cobertura:after, .cobertura:before{ background:rgba(236,231,227,1); border-radius:@D; content:""; position:absolute; width:@D/20; height:@D/10; } .cobertura:after{ top:@D/15; right:@D/7; } .cobertura:before{ top:@D/10; right:@D/11; } /* ============================================== BIZCOCHO */ .bizcocho{ background:rgba(109,56,38,1); position:absolute; bottom:0; left:50%; margin-left:-(@D/2)/2; width:@D/2; height:@D/3; } .bizcocho:after, .bizcocho:before{ background:rgba(236,231,227,0.6); content:""; position:absolute; width:100%; height:@D/20; } .bizcocho:after{ top:30%; left:0; } .bizcocho:before{ top:60%; left:0; } /* ============================================== TEXT */ h1, p{ font-family: 'Lato', sans-serif; font-weight: 300; font-style:italic; text-align:center; width:100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } h1{ color: #FDECE5; font-size:1em; margin-top:6.8em; } p{ color: #E7B899; font-size:0.8em; line-height:2em; }
JAVASCRIPT
Expand for more options Login