<style type="text/css">
.cake-body{
position:relative;
margin:100px;
}
.layer{
display:block;
background:#FFA177;
height:50px;
width:150px;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
position:absolute;
}
.f1{
top:90px;
background:#774F38;
height:60px;
}
.f2{
top:60px;
background:#ECE5CE;
height:60px;
}
.f3{
top:30px;
background:#E08E79;
height:60px;
}
.f4{
border-top-right-radius: 50%;
border-top-left-radius: 50%;
background:#59280F;
top:6px;
}
/* Cake Spots */
.spot-group{
display:block;
height:14px;
width:14px;
position:absolute;
}
.spot{
display:block;
height:4px;
width:4px;
border-radius: 50%;
position:absolute;
}
.f1 .spot{
background:#8C5F45;
}
.f2 .spot{
background:#D6CFB6;
}
.f3 .spot{
background:#EB9E8A;
}
.sg1{
bottom:20px;
left:5px;
}
.s1{
top:2px;
left:10px;
}
.s2{
top:7px;
left:5px;
}
.s3{
left:2px;
}
.sg1{
bottom:20px;
left:5px;
}
.sg2{
bottom:20px;
right:10px;
}
.sg3{
bottom:21px;
left:6px;
}
.sg4{
bottom:11px;
right:33px;
}
.sg5{
bottom:15px;
left:25px;
}
.sg6{
bottom:20px;
right:10px;
}
/* Icing */
.icing{
display:block;
height:50px;
width:150px;
border-radius: 50%;
background:#59280F;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.29, #59280F), color-stop(0.8, #692F12));
position:absolute;
top:0px;
z-index:2;
}
/* Icing Drips */
.drip-ctn{
position:absolute
top:0;
z-index:1;
}
.drip{
display:block;
height:20px;
width:20px;
border-radius: 50%;
background:#59280F;
position:absolute;
}
.d1{
height:25px;
top:20px;
}
.d2{
top:30px;
left:15px
}
.d3{
top:35px;
left:30px
}
.d4{
top:38px;
left:47px
}
.d5{
top:40px;
left:65px;
}
.d6{
top:38px;
right:47px
}
.d7{
top:35px;
right:30px
}
.d8{
top:30px;
right:15px
}
.d9{
height:25px;
top:20px;
right:0px;
}
/* Candles */
.candle-ctn{
display:block;
width:150px;
height:80px;
position:absolute;
top:-30px;
z-index:3;
}
.candle{
position:absolute;
top:20px;
left:70px;
}
.c-base{
display:block;
height:30px;
width:10px;
background:#5FEDB5;
position:absolute;
z-index:2;
}
.wick{
display: block;
width: 2px;
height: 6px;
background: #ccc;
position: absolute;
top: -5px;
left: 4px;
}
.flame{
display:block;
height:16px;
width:8px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#FF9E00;
position:absolute;
top:-20px;
left:1px;
box-shadow: 0px 0px 20px yellow;
}
.highlight{
display:block;
height:30px;
width:60px;
background:#333;
border-radius:50%;
position:absolute;
top:17px;
left:-25px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(145,66,26,1) 0%,rgba(105,47,18,0) 80%);
z-index:1;
}
</style>
<div class="cake-body">
<div class="layer f1">
<div class="spot-group sg1">
<div class="spot s1"></div>
<div class="spot s2"></div>
<div class="spot s3"></div>
</div>
<div class="spot-group sg2">
<div class="spot s1"></div>
<div class="spot s2"></div>
</div>
</div>
<div class="layer f2">
<div class="spot-group sg3">
<div class="spot s1"></div>
<div class="spot s2"></div>
</div>
<div class="spot-group sg4">
<div class="spot s1"></div>
<div class="spot s2"></div>
<div class="spot s3"></div>
</div>
</div>
<div class="layer f3">
<div class="spot-group sg5">
<div class="spot s1"></div>
<div class="spot s2"></div>
<div class="spot s3"></div>
</div>
</div>
<div class="layer f4">
<div class="drip-ctn">
<div class="drip d1"></div>
<div class="drip d2"></div>
<div class="drip d3"></div>
<div class="drip d4"></div>
<div class="drip d5"></div>
<div class="drip d6"></div>
<div class="drip d7"></div>
<div class="drip d8"></div>
<div class="drip d9"></div>
<div>
</div>
<div class="candle-ctn">
<div class="candle c1">
<div class="c-base"></div>
<div class="wick"></div>
<div class="flame"></div>
<div class="highlight"></div>
</div>
</div>
</div>
Output :)
.cake-body{
position:relative;
margin:100px;
}
.layer{
display:block;
background:#FFA177;
height:50px;
width:150px;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
position:absolute;
}
.f1{
top:90px;
background:#774F38;
height:60px;
}
.f2{
top:60px;
background:#ECE5CE;
height:60px;
}
.f3{
top:30px;
background:#E08E79;
height:60px;
}
.f4{
border-top-right-radius: 50%;
border-top-left-radius: 50%;
background:#59280F;
top:6px;
}
/* Cake Spots */
.spot-group{
display:block;
height:14px;
width:14px;
position:absolute;
}
.spot{
display:block;
height:4px;
width:4px;
border-radius: 50%;
position:absolute;
}
.f1 .spot{
background:#8C5F45;
}
.f2 .spot{
background:#D6CFB6;
}
.f3 .spot{
background:#EB9E8A;
}
.sg1{
bottom:20px;
left:5px;
}
.s1{
top:2px;
left:10px;
}
.s2{
top:7px;
left:5px;
}
.s3{
left:2px;
}
.sg1{
bottom:20px;
left:5px;
}
.sg2{
bottom:20px;
right:10px;
}
.sg3{
bottom:21px;
left:6px;
}
.sg4{
bottom:11px;
right:33px;
}
.sg5{
bottom:15px;
left:25px;
}
.sg6{
bottom:20px;
right:10px;
}
/* Icing */
.icing{
display:block;
height:50px;
width:150px;
border-radius: 50%;
background:#59280F;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.29, #59280F), color-stop(0.8, #692F12));
position:absolute;
top:0px;
z-index:2;
}
/* Icing Drips */
.drip-ctn{
position:absolute
top:0;
z-index:1;
}
.drip{
display:block;
height:20px;
width:20px;
border-radius: 50%;
background:#59280F;
position:absolute;
}
.d1{
height:25px;
top:20px;
}
.d2{
top:30px;
left:15px
}
.d3{
top:35px;
left:30px
}
.d4{
top:38px;
left:47px
}
.d5{
top:40px;
left:65px;
}
.d6{
top:38px;
right:47px
}
.d7{
top:35px;
right:30px
}
.d8{
top:30px;
right:15px
}
.d9{
height:25px;
top:20px;
right:0px;
}
/* Candles */
.candle-ctn{
display:block;
width:150px;
height:80px;
position:absolute;
top:-30px;
z-index:3;
}
.candle{
position:absolute;
top:20px;
left:70px;
}
.c-base{
display:block;
height:30px;
width:10px;
background:#5FEDB5;
position:absolute;
z-index:2;
}
.wick{
display: block;
width: 2px;
height: 6px;
background: #ccc;
position: absolute;
top: -5px;
left: 4px;
}
.flame{
display:block;
height:16px;
width:8px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#FF9E00;
position:absolute;
top:-20px;
left:1px;
box-shadow: 0px 0px 20px yellow;
}
.highlight{
display:block;
height:30px;
width:60px;
background:#333;
border-radius:50%;
position:absolute;
top:17px;
left:-25px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(145,66,26,1) 0%,rgba(105,47,18,0) 80%);
z-index:1;
}
</style>
<div class="cake-body">
<div class="layer f1">
<div class="spot-group sg1">
<div class="spot s1"></div>
<div class="spot s2"></div>
<div class="spot s3"></div>
</div>
<div class="spot-group sg2">
<div class="spot s1"></div>
<div class="spot s2"></div>
</div>
</div>
<div class="layer f2">
<div class="spot-group sg3">
<div class="spot s1"></div>
<div class="spot s2"></div>
</div>
<div class="spot-group sg4">
<div class="spot s1"></div>
<div class="spot s2"></div>
<div class="spot s3"></div>
</div>
</div>
<div class="layer f3">
<div class="spot-group sg5">
<div class="spot s1"></div>
<div class="spot s2"></div>
<div class="spot s3"></div>
</div>
</div>
<div class="layer f4">
<div class="drip-ctn">
<div class="drip d1"></div>
<div class="drip d2"></div>
<div class="drip d3"></div>
<div class="drip d4"></div>
<div class="drip d5"></div>
<div class="drip d6"></div>
<div class="drip d7"></div>
<div class="drip d8"></div>
<div class="drip d9"></div>
<div>
</div>
<div class="candle-ctn">
<div class="candle c1">
<div class="c-base"></div>
<div class="wick"></div>
<div class="flame"></div>
<div class="highlight"></div>
</div>
</div>
</div>
Output :)
No comments:
Post a Comment