A Pen by Adam Henley.

Birthday-cake-&-candle-v0.1.markdown

Birthday cake & candle v0.1

Flame code appropriated from dazulu: http://codepen.io/dazulu/pen/fGFyj

A Pen by Adam Henley on CodePen.

License.

index.html

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

style.css

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