Flame code appropriated from dazulu: http://codepen.io/dazulu/pen/fGFyj
A Pen by Adam Henley on CodePen.
Flame code appropriated from dazulu: http://codepen.io/dazulu/pen/fGFyj
A Pen by Adam Henley on CodePen.
<div id="background"> | |
<div id="happy_birthday"> | |
<div id="cake"> | |
<ul id="candles"> | |
<li> | |
<div id="flame_container"> | |
<div class="red flame"></div> | |
<div class="orange flame"></div> | |
<div class="yellow flame"></div> | |
<div class="white flame"></div> | |
</div> | |
</li> | |
</ul> | |
<div id="icing"></div> | |
<div id="chocolate_sponge_top"></div> | |
<div id="creamy_filling"></div> | |
<div id="chocolate_sponge_bottom"></div> | |
</div> | |
<div id="plate"></div> | |
</div> | |
</div> |
#background{ | |
background-color:#B1DEE0; | |
height: 1000px; | |
padding-top:75px; | |
} | |
#happy_birthday{ | |
margin: 0 auto; | |
position:relative; | |
width:500px; | |
height:500px; | |
} | |
#cake{ | |
/* border: 1px solid black;*/ | |
width:300px; | |
} | |
#icing{ | |
width:102%; | |
height:40px; | |
background-color: pink; | |
position:relative; | |
margin-top:-10px; | |
margin-left:-1%; | |
/*z-index:70;*/ | |
border-top-left-radius: 15% 50%; | |
border-top-right-radius: 15% 50%; | |
border-bottom-left-radius: 20% 20%; | |
} | |
#icing:before { | |
content: ""; | |
display: block; | |
position: absolute; | |
border-radius: 50% 60%; | |
width: 50px; | |
height: 25px; | |
background-color: pink; | |
right: -1px; | |
top: 18px; | |
/*border-top: 1px solid pink; | |
/*z-index:50;*/ | |
} | |
#icing:after { | |
content: ""; | |
display: block; | |
position: absolute; | |
border-radius: 60% 50%; | |
width: 50px; | |
height: 25px; | |
background-color: pink; | |
left: -1px; | |
top: 18px; | |
/*z-index:30;*/ | |
} | |
#chocolate_sponge_bottom{ | |
background: #582d22; | |
height:50px; | |
z-index:100; | |
} | |
#chocolate_sponge_top{ | |
background: #582d22; | |
height:40px; | |
z-index:100; | |
} | |
#creamy_filling{ | |
background: #ffffff; /* Old browsers */ | |
background: -moz-linear-gradient(left, #ffffff 0%, #fbfff7 16%, #fbfff7 48%, #fbfff7 82%, #fcfcfc 96%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(16%,#fbfff7), color-stop(48%,#fbfff7), color-stop(82%,#fbfff7), color-stop(96%,#fcfcfc)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(left, #ffffff 0%,#fbfff7 16%,#fbfff7 48%,#fbfff7 82%,#fcfcfc 96%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(left, #ffffff 0%,#fbfff7 16%,#fbfff7 48%,#fbfff7 82%,#fcfcfc 96%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(left, #ffffff 0%,#fbfff7 16%,#fbfff7 48%,#fbfff7 82%,#fcfcfc 96%); /* IE10+ */ | |
background: linear-gradient(to right, #ffffff 0%,#fbfff7 16%,#fbfff7 48%,#fbfff7 82%,#fcfcfc 96%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */ | |
height:20px; | |
width:100%; | |
z-index:110; | |
} | |
#creamy_filling:before{ | |
content: ""; | |
background: #ffffff; | |
position:absolute; | |
left:-3px; | |
margin-top:0px; | |
width:30px; | |
height:19px; | |
border-radius: 40% 40% 70%; | |
z-index:110; | |
} | |
#creamy_filling:after{ | |
content: ""; | |
background: #ffffff; | |
position:absolute; | |
right:39.5%; | |
width:20px; | |
height:20px; | |
border-radius:100%; | |
z-index:110; | |
} | |
#candles{ | |
list-style-type:none; | |
height: 150px; | |
width:100%; | |
margin:0 auto; | |
} | |
#candles > li { | |
height:100px; | |
width:15px; | |
background-color:white; | |
top:30px; | |
left:-35px; | |
position:relative; | |
margin: 0 auto; | |
} | |
#candles > li:after{ | |
content:""; | |
background-color:black; | |
z-index:5; | |
opacity:0.3; | |
position:absolute; | |
width:2px; | |
height:10px; | |
left:48%; | |
top:-10px; | |
} | |
#candles > li:before{ | |
content:""; | |
background-color:blue; | |
position:absolute; | |
width:0; | |
height:0; | |
top:100%; | |
left:-2px; | |
border-left:10px solid transparent; | |
border-right:10px solid transparent; | |
border-top:10px solid blue; | |
} | |
#flame_container{ | |
width: 10px; | |
height: 0; | |
left:-20px; | |
position:absolute; | |
transform-origin:center bottom; | |
animation-name: flicker; | |
animation-duration:18ms; | |
animation-delay:900ms; | |
animation-timing-function: ease-in; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
display: block; | |
} | |
.flame{ | |
z-index:10; | |
opacity:0.6; | |
bottom:15px; | |
position:absolute; | |
border-bottom-right-radius: 60%; | |
border-bottom-left-radius: 60%; | |
border-top-left-radius: 60%; | |
-webkit-transform:rotate(-45deg) scale(1.5,1.5); | |
-moz-transform:rotate(-45deg) scale(1.5,1.5); | |
-o-transform:rotate(-45deg) scale(1.5,1.5); | |
transform:rotate(-45deg) scale(1.5,1.5); | |
display: inline-block; | |
} | |
.yellow{ | |
left:20px; | |
width: 10px; | |
height: 10px; | |
background:gold; | |
box-shadow: 0 0 9px 4px gold; | |
} | |
.orange{ | |
left:20px; | |
width: 10px; | |
height: 10px; | |
background:orange; | |
box-shadow: 0 0 9px 4px orange; | |
} | |
.red{ | |
left:20px; | |
width: 15px; | |
height: 15px; | |
background:OrangeRed; | |
box-shadow: 0 0 5px 4px OrangeRed; | |
} | |
.white{ | |
left:22px; | |
bottom:12px; | |
width: 10px; | |
height: 10px; | |
background:white; | |
box-shadow: 0 0 9px 4px white; | |
} | |
@keyframes flicker{ | |
0% { -webkit-transform:rotate(-2deg); | |
-moz-transform:rotate(-2deg); | |
-o-transform:rotate(-2deg); | |
transform: rotate(-2deg);} | |
20% {-webkit-transform:rotate(1deg); | |
-moz-transform:rotate(1deg); | |
-o-transform:rotate(1deg); | |
transform: rotate(1deg);} | |
40% {-webkit-transform:rotate(-1deg); | |
-moz-transform:rotate(-1deg); | |
-o-transform:rotate(-1deg); | |
transform: rotate(-1deg);} | |
60% { | |
-webkit-transform:rotate(1deg) scaleY(1.06); | |
-moz-transform:rotate(1deg) scaleY(1.06); | |
-o-transform:rotate(1deg) scaleY(1.06); | |
transform:rotate(1deg) scaleY(1.06);} | |
80% { | |
-webkit-transform:rotate(-2deg) scaleY(0.90); | |
-moz-transform:rotate(-2deg) scaleY(0.90); | |
-o-transform:rotate(-2deg) scaleY(0.90); | |
transform: rotate(-2deg) scaleY(0.90);} | |
100% {-webkit-transform:rotate(1.5deg); | |
-moz-transform:rotate(1.5deg); | |
-o-transform:rotate(1.5deg); | |
transform: rotate(1.5deg);} | |
} | |
#plate { | |
width:450px; | |
margin-left:-85px; | |
border-top: 10px solid white; | |
border-left: 20px solid transparent; | |
border-right: 20px solid transparent; | |
height: 0; | |
} |