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;
}
