Categories
Web development

3d CSS Birthday Cake and Candles Animation


3d CSS Birthday Cake and Candles Animation

To learn how to create the Birthday Cake and Candles Animation with HTML, CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="birthday-cake">
  <div class="cake">
    <div class="middle"></div>
    <div class="chocs"></div>
    <div class="top"></div>
  </div>
  <div class="candles">
    <div class="flame"></div>
    <div class="flame2"></div>
    <div class="flame3"></div>
    <div class="text">Happy Birthday!</div>
    <div class="shadows"></div>
  </div>
  <p class="text2">*click on the flame to blow candles</p>
</div>

Step2.

Add CSS

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

body {
  display: flex;
  height:100vh;
  align-items: center;
  justify-content: center;
  background-color: #f07167;
  overflow: hidden;
}

#birthday-cake {
  position: relative;
  top:50px;
  left:0;
}

Style the cake:

#birthday-cake:before {
  content:"";
  position: absolute;
  background-color: #ede0d4;
  width: 400px;
  height:140px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform: translate(-50%,-10%);
  box-shadow: inset -2px -5px #e6ccb2;
}

.cake {
  position: absolute;
  background-color: #ddb892;
  width: 350px;
  height:130px;
  transform: translate(-50%,-60%);
}

.cake:before, .cake:after {
  content:"";
  position: absolute;
}

.cake:before, .middle, .middle:before {
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  width:350px;
  height:50px;
}

.cake:before {
  background-color: #ddb892;
  top:130px;
}

.cake:after {
  background-color: #b08968;
  width:350px;
  height:30px;
  top:50px;
}

.middle {
  position: absolute;
  background-color: #b08968;
  top:80px;
  z-index:1;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #ddb892;
  top:-35px;
}

.top {
  position: absolute;
  background-color: #7f5539;
  width:350px;
  height: 90px;
  border-radius:50%;
  z-index:2;
  top:-45px;
  box-shadow: inset -5px -1px #fff, inset -70px 2px rgba(255,255,255,.1);
}

.chocs {
  position: absolute;
  width: 55px;
  height:50px;
  background-color: #7f5539;
  top:0;
  z-index:1;
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  box-shadow: 49px 20px #7f5539, 98px 25px #7f5539, 147px 30px #7f5539, 196px 25px #7f5539, 245px 20px #7f5539, 295px 0 #7f5539, 0px 4px #fff, 49px 24px #fff, 98px 29px #fff, 147px 34px #fff, 196px 29px #fff, 245px 24px #fff, 295px 4px #fff;
}

.chocs:before {
  content:"";
  position: absolute;
  width:175px;
  height:180px;
  background-color: rgba(255,255,255,.1);
  border-radius: 100% 0% 100% 0% / 0% 72% 28% 100%;
  left:175px;
  top:0;
}
CSS birthday cake

Style and animate candles:

.candles {
  position: absolute;
  width:30px;
  height: 80px;
  background-color: #0081a7;
  top:-160px;
  left:-20px;
  box-shadow: 50px 20px #0081a7, -50px 20px #0081a7;
}

.candles:before {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  background-color: #0081a7;
  border-radius:50%;
  top:-5px;
  box-shadow: 0 80px #0081a7, -50px 20px #0081a7, -50px 100px #0081a7, 50px 20px #0081a7, 50px 100px #0081a7, inset 2px -1px #fff;
}

.candles:after {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  top:15px;
  left:50px;
  box-shadow: inset 2px -1px #fff;
}

.shadows {
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  box-shadow: inset 2px -1px #fff;
  left:-50px;
  top:15px;
}

.shadows:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:1.5px;
  height:15px;
  left:14.5px;
  top:-10px;
  box-shadow:50px -20px #333, 100px 0 #333;
}

.shadows:after {
  content:"";
  position: absolute;
  width:15px;
  height:90px;
  left:15px;
  background-color: rgba(255,255,255,.1);
  box-shadow: 50px -20px rgba(255,255,255,.1), 100px 0 rgba(255,255,255,.1);
  border-radius: 0% 100% 50% 50% / 100% 6% 10% 0%;
}


.flame, .flame:before, .flame2, .flame2:before, .flame3, .flame3:before {
  position: absolute;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
}

.flame,.flame3, .flame2 {
  cursor: pointer;
  width:30px;
  height: 30px;
  transform: rotate(-45deg);
  z-index:4;
  background-color: rgba(252,191,73,.8);
  transition: .5s;
  animation: flame .5s infinite;
}

.flame {
  top:-40px;
}

.flame2, .flame3 {
  top: -20px;
}

.flame2 {
  left:-50px;
}

.flame3 {
  left: 50px;
}

.flame:before, .flame2:before, .flame3:before {
  content:"";
  background-color: rgba(247,127,0,.4);
  width:20px;
  height:20px;
  top:5px;
  left:5px;
}

@keyframes flame {
  0%, 25%, 100% {transform: scaleY(1) rotate(-45deg);}
  50%, 75% {transform: scaleY(1.1) rotate(-45deg);}
}

Style text:

.text, .text2 {
  position: absolute;
  color: white;
  font-family: 'Brush Script MT', cursive;
  text-align: center;
}
.text {
  width:350px;
  font-size: 50px;
  left:-140px;
  top:100px;
  z-index:-1;
  transition: .3s;
  opacity:0;
}

.text2 {
  font-size: 25px;
  width: 300px;
  top:105px;
  left:-140px;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here. Add libraries below in to the <head> section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

and then the following code:

<script>
$(document).ready(function() {
    $(".candles").click(function() {
        
      $(".flame").animate({"opacity": 0}, "fast");
      $(".flame2").animate({"opacity": 0}, "fast");
      $(".flame3").animate({"opacity": 0}, "fast");
      $(".text").animate({"top": -90, "opacity": 1}, "fast");
    });
});
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Coffee Express Animation

Birthday Cake – CSS Animation

CSS Door Animation (Open/Close on Hover)

Categories
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
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
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