To create the HTML & CSS Birthday card follow the steps below and watch the video tutorial:
Demo:
Step1.
Add HTML
<div class="birthday-card">
<div class="card">
<div class="cake">
<div class="cake-bottom"></div>
<div class="cake-middle"></div>
<div class="cake-top"></div>
<div class="candle"></div>
<div class="flame"></div>
<div class="shadow"></div>
</div>
<div class="confetti">
<div class="squareOne"></div>
<div class="squareTwo"></div>
<div class="squareThree"></div>
<div class="squareFour"></div>
<div class="squareFive"></div>
<div class="squareSix"></div>
<div class="squareSeven"></div>
<div class="squareEight"></div>
<div class="squareNine"></div>
<div class="squareTen"></div>
</div>
<div class="text">Happy Birthday!</div>
</div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.birthday-card {
position: relative;
}
Create a card:
.card {
background-color: #ffd166;
overflow: hidden;
width: 380px;
height: 380px;
box-shadow: 7px 7px 7px rgba(0,0,0,0.2);
cursor: pointer;
transition: .2s;
}
.card:hover {
transform: scale(1.1);
}
Style the cake:
.card:before {
content:"";
position: absolute;
height: 5px;
width: 250px;
background-color: #fff;
border-radius:10px;
top:340px;
left:65px;
}
.cake {
position: relative;
top:40px;
}
.card:after {
content:"";
position: absolute;
height: 5px;
border-radius: 0 10px 10px 0;
width: 122px;
background-color: rgba(0,0,0,0.1);
top:340px;
left:193px;
}
.cake-bottom {
position: absolute;
width:200px;
height: 60px;
background-color: #06d6a0;
top:240px;
left:91px;
border-radius: 7px 7px 0 0;
overflow: hidden;
}
.cake-bottom:after {
content:"";
position: absolute;
width: 30px;
height: 15px;
left:-5px;
border-radius: 0 0 50px 50px;
background-color: white;
box-shadow: 30px 0 white, 60px 0 white, 90px 0 white, 120px 0 white, 150px 0 white, 180px 0 white;
}
.cake-bottom:before {
content:"";
position: absolute;
background-color: #ef476f;
width: 30px;
height: 60px;
left:25px;
box-shadow: 60px 0 #ef476f, 120px 0 #ef476f;
}
.cake-middle {
position: absolute;
width: 150px;
height: 60px;
background-color: #118ab2;
border-radius: 7px 7px 0 0;
top:180px;
left:117px;
box-shadow: inset 0 -20px #073b4c;
overflow: hidden;
}
.cake-middle:before {
content:"";
position:absolute;
background-color: #ef476f;
border-radius:50%;
width:10px;
height: 10px;
top:20px;
left: 10px;
box-shadow: 15px 10px #ffd166, 30px 0 #06d6a0, 45px 10px #ef476f, 60px 0 #ffd166, 75px 10px #06d6a0, 90px 0 #ef476f, 105px 10px #ffd166, 120px 0 #06d6a0;
}
.cake-middle:after {
content:"";
position: absolute;
width: 30px;
height: 15px;
left:0;
border-radius: 0 0 50px 50px;
background-color: white;
box-shadow: 30px 0 white, 60px 0 white, 90px 0 white, 120px 0 white;
}
.cake-top {
position: absolute;
width:100px;
height: 60px;
background-color: #ef476f;
border-radius: 7px 7px 0 0;
top:120px;
left:143px;
overflow: hidden;
box-shadow: inset 0 20px #118ab2;
}
.cake-top:before {
content:"";
position: absolute;
background-color: #118ab2;
width: 15px;
height:35px;
left:-5px;
border-radius:20px;
box-shadow: 15px 10px #ef476f, 30px 5px #118ab2, 45px 5px #ef476f,60px -10px #118ab2, 75px 10px #ef476f, 90px 0 #118ab2;
}
.cake-top:after {
position: absolute;
content:"";
background-color: rgba(0,0,0,0.1);
width:50px;
border-radius: 0 7px 0 0;
height: 60px;
left:50px;
}
Add the candle and flame:
.candle {
position: absolute;
background: repeating-linear-gradient(-45deg, white, white 5px,
#06d6a0 5px, #06d6a0 10px);
width:10px;
height: 40px;
border-radius: 3px 3px 0 0;
top:80px;
left:188px;
}
.candle:before {
content:"";
position: absolute;
background-color: #333;
width:1px;
height:10px;
top:-10px;
left:4px;
}
.flame {
position: absolute;
opacity:0.7;
}
.flame:before {
content:"";
position: absolute;
background-color: #fb5607;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
transform: rotate(-45deg);
width:20px;
height:20px;
top:55px;
left:183px;
animation: scale .5s linear infinite;
}
.flame:after {
content:"";
position: absolute;
border-radius: 50%;
background-color: #ffbe0b;
width: 11px;
height: 11px;
top:61px;
left:187.5px;
animation: scale .5s linear infinite;
}
Animate the flame:
@keyframes scale {
0% {transform: scaleY(1) rotate(-45deg);}
25% {transform: scaleY(1.3) rotate(-45deg);}
50% {transform: scaleY(1) rotate(-45deg);}
75% {transform: scaleY(1.3) rotate(-45deg);}
100% {transform: scaleY(1) rotate(-45deg);}
}
Add the shadow:
.shadow {
position: absolute;
background-color: rgba(0,0,0,0.1);
height: 60px;
width: 74px;
border-radius:0 7px 0 0;
top:180px;
left:193px;
}
.shadow:before, .shadow:after {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.1);
}
.shadow:before {
height: 60px;
width:98.5px;
border-radius:0 7px 0 0;
top:60px;
}
.shadow:after {
height: 40px;
width:5px;
border-radius: 0 5px 0 0;
top:-100px;
}
Add and animate the confetti:
.confetti {
position: absolute;
width: 380px;
height: 380px;
overflow: hidden;
}
.squareOne, .squareTwo, .squareThree, .squareFour, .squareFive, .squareSix, .squareSeven, .squareEight, .squareNine, .squareTen {
position: absolute;
width: 10px;
height: 25px;
top:-110px;
}
.squareOne {
background-color: #ef476f;
animation: down 2.5s linear infinite;
left:50px;
}
.squareTwo {
background-color: #06d6a0;
animation: down 2.3s linear infinite .2s;
left:150px;
}
.squareThree {
background-color: #118ab2;
animation: down 2.4s linear infinite .4s;
left:250px;
}
.squareFour {
background-color: #ffbe0b;
animation: down 2.7s linear infinite .1s;
left:300px;
}
.squareFive {
background-color: #118ab2;
animation: down 2.6s linear infinite .7s;
left:5px;
}
@keyframes down {
0% {top:-110px; transform: rotate(0deg) rotateY(-90deg);opacity:1;}
100% {top:400px; transform: rotate(360deg) rotateY(180deg);opacity:0.5;}
}
@keyframes downTwo {
0% {top:-130px; transform: rotate(0deg) rotateY(90deg);opacity:1;}
100% {top:400px; transform: rotate(-360deg) rotateY(-180deg);opacity:0.5;}
}
.squareSix {
background-color: #ffbe0b;
animation: downTwo 2.4s linear infinite .2s;
left:70px;
}
.squareSeven {
background-color: #ef476f;
animation: downTwo 2.1s linear infinite .7s;
left:170px;
}
.squareEight {
background-color: #ef476f;
animation: downTwo 2.4s linear infinite .9s;
left:280px;
}
.squareNine {
background-color: #06d6a0;
animation: downTwo 2.9s linear infinite .9s;
left:50px;
}
.squareTen {
background-color: #118ab2;
animation: downTwo 2.2s linear infinite 1.1s;
left:350px;
}
Style the text:
.text {
position: absolute;
font-family: tahoma;
font-size: 35px;
z-index:1;
font-weight: bold;
width: 380px;
text-align: center;
top:30px;
color: #073b4c;
}
Watch also the video tutorial:
Enjoy coding!
Read also: