Level Up Your Birthday Celebrations with an HTML and CSS Cake: A Delicious Treat for Techies!
Do you want to surprise your tech-savvy friends or loved ones with a unique and delicious treat? Look no further! In this article, we'll explore how you can level up your birthday celebrations by creating an HTML and CSS cake. Yes, you heard it right – a cake inspired by the world of web development. Get ready to indulge in a mouthwatering dessert that combines your love for coding and sweet treats. So, put on your apron and let's dive into the world of HTML and CSS confectionery!
Preview:
The Idea of an HTML and CSS Cake
The concept behind an HTML and CSS cake is to replicate the elements and design principles of web development in the form of a delicious dessert. Just like a webpage, the cake will have different layers, with each layer representing a specific component or feature of HTML and CSS. By creating this cake, you not only get to enjoy a scrumptious treat but also showcase your passion for coding.
Decorating the Cake with HTML
Now comes the exciting part – decorating the cake with HTML elements. Roll out the fondant icing and cut out shapes that resemble HTML tags, such as rectangles for divs, circles for buttons, or triangles for dropdown menus. Use edible ink markers to draw the opening and closing tags on each shape. Carefully place these fondant HTML elements on the cake, creating a visually appealing design that represents a web page layout.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Cake.css"/>
<title>PURE CSS CAKE</title>
</head>
<body>
<div class="cake">
<div class="plate">
<div class="layer1">
<div class="top1"></div>
<div class="layer2">
<div class="top2"></div>
<div class="layer3">
<div class="l-1"></div>
<div class="l-2"></div>
<div class="l-3"></div>
<div class="top3">
<div class="candle">
<div class="fire"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Adding CSS Frosting
Once you've decorated the cake with HTML elements, it's time to add the CSS frosting. Mix food coloring of your choice with the frosting to achieve the desired colors. Using a piping bag and tips, apply the CSS frosting on the cake, just like you would style a webpage. Experiment with different designs and patterns, incorporating CSS properties such as gradients, borders, and shadows. Let your creativity flow as you transform the cake into a visually stunning masterpiece.
CSS CODE:
*{
margin:0px;
padding:0px;
box-sizing:border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}
body{
background-color:#2BA45D;
}
.cake{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.plate{
width:220px;
height:50px;
border-radius:50%;
background-color:white;
position:relative ;
top:50px;
border:2px solid #D7D7D7;
}
.layer1{
width:200px;
height:50px;
background-color:#261B09;
border-radius:50% 50% 100% 100%;
position:absolute;
left:10px;
top:-10px;
}
.top1{
width:200px;
height:50px;
border-radius:50%;
background-color:#514015;
position:absolute;
border-radius:50%;
top:-16px;
border: 1px solid #5D3603 ;
}
.layer2{
width:170px;
height:50px;
background-color:#261B09;
border-radius:50% 50% 100% 100%;
position:absolute;
left:13px;
top:-30px;
}
.top2{
width:170px;
height:50px;
border-radius:50%;
background-color:#514015;
position:absolute;
border-radius:50%;
border: 1px solid #5D3603 ;
top:-16px
}
.layer3{
width:130px;
height:50px;
background-color:#261B09;
border-radius:50% 50% 100% 100%;
position:absolute;
left:20px;
top:-28px;
}
.top3{
width:130px;
height:50px;
border-radius:50%;
background-color:#FF417D;
border:2px solid #EE2666;
position:absolute;
border-radius:50%;
top:-16px
}
.l-1{
width:30px;
height:50px;
background-color:#EE2666;
border-radius:100%;
position:absolute;
top:-7px;
left:10px;
}
.l-2{
width:50px;
height:50px;
background-color:#EE2666;
border-radius:100%;
position:absolute;
top:-3px;
left:50px;
}
.l-3{
width:30px;
height:30px;
background-color:#EE2666;
border-radius:100%;
position:absolute;
top:5px;
left:99px;
}
.candle{
width:15px;
height:50px;
background-image:linear-gradient( 45deg, red 50%,#FC641A 50%);
position:absolute;
border-radius:2px;
background-size:20px;
top:-25px;
left:50px;
}
.fire{
width:15px;
height:30px;
background-color:gold;
border-radius:100% 100% 70% 70%;
position:absolute;
top:-30px;
animation:fire 5s infinite linear ;
}
@keyframes fire {
35%{
transform:rotate(15deg);
}
50%{
transform:rotate(-15deg);
}
}
Output:
0 Comments