Categories
Web development

CSS Christmas Card/ Santa Claus – open to play



CSS Santa Claus

To learn how to create the CSS Christmas Card/ Santa Claus – open to play, follow the steps below.

Demo:

*to see the animation on the website, click here.

*music source: (free music) youtube audio library – Jingle Bells (by Jingle Punks).

Step1.

Add HTML

Use the <audio> and <source> tags to link the audio/ music.

  <div class="christmas-card">
             <audio id="player" name="jingle-bells">
  <source src="https://lenadesign.org/wp-content/uploads/2022/12/Jingle-Bells-Instrumental-Jingle-Punks.mp3" type="audio/mpeg"/></audio>
        
      <input id="open" type="checkbox">
      <label class="open" for="open"></label>
      <div class="card-front">
          <div class="santa-claus"></div>
          <div class="front"></div>
          <div class="pompon"></div>
      </div>
      <div class="card-inside">
      </div>
    </div>

Step2.

Add CSS

Set the position and colour of the background and elements:

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

Style and animate the Christmas Card:

  .christmas-card {
            width:220px;
            height: 300px;
            position: relative;
            cursor: pointer;
            transform-style: preserve-3d;
	        transform: perspective(2000px);
            transition: .3s;
        }
                input#open {
            display: none;
}
        .card-front, .card-inside {
            width:100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
        }
        .card-front {
            transform-origin: left;
            transition: .3s;
            box-shadow: inset 0 120px #c1121f,inset 0 150px #fff, inset 0 165px #f9dcc4,inset 0 200px #fff,inset 0 240px #c1121f, inset 0 290px #333, inset 0 300px #c1121f;
        }
        .card-front:before, .card-front:after {
            content:"";
            position: absolute;
        }
        .card-front:before {
            background-color: #333;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            top:150px;
            left:95px;
            box-shadow: 20px 0 #333;
        }
        .card-front:after {
            background-color: #fcd5ce;
            width:20px;
            height: 10px;
            border-radius:50px;
            top: 160px;
            left: 100px;
        }
        
        .santa-claus {
            position: absolute;
            width: 60px;
            height: 30px;
            border: 10px solid #ffba08;
            top: 240px;
            left:70px;
        }
        .santa-claus:before, .santa-claus:after {
            content:"";
            position: absolute;
        }
        .santa-claus:after {
            background-color: #333;
            width: 20px;
            height: 10px;
            border-radius: 0 0 50px 50px;
            top:-75px;
            left:20px;
        }
        .santa-claus:before {
            background-color: white;
            border-radius: 50%;
            width:130px;
            height: 40px;
            top: -70px;
            left:-35px;
        }
        .front {
            position: absolute;
        }
        
        .front:before, .front:after {
            content:"";
            position: absolute;
            background-color: #003e1f;
            width: 350px;
            height: 350px;
            z-index:1;
        }
        
        .front:before {
            transform: rotate(-65deg);
            left:-268px;
            top:-90px;
        }
        .front:after {
            transform: rotate(65deg);
            left:138px;
            top:-90px;
        }

        .pompon {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            top: 50px;
            left:100px;
            z-index:10;
        }

        .open {
  position: absolute;
  width:220px;
  height: 300px;
  left:0;
  top:0;
  background-color: transparent;
  z-index:6;
  cursor: pointer;
}

#open:checked ~ .card-front {
  transform: rotateY(-155deg);
}

.card-inside {
  background-color: #f2e8cf;
  z-index:-1;
}

.card-inside:before {
  content:"Merry Christmas my dear friends, may you feel the love this special day! May this festive season brings lots of joy and happiness in your life. May all of your wishes and dreams come true, and may you feel this happiness all year round. Merry Christmas!";
  position: absolute;
  font-size: 15px;
  text-align: center;
  top:40px;
  padding:15px;
  line-height:150%;
}

Step3.

Add JavaScript

let input = document.getElementById("open");
let audio = document.getElementById("player");

input.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.currentTime = 0;
    input.innerHTML = "Pause";
  } else {
    audio.pause();
    input.innerHTML = "Play";
  }
});

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

CSS Happy New Year Animation (fireworks)

CSS Snowfall

Categories
Web development

CSS Christmas Card Animation/ CSS filter Property



CSS Christmas Tree

To learn how to create the CSS Christmas Card Animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Christmas Card Animation on the website click here.

Step1.

Add HTML

    <div id="christmas-card" class="christmas-card">
        <div class="christmas-tree"></div>
        <div class="snow"></div>
        <div class="wishes">
            <div class="wish"></div>
            <div class="merry"></div>
            <div class="xmas"></div>
        </div>
    </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;
        }

Style the card:

.christmas-card {
            overflow: hidden;
            position: relative;
            width: 350px;
            height: 400px;
            background-color: #9ceaef;
            box-shadow: 15px 1px 50px rgba(0,0,0,.2);

        }
        
        .christmas-card:before {
            content:"";
            position: absolute;
            width: 400px;
            height: 150px;
            background-color: white;
            border-radius: 50%;
            top:290px;
            left:-25px;
            box-shadow: -130px -10px #f8f9fa, 80px -20px #e9ecef;
        }
        
        .christmas-card:after {
            content:"";
            position: absolute;
            background-color: rgba(0,0,0,.2);
            width: 100px;
            height: 20px;
            border-radius: 50%;
            top:300px;
            left:120px;
        }

Style and animate the Christmas Tree:

       .christmas-tree {
               position: relative;
               width: 20px;
               height: 40px;
               background-color: #bc6c47;
               top:270px;
            left: 160px;
               box-shadow: inset 0 25px rgba(0,0,0,.5);
              z-index:1;
}

.christmas-tree:before {
  content:"";
  position: absolute;
  border-style:solid;
  border-color: transparent transparent #8fb440 transparent;
  border-width: 0 50px 60px 50px;
  height:0;
  width:0;
  top: -40px;
  left:-40px;
  filter: drop-shadow(0 -30px #8fb440) drop-shadow(0 -30px #8fb440);
}
        

        
        .christmas-tree:after {
            content:"";
            position: absolute;
            width:15px;
            height: 15px;
            background-color: #ae2012;
            border-radius: 50%;
            box-shadow: -25px -20px #e9d8a6, 35px -30px #0a9396, 10px -40px #ee9b00, -15px -60px #ae2012, 25px -70px #e9d8a6, 0px -85px #0a9396;
            animation: light 3s linear infinite 3s;
        }
        @keyframes light {
            0%, 20%, 40%,60%, 80%, 100% {
                box-shadow: -25px -20px #e9d8a6, 35px -30px #0a9396, 10px -40px #ee9b00, -15px -60px #ae2012, 25px -70px #e9d8a6, 0px -85px  #0a9396;
                background-color: #ae2012;
            }
            10%, 30%, 50%, 70%, 90% {
                box-shadow: -25px -20px #0a9396, 35px -30px #ee9b00, 10px -40px #0a9396, -15px -60px #ee9b00, 25px -70px #ae2012, 0px -85px  #e9d8a6;
                background-color: #e9d8a6;
            }
        }

Add snowfall:

  .snow, .snow:before {
            position: absolute;
            background-color: white;
            width:8px;
            height: 8px;
            top:-50px;
            border-radius: 50%;
            box-shadow: 30px -40px white, 100px 10px white, 150px -10px white, 200px -20px white, 300px -30px white, 40px -20px white, 330px 10px white;
            filter: drop-shadow(0 -100px white)drop-shadow(-20px -150px white);
            animation: fall 5s linear infinite 2s;
        }
        
        .snow {
            opacity:.7;
        }
        
        .snow:before {
            content:"";
            opacity: .5;
            animation-delay: 4.5s;
        }
        
        @keyframes fall {
  0% {top:-50px;}
  100% {top:400px;}
}

Add and animate the text:

     .wishes {
            color: white;
            position: relative;
            width:350px;
        }
        
        .wish, .merry, .xmas {
            position: relative;
            overflow: hidden;     
        }
        
        .wish {
            font-size: 20px;
            height: 20px;
        }
        .merry {
            top:0;
            height: 30px;
        }
        
        .xmas {
            top: 0;
            height:40px;
        }
        
        .wish:before, .merry:before, .xmas:before {
            text-align: center;
            width: 350px;
            position: absolute;
            
        }
        .wish:before {
            content: "WISH YOU";
            top:20px;
            animation: slideUp ease .4s forwards;
        }
        
        @keyframes slideUp {
  0% {transform: translateY(0);}
  100% {transform: translateY(-20px);opacity:1;}        
}
        @keyframes slideUpTwo {
  0% {transform: translateY(0);}
  100% {transform: translateY(-30px);opacity:1;}
        }
            
            @keyframes slideUpThree {
  0% {transform: translateY(0);}
  100% {transform: translateY(-40px);opacity:1;}
        }
        
        .merry:before {
            content:"MERRY";
            font-size: 30px;
            top:30px;
            animation: slideUpTwo ease .4s forwards .4s;
        }
        
        .xmas:before {
            content:"CHRISTMAS";
            font-size: 40px;
            top:40px;
            animation: slideUpThree ease .4s forwards .8s;
        }

Step3.

Add jQuery (optional)

To repeat the animation on click add jQuery:

To read how to add the jQuery code to HTML click here.

$(document).ready(function(){
  $('#christmas-card').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card (Open/ Close on Click)

CSS Christmas Tree Snow Globe

CSS Christmas Tree Animation

Categories
Web development

CSS Christmas Card (Open/ Close on Click)

CSS Christmas Card (Open/ Close on Click)

To learn how to create the CSS Christmas Card (Open/ Close on Click) follow the steps below and watch the video tutorial.

Demo:

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

Step1.

Add HTML

<div class="christmas-card">
  <input id="open" type="checkbox">
  <label class="open" for="open"></label>
<div class="card-front">
  <div class="christmas-tree"></div>
  <div class="ribbon"></div>
  <div class="text">- Click to Open -</div>
  <div class="star"></div>
  <div class="balls"></div>
</div>
  
  <div class="card-inside">
    <div class="title">Merry</br>Christmas!</div>
  <div class="wishes">I hope the magic of Christmas fills every corner of your heart and home with joy — now and always.</div>
  <div class="gift">
    <div class="bow"></div>
  </div>
</div>

Step2.

Add CSS

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

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

Style the card (make the card open/ close):

.christmas-card {
  position: relative;
  width: 200px;
  height:300px;
  transform-style: preserve-3d;
  transform: perspective(2500px);
  transition: 3s;
}
input#open {
  display: none;
}

.card-front {
  position: relative;
  background-color: #fff;
  width: 200px;
  height:300px;
  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: .3s;
}

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

.open {
  position: absolute;
  width: 200px;
  height:300px;
  left:0;
  top:0;
  background-color: transparent;
  z-index:6;
  cursor: pointer;
}

#open:checked ~ .card-front {
  transform: rotateY(-155deg);
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
}

#open:checked ~ .card-front:before {
  z-index:5;
}
CSS Christmas Card (Open/ Close on Click)

Style the front side of the card:

.card-front:before {
  content:"";
  position: absolute;
  width: 180px;
  height: 280px;
  background-color: #c94038;
  top: 10px;
  left: 10px;
}

.christmas-tree {
  position: absolute;
  width:0;
  height:0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 160px solid #034247;
  top: 75px;
  left:50px;
}

.christmas-tree:after {
  content:"";
  position: absolute;
  width: 100px;
  height: 25px;
  background-color: #c47f1a;
  left:-50px;
  top:140px;
}

.christmas-tree:before {
  content:"";
  position: absolute;
  background-color: #a86d16;
  width:50px;
  height: 25px;
  top:130px;
  left:20px;
  box-shadow: -90px 0 #a86d16;
}
.text {
  position: absolute;
  color: white;
  font-family: brush script mt;
  top:260px;
  width:200px;
  text-align: center;
  font-size:15px;
}

.text:before {
  content:"Merry Christmas!";
  position: absolute;
  width:80px;
  color: #333;
  text-align: center;
  line-height: 10px;
  top:-42.5px;
  left:61px;
}

.text:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 20px solid #faa307;
  top:-185px;
  left:93px;
}

.ribbon, .ribbon:before {
  position: absolute;
  width:0;
  height:0;
  border-bottom: 12.5px solid transparent;
  border-top: 12.5px solid transparent;
}

.ribbon {
  border-left: 10px solid #c94038;
  top:205px;
  left:30px;
}

.ribbon:before {
  content:"";
  border-right: 10px solid #c94038;
  left: 120px;
  top:-12.5px;
}

.ribbon:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius:50%;
  background-color: white;
  top:-25px;
  left:21.5px;
  box-shadow: 5px -3px white, 10px -6px white, 15px -9px white, 20px -12px white, 25px -15px white, 30px -18px white, 35px -21px white, 40px -24px white, 45px -27px white, 50px -30px white, 55px -33px white, 60px -36px white, 60px -36px white, 15px -50px white, 20px -53px white, 25px -56px white, 30px -59px white, 35px -62px white, 40px -65px white, 45px -68px white, 50px -71px white;
}

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 13px solid #ffba08;
  border-left: 20px solid transparent;
  transform: rotate(-35deg);
  top:68px;
  left:80px;
    }

.star:before {
      border-bottom: 13px solid #ffba08;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -9px;
      left: -11px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -20px;
      width: 0px;
      height: 0px;
      border-right: 20px solid transparent;
      border-bottom: 13px solid #ffba08;
      border-left: 20px solid transparent;
      transform: rotate(-70deg);
      content:'';
}

.balls {
  position: absolute;
  width:12px;
  height: 12px;
  border-radius: 50%;
  background-color: #c94038;
  top:185px;
  left:110px;
  box-shadow: -30px -30px #c94038, -18px -74px #c94038;
}

.balls:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  widtH: 10px;
  height: 10px;
  background-color: #f6b4b8;
  left:-20px;
  top:10px;
  box-shadow: 15px -55px #f6b4b8;
}
CSS Card Front

Style the card inside:

.card-inside:before {
  content:"";
  position: absolute;
  width: 180px;
  height: 280px;
  background-color: #c94038;
  top: 10px;
  left: 10px;
}

.title {
  position: absolute;
  color: #333;
  font-size:30px;
  font-family: brush script mt;
  line-height: 25px;
  text-align: center;
  top:45px;
  width:200px;
}

.wishes {
  position: absolute;
  width: 150px;
  text-align: center;
  font-family: brush script mt;
  line-height:15px;
  font-size: 20px;
  color: #333;
  height: 300px;
  top: 45%;
  left:25px;
}

.gift {
  position: absolute;
  border: 3px solid #333;
  width:30px;
  height: 30px;
  top: 235px;
  left:83px;
}

.gift:before, .gift:after {
  content:"";
  position: absolute;
  background-color: #333;
}

.gift:before {
  width:30px;
  height:3px;
  top:14px;
}

.gift:after {
  height:30px;
  width:3px;
  left: 14px;
}

.bow {
  position: absolute;
}

.bow:before, .bow:after {
  content:"";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 3px solid #333;
  border-radius:50%;
  top:-14px;
}

.bow:before {
  transform: skew(20deg, 10deg);
  left:2px;
}

.bow:after {
  transform: skew(-20deg,-10deg);
  left:15px;
}
CSS Card Open on Click

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Card

CSS Christmas Tree Snow Globe

CSS Folded Birthday Card