A Pen by Adam Henley.

index.html

<div class="cake"></div>

Single-div-cake-&-candle-v0.5.markdown

Single div cake & candle v0.5

A simple birthday cake, simply.

A Pen by Adam Henley on CodePen.

License.

style.less

html{background-color:@bgcolor;}
.centered{ position:absolute; margin:auto; right:0;bottom:0;left:0; top:95px;}

@width:200px;
@filling_height:20px;
@bgcolor: rgb(176, 214, 232);
@spongecolor: rgb(107, 68, 44);
@fillingcolor: rgb(253, 255, 237);
@flamecolor: rgb(255, 179, 28);
@candlecolor: white;
@platecolor: white;
@icingcolor: pink;
.cake{
  .centered;
  width:@width;
  height:@filling_height;
  border-top:30px solid @spongecolor;
  border-bottom:30px solid @spongecolor;
  background-color: @fillingcolor;
  z-index:10;
}

.cake:after{
  content:"";
  display:block;
  position:relative;
  border-right: 40px solid @bgcolor;
  border-left:  40px solid @bgcolor;
  background-color: @icingcolor;
  width: @width+2px;
  left:-41px;
  top:-150px;
  height:20px;
  box-sizing: content-box;
  .box-shadow(
    0 80px 0 -9px darken(@platecolor,15%),
    0 81px 0 -8px darken(@platecolor,8%),   
    0 86px 0 -2px @bgcolor,
    0 83px 0 -3px @platecolor
   
  );
}

.cake:before{
  content:"";
  display:block;
  height:20px;
  width:10px;
  position:relative;
  top:-145px;
  left:(@width/2)-5px;
  background-color: @flamecolor;/**fallback **/
  .flame; 
  border-top-left-radius:25px 100%;  
  border-top-right-radius:25px 100%;
  border-bottom:90px solid @candlecolor;  
}



.flame{
background: -moz-linear-gradient(left,  rgba(249,198,103,0) 0%, rgba(249,198,103,0.14) 2%, rgba(249,198,103,0.21) 3%, rgba(246,204,127,0.51) 7%, rgba(244,207,139,0.51) 9%, rgba(247,127,42,0.5) 17%, rgba(247,127,42,0.49) 25%, rgba(233,105,40,0.48) 36%, rgba(229,99,39,0.49) 39%, rgba(229,99,39,0.55) 52%, rgba(214,94,57,0.6) 63%, rgba(223,123,69,0.64) 71%, rgba(247,195,98,0.4) 91%, rgba(247,170,62,0.34) 96%, rgba(247,150,33,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(249,198,103,0)), color-stop(2%,rgba(249,198,103,0.14)), color-stop(3%,rgba(249,198,103,0.21)), color-stop(7%,rgba(246,204,127,0.51)), color-stop(9%,rgba(244,207,139,0.51)), color-stop(17%,rgba(247,127,42,0.5)), color-stop(25%,rgba(247,127,42,0.49)), color-stop(36%,rgba(233,105,40,0.48)), color-stop(39%,rgba(229,99,39,0.49)), color-stop(52%,rgba(229,99,39,0.55)), color-stop(63%,rgba(214,94,57,0.6)), color-stop(71%,rgba(223,123,69,0.64)), color-stop(91%,rgba(247,195,98,0.4)), color-stop(96%,rgba(247,170,62,0.34)), color-stop(100%,rgba(247,150,33,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(249,198,103,0) 0%,rgba(249,198,103,0.14) 2%,rgba(249,198,103,0.21) 3%,rgba(246,204,127,0.51) 7%,rgba(244,207,139,0.51) 9%,rgba(247,127,42,0.5) 17%,rgba(247,127,42,0.49) 25%,rgba(233,105,40,0.48) 36%,rgba(229,99,39,0.49) 39%,rgba(229,99,39,0.55) 52%,rgba(214,94,57,0.6) 63%,rgba(223,123,69,0.64) 71%,rgba(247,195,98,0.4) 91%,rgba(247,170,62,0.34) 96%,rgba(247,150,33,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(249,198,103,0) 0%,rgba(249,198,103,0.14) 2%,rgba(249,198,103,0.21) 3%,rgba(246,204,127,0.51) 7%,rgba(244,207,139,0.51) 9%,rgba(247,127,42,0.5) 17%,rgba(247,127,42,0.49) 25%,rgba(233,105,40,0.48) 36%,rgba(229,99,39,0.49) 39%,rgba(229,99,39,0.55) 52%,rgba(214,94,57,0.6) 63%,rgba(223,123,69,0.64) 71%,rgba(247,195,98,0.4) 91%,rgba(247,170,62,0.34) 96%,rgba(247,150,33,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(249,198,103,0) 0%,rgba(249,198,103,0.14) 2%,rgba(249,198,103,0.21) 3%,rgba(246,204,127,0.51) 7%,rgba(244,207,139,0.51) 9%,rgba(247,127,42,0.5) 17%,rgba(247,127,42,0.49) 25%,rgba(233,105,40,0.48) 36%,rgba(229,99,39,0.49) 39%,rgba(229,99,39,0.55) 52%,rgba(214,94,57,0.6) 63%,rgba(223,123,69,0.64) 71%,rgba(247,195,98,0.4) 91%,rgba(247,170,62,0.34) 96%,rgba(247,150,33,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(249,198,103,0) 0%,rgba(249,198,103,0.14) 2%,rgba(249,198,103,0.21) 3%,rgba(246,204,127,0.51) 7%,rgba(244,207,139,0.51) 9%,rgba(247,127,42,0.5) 17%,rgba(247,127,42,0.49) 25%,rgba(233,105,40,0.48) 36%,rgba(229,99,39,0.49) 39%,rgba(229,99,39,0.55) 52%,rgba(214,94,57,0.6) 63%,rgba(223,123,69,0.64) 71%,rgba(247,195,98,0.4) 91%,rgba(247,170,62,0.34) 96%,rgba(247,150,33,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f9c667', endColorstr='#00f79621',GradientType=1 ); /* IE6-9 */


}