Categories
CSS HTML Web development

HTML & CSS Folded Birthday Card

HTML birthday card

To learn how to create the HTML & CSS Folded Birthday Card follow the steps below and watch the video tutorial.

Demo:

*to see the HTML & CSS Folded Birthday Card on the website click here.

Step1.

Add HTML

<div class="birthdayCard">
<div class="cardFront">
  <div class="front-text">
  <h3 class="happy">HAPPY</h3>
  <h2 class="bday">BIRTHDAY</h2> 
  <h3 class="toyou">to you!</h3>  
  </div>
  <div class="wrap-deco">
<div class="decorations"></div>
<div class="decorationsTwo"></div>
  </div> 
    <div class="wrap-decoTwo">
<div class="decorations"></div>
<div class="decorationsThree"></div>
  </div>
  <div class="plate">
    <div class="cake"></div>
    <div class="flame"></div>
  </div>
</div>  
  <div class="cardInside">
     <div class="inside-text">
  <h3 class="happy">HAPPY</h3>
  <h2 class="bday">BIRTHDAY</h2> 
  <h3 class="toyou">to you!</h3>  
  </div>
    <div class="wishes">
    <p>Dear Friend,</p>
    <p>Happy birthday!! I hope your day is filled with lots of love and laughter! May all of your birthday wishes come true.</p>
    <p class="name">xxx</p>
    </div>
  </div>
</div>

Step2.

Add CSS

Set the position and the colour of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
  background-color: #00bbf9;
}

Create the card container:

.birthdayCard {
  position: relative;
  width: 250px;
  height:350px;
  cursor: pointer;
  transform-style: preserve-3d;
	transform: perspective(2500px);
  transition: 4s;
}

.birthdayCard:hover {
	transform: perspective(2500px) rotate(5deg);
	box-shadow: inset 100px 20px 100px rgba(0,0,0,.15), 0 10px 100px rgba(0,0,0,0.3);
}

.birthdayCard:hover .cardFront {
  transform: rotateY(-160deg); 
}

.birthdayCard:hover .front-text {
  display: none;
}

.birthdayCard:hover .wrap-deco {
  display: none;
}

.birthdayCard:hover .wrap-decoTwo {
  display: none;
}

.birthdayCard:hover .plate {
  display: none;
}

Style the front of the card:

.cardFront {
  position: relative;
  background-color: #fff;
  width: 250px;
  height:350px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  transition: .4s;
}

.happy, .toyou {
  position: relative;
  font-family: didot;
  text-align: center;
  backface-visibility: hidden;
  font-size: 30px; 
}

.happy {
  top:198px;
}

.toyou {
  top:123px;
}

.bday {
  position: relative;
  font-family: arial;
  font-size: 35px;
  text-align: center;
  top:163px;
}

.wrap-deco {
  position: absolute;
  top:-230px;
  left:-200px;
}

.decorations {
  position: absolute;
  width: 400px;
  height: 300px;
  border: 3px solid #333;
  border-radius: 50%;
}

.decorations:before, .decorations:after, .decorationsTwo:before, .decorationsTwo:after, .decorationsThree:before, .decorationsThree:after {
  content:"";
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  width:0;
  height:0;
}

.decorations:before {
  border-top: 40px solid #f15bb5;
  top:297px;
  left:210px;
  transform: rotate(-5deg);
}

.decorations:after{
  border-top: 40px solid #f4d35e;
  top:288px;
  left:260px;
  transform: rotate(-17deg);
}

.decorationsTwo:before {
  border-top: 40px solid #00f5d4;
  top:268px;
  left:315px;
  transform: rotate(-30deg);
}

.decorationsTwo:after, .decorationsThree:after {
  border-top: 40px solid #9b5de5;
  top:238px;
  left:355px;
  transform: rotate(-40deg);
}

.wrap-decoTwo {
  transform: scaleX(-1);
  position: absolute;
  top:-230px;
  left:445px; 
}

.decorationsThree:before {
  border-top: 40px solid #00bbf9;
  top:268px;
  left:315px;
  transform: rotate(-30deg);
}

.plate {
  position: absolute;
  width: 130px;
  height: 5px;
  background-color: #00bbf9;
  left:60px;
  top:213px;
}

.cake {
  position: absolute;
  overflow: hidden;
  width:100px;
  height: 50px;
  background-color: #f15bb5;
  border-radius: 10px 10px 0 0;
  top:-50px;
  left:15px;
  box-shadow: inset 0 -15px #f9c74f, inset 0 15px #432818;
}

.cake:before {
  content:"";
  position: absolute;
  background-color: #432818;
  width:10px;
  height:20px;
  top:5px;
  border-radius:20px;
  box-shadow: 10px 5px #f15bb5, 20px 0px #432818, 30px 2px #f15bb5, 40px 5px #432818, 50px 5px #f15bb5, 60px 0px #432818, 70px 5px #f15bb5, 80px 5px #432818, 90px 5px #f15bb5;
}

.plate:before {
  content:"";
  position: absolute;
  background: repeating-linear-gradient(-45deg, #9b5de5, #9b5de5 3px, #00f5d4 3px, #00f5d4 6px);
  width:7px;
  height: 25px;
  top:-75px;
  left:61px;
}

.plate:after {
  content:"";
  position: absolute;
  width:1px;
  height: 5px;
  background-color: #333;
  top:-80px;
  left:64px;
}


.flame {
  position: absolute;
  background-color: #fb5607;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  transform: rotate(-45deg);
  width:15px;
  height:15px;
  opacity:0.7;
  top:-93px;
  left:57px;
}
CSS birthday card front

Style the inside part of the card:

.cardInside {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height:350px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

.inside-text {
  position: relative;
  top:-160px;
  transform: scale(0.7);
}

.wishes {
  position: relative;
  top:-100px;
  margin: 25px;
}

p {
  font-family: 'Brush Script MT', cursive;
  color: #333;
}

.name {
  margin-left:150px;
}
HTML & CSS folded birthday card

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Folded Birthday Card

HTML & CSS Birthday Card

Pure CSS Envelope (Open/Close on click)

Categories
CSS HTML Web development

HTML & CSS Birthday Card

HTML & CSS Birthday Card

To create the HTML & CSS Birthday card follow the steps below and watch the video tutorial:

Demo:

*to see the HTML & CSS Birthday card on the website click here.

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);
}
HTML & CSS Birthday Card

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;
}
CSS Birthday Cake

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;
}
CSS birthday card

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:

CSS Folded Birthday Card

CSS Birthday Animation

Simple CSS Birthday Cake

Categories
CSS Web development

CSS Birthday Animation

CSS Birthday Animation

Demo:

*to see the animation on the website click here.

To create the CSS Birthday Animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="birthday-gift">
  <div class="gift">
  <input id='click' type='checkbox'>
  <label class='click' for='click'></label>
  <div class="wishes">Happy Birthday!</div>
       <div class="sparkles">
      <div class="spark1"></div>
      <div class="spark2"></div>
      <div class="spark3"></div>
      <div class="spark4"></div>
      <div class="spark5"></div>
      <div class="spark6"></div>
    </div>
    </div>
</div>

Step2.

Add CSS

Set the color and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.birthday-gift {
  position: relative;
}
.birthday-gift:before {
  content:"";
  position: absolute;
  width: 170px;
  height:20px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.4);
  top:90px;
  left:-10px;
}

Style the gift:

.gift {
  position: relative;
  width: 150px;
  height: 100px;
  background-color: #e9c46a;
}

.gift:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 100px;
  background-color: #e76f51;
  left:62px;
}

.gift:after {
  content:"";
  position: absolute;
  box-shadow: inset 0 10px rgba(0,0,0,0.3);
  width: 150px;
  height: 100px;
}

Style the box cover/ input:

input#click {
  display: none;
}
.click {
  position: absolute;
  background-color: #e9c46a;
  width: 170px;
  height: 40px;
  top:-40px;
  left:-10px;
  transform-origin: bottom left;
  transition: .3s;
  cursor: pointer;
}

.click:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 40px;
  background-color: #e76f51;
  left:69px;
}

.click:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 0;
  border-bottom: 30px solid #e76f51;
  border-top: 30px solid #e76f51;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  transform: rotate(-90deg);
  left:65px;
  top:-47px;
}

Style the wishes:

.wishes {
  position: absolute;
  transition: .5s;
  color: #333;
  font-size: 37px;
  text-align: center;
  z-index:-1;
  left:5px;
}
CSS Gift

Add input label animation (to open the box and move the wishes upon click):

#click:checked + .click {
  transform: rotate(-110deg) scaleX(0.85);
}
#click:checked ~ .wishes {
  transform: translateY(-100px);
}

Add some sparkles and animate them:

.sparkles {
  position: absolute;
  display: none;
  top:-15px;
  z-index:-2;
  left:40px;
}

.spark1, .spark2, .spark3, .spark4, .spark5, .spark6 {
  position: absolute;
  background-color: #fee440;
  border-radius:50%;
  top:-9px;
  z-index:-1;
}

.spark1 {
  width: 8px;
  height:8px;
  left:30px;
  top:-9px;
  animation: fire 0.9s ease-in-out infinite, color 0.4s linear infinite;
}

.spark1:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:8px;
  left:11px;
  background-color: #fee440;
  border-radius:50%;
}

.spark2 {
  width: 9px;
  height:9px;
  left:33px;
  top:-5px;
  animation: fire2 0.28s ease-in-out infinite, color 0.4s linear infinite;
}

.spark2:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:12px;
  left:3px;
  background-color: #fee440;
  border-radius:50%;
}

.spark3 {
  width: 8.5px;
  height:8.5px;
  left:33px;
  top:-5px;
  animation: fire3 0.36s ease-in-out infinite, color2 0.4s linear infinite;
}

.spark3:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:12px;
  left:-1px;
  background-color: #fee440;
  border-radius:50%;
}

.spark4 {
  width: 7px;
  height:7px;
  left:27px;
  top:-5px;
  animation: fire2 0.24s ease-in-out infinite, color2 0.2s linear infinite;
}

.spark5 {
  width: 7px;
  height:7px;
  left:29px;
  top:-5px;
  animation: fire3 0.45s ease-in-out infinite, color 0.2s linear infinite;
}

.spark6 {
  width: 6px;
  height:6px;
  left:29px;
  top:-5px;
  animation: fire 0.35s ease-in-out infinite, color2 0.2s linear infinite;
}
  
@keyframes fire3 {
  100% { transform:translateX(20px) translateY(-93px); 
         opacity: 0.3; }
}

@keyframes fire2 {
  100% { transform:translateX(-5px) translateY(-90px); 
         opacity: 0.3; }
}

@keyframes fire {
  100% { transform:translateX(-25px) translateY(-95px); 
         opacity: 0.3; }
}

@keyframes color {
  from {background-color: #d00000;}
  to {background-color: #0081a7;}
}

@keyframes color2 {
  from {background-color: #8cff00;}
  to {background-color: #1d2d44;}
}

Add input label animation:

#click:checked ~ .sparkles {
  display: block;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

Birthday Cake – CSS Animation

Simple CSS Birthday Cake

CSS Folded Birthday Card

Categories
CSS Web development

CSS Folded Birthday Card

CSS Folded Greeting Card

Demo:

*to see the CSS Folded Card on the website click here.

To create the CSS Folded Birthday Card follow the steps below and watch the video tutorial:

Step1.

Add HTML

Front side of the card:

<div class="birthdayCard">
<div class="cardFront"><h3 class="happy">HAPPY BIRTHDAY!</h3>
<div class="balloons">
  <div class="balloonOne"></div>
  <div class="balloonTwo"></div>
  <div class="balloonThree"></div>
  <div class="balloonFour"></div>
</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
  background-color: #073b4c;
}

.birthdayCard {
  position: relative;
  width: 250px;
  height:350px;
  cursor: pointer;
  transform-style: preserve-3d;
	transform: perspective(2500px);
  transition: 1s;
}

Style front side of the card:

.cardFront {
  position: relative;
  background-color: #fff;
  width: 250px;
  height:350px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 30px 0 50px rgba(0,0,0,0.4);
  transition: .6s;
}

.happy {
  font-family: Tahoma, sans-serif;
  text-align: center;
  margin:30px; 
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  transition: .1s;
}

.balloons {
  position: absolute;
}

.balloonOne, .balloonTwo, .balloonThree, .balloonFour {
  position: absolute;
  width: 85px;
  height:95px;
  border-radius:50%;
}

.balloonOne {
  background-color: rgb(239, 71, 111, 0.7);
  left:-10px;
  top:50px;
}

.balloonTwo {
  background-color: rgb(6, 214, 160, 0.7);
  left:50px;
  top:20px;
}

.balloonThree {
  background-color: rgb(255, 209, 102, 0.7);
  left:110px;
  top:50px;
}

.balloonFour {
  background-color: rgb(17, 138, 178, 0.7);
  left:170px;
  top:20px;
}

.balloonOne:before, .balloonTwo:before, .balloonThree:before, .balloonFour:before {
  content:"";
  position: absolute;
  width:1px;
  height: 155px;
  background-color: #ffd166;
  top:95px;
  left:43px;
}

.balloonOne:after, .balloonTwo:after, .balloonThree:after, .balloonFour:after {
  content:"";
  position: absolute;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  top:94px;
  left:37px;
}

.balloonOne:after {
  border-bottom: 10px solid #ef476f;
}

.balloonTwo:after {
  border-bottom: 10px solid #06d6a0;
}

.balloonThree:after {
  border-bottom: 10px solid #ffd166;
}

.balloonFour:after {
  border-bottom: 10px solid #118ab2;
}

Step3.

Add HTML

To create the card inside:

 <div class="cardInside">
    <h3 class="back">HAPPY BIRTHDAY!</h3>
    <p>Dear Friend,</p>
    <p>Happy birthday!! I hope your day is filled with lots of love and laughter! May all of your birthday wishes come true.</p>
    <p class="name">xxx</p>
  </div>
</div>

Step4.

Add CSS

Style the card inside:

.cardInside {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height:350px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

p {
  font-family: 'Brush Script MT', cursive;
  margin: 40px;
  color: #333;
}

.name {
  position: absolute;
  left:150px;
  top:200px;
  color: #333;
}

.back {
  font-family: Tahoma, sans-serif;
  color: #333;
  text-align: center;
  margin:30px; 
  outline-color:#333;
  outline-style: dotted;
}

Step5.

Add CSS Transitions

.birthdayCard:hover {
	transform: perspective(2500px) rotate(5deg);
	box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 0 10px 100px rgba(0,0,0,0.5);
}

.birthdayCard:hover .cardFront {
  transform: rotateY(-160deg); 
}

.birthdayCard:hover .happy {
  visibility:hidden; 
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Birthday Animation

Simple CSS Birthday Cake

Birthday Cake – CSS Animation

Categories
CSS Web development

Birthday Cake – CSS Animation

CSS birthday cake

Demo:

To create the CSS Birthday Cake animation follow the steps below and watch the video tutorial.

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step 1.

Add HTML

<div class="birthday-cake">
  <div class="holder"></div>
  <div class="shadow"></div>
  <div class="cake">
    <div class="chocolate"></div>
  </div>
  <div class="candle"></div>
  <div class="flame"></div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #68b0ab;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.birthday-cake {
  position: relative; 
  top:20px;
}

Style the cake holder and the shadow:

.holder {
  position:absolute;
  width:350px;
  height:20px;
  border-radius:100px;
  background-color: #212F3C;
  left:-140px;
  top:10px;  
}

.holder:before {
  content:"";
  position:absolute;
  width:100px;
  height:150px;
  background-color: #CACFD2;
  left:130px; 
  top:20px;
}

.holder:after {
  content:"";
  position:absolute;
  background-color:#68b0ab;
  width: 100px;
  height:135px;
  border-radius:30px 30px 0 0;
  left:65px;
  top:20px;
  box-shadow: 125px 0 #68b0ab;
}

.shadow {
  position:absolute;
  width:350px;
  height:20px;
  border-radius:50%;
  top:170px;
  left:-135px;
  background-color: rgba(0,0,0,0.095);
  z-index:1;
}

.shadow:before {
  content:"";
  position: absolute;
  background-color: #CACFD2;
  width:150px;
  height:20px;
  border-radius:20px;
  top:-10px;
  left:96px;
}
CSS birthday cake

Style the cake:

.cake {
  position:absolute;
  overflow:hidden;
  width:275px;
  height:140px;
  background-color: #FAD7A0;
  top:-130px;
  left:-101px;
  border-radius:30px 30px 0 0;  
}

.cake:before {
  content:"";
  background-color: #935116;
  width:275px;
  height:15px;
  position:absolute;
  top:75px;
  box-shadow: 0 30px #935116;
}

.cake:after {
  content:"";
  position: absolute;
  background-color: #573612;
  width:275px;
  height:40px;
  box-shadow:inset 0 10px rgba(0,0,0,0.07);
}

.chocolate {
  position:absolute; 
  background-color: #573612;
  width:25px;
  height:45px;
  top:25px;
  left:0;
  z-index:2;
  border-radius:50px;
  box-shadow: 25px 2px #FAD7A0, 50px -10px #573612, 75px -5px #FAD7A0, 100px 3px #573612, 125px 0 #FAD7A0, 150px -5px #573612, 175px 3px #FAD7A0, 200px -5px #573612, 225px -10px #FAD7A0, 250px 4px #573612;
}
CSS birthday cake

Style the candle and the flame:

.candle {
  position:absolute; 
  width: 15px;
  height:70px;
  background-color: white;
  top:-200px;
  left:30px;
  box-shadow:inset 0 -10px 0 #E74C3C;
}

.candle:before {
  position:absolute;
  width:15px;
  height:15px;
  background-color:#E74C3C;
  content:"";
  top:10px;
  box-shadow: 0 25px #E74C3C;
}

.candle:after {
  content:"";
  width:2px;
  height:15px;
  content:"";
  position:absolute;
  background-color:black;
  top:-15px;
  left:6px;
}

.flame {
  position:absolute;
  background-color: #F4D03F;
  opacity:0.9;
  box-shadow:inset 0 -5px 5px #D35400, 5px -5px 20px #FBFFA3;
  width:20px;
  height:30px;
  top:-240px;
  border-radius:50%;
  left:26.5px;
  animation: flame 0.5s infinite;
    
}
CSS birthday cake

Step 3.

Add CSS Animation

Light a candle:

@keyframes flame {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}
  

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Folded Birthday Card

Simple CSS Birthday Cake

CSS Birthday Animation