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

Categories
CSS JQuery Web development

Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)

Decorate the Christmas tree! (CSS & jQuery/ UI drag and drop)

To learn how to create the CSS & jQuery (drag and drop) Christmas tree follow the steps below and watch the video tutorial.

Demo:

*to see CSS & jQuery (drag and drop) Christmas tree on the website click here.

Step1.

Add HTML

Create the christmas-decorations container, dropzone and draggable elements (decorations):

<div id="christmas-decorations" class="christmas-decorations">
  <div class="tree">
    <div id="dropzone" class="tree-bottom"></div>
    <div id="dropzone-1"class="tree-middle"></div>
    <div id="dropzone-2" class="tree-top"></div>
  </div>
  <div id="decorations" class="decorations">
    <p class="text">Decorate the Christmas Tree:<p>
    <div id="ball1"></div>
    <div id="tree-star"></div>
    <div id="ball2"></div>
    <div id="ball3"></div>
    <div id="ball4"></div>
    <div id="ball5"></div>
    <div id="ball6"></div>
    <div id="bow"></div>
    <div id="bow2"></div>
    <div id="bow3"></div>
  </div>
  <div id="game-complete"><br/>Merry Christmas!!!</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;
  background-color: #5e6d5a;
}

.christmas-decorations {
  position: relative;
}

Style the Christmas tree (dropzone):

.christmas-decorations:before {
  content:"";
  position: absolute;
  border-radius:50%;
  background-color: rgba(0,0,0,0.5);
  width:200px;
  height:20px;
  top:180px;
  left:-80px;
}

.tree {
  position: relative;
  background-color: #57462a;
  width: 35px;
  height: 70px;
  top:120px;
}

.tree-bottom, .tree-middle {
  position: absolute;
  height:0;
  width:100px;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 100px solid #64a85b;
}

.tree-bottom {
  top:-70px;
  left:-83px;
}

.tree-middle {
  top:-130px;
  left:-83px;
}

.tree-top {
  position: absolute;
  height:0;
  width:0;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  border-bottom: 120px solid #64a85b;
  top:-240px;
  left:-53px;
  z-index:1;
}

.tree-top:before {
  content:"";
  position: absolute;
  border-top: 10px solid rgba(0,0,0,0.5);
  border-right: 5px solid transparent;
  border-left: 105px solid transparent;
  top:120px;
  left:-50px;
  transform: skew(45deg);
}

.tree-top:after {
  content:"";
  position: absolute;
  border-top: 10px solid rgba(0,0,0,0.5);
  border-right: 5px solid transparent;
  border-left: 135px solid transparent;
  top:210px;
  left:-65px;
  transform: skew(45deg);
}
CSS Christmas Tree

Add Christmas decorations (draggable):

.decorations {
  position: absolute;
  width: 250px;
  height: 200px;
  background-color: white;
  left:-500px;
  top:-100px;
  box-shadow: 7px 7px rgba(0,0,0,0.5);
  z-index:3;
}

.text {
  text-align: center;
  font-weight: bold;
  font-family: tahoma;
  text-decoration: underline;
}

#ball1 {
  position: absolute;
  border-radius:50%;
  width:20px;
  height: 20px;
  background-color: #b65964;
  left:20px;
  cursor: pointer;
}

.tree-active {
  filter: brightness(110%);
}

#tree-star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 27px solid transparent;
  border-bottom: 20px solid #cec42f;
  border-left: 27px solid transparent;
  transform: rotate(-35deg);
  top:60px;
  left:50px;
  cursor: pointer;
    }

#tree-star:before {
      border-bottom: 20px solid #cec42f;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

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

#ball2 {
  position: absolute;
  border-radius:50%;
  width:22px;
  height: 22px;
  background-color: #7d45e6;
  left:120px;
  top:90px;
  cursor: pointer;
}

#ball3 {
  position: absolute;
  border-radius:50%;
  width:25px;
  height: 25px;
  background-color: #39bfd8;
  left:40px;
  top:120px;
  cursor: pointer;
}

#ball4 {
  position: absolute;
  border-radius:50%;
  width:23px;
  height: 23px;
  background-color: #cec431;
  left:80px;
  top:150px;
  cursor: pointer;
}

#ball5 {
  position: absolute;
  border-radius:50%;
  width:18px;
  height: 18px;
  background-color: #cec431;
  left:180px;
  top:150px;
  cursor: pointer;
}

#ball6 {
  position: absolute;
  border-radius:50%;
  width:25px;
  height: 25px;
  background-color: #b85863;
  left:180px;
  top:100px;
  cursor: pointer;
}

#bow {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 8px solid #7d45e6;
  border-top: 8px solid #7d45e6;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  transform: rotate(-90deg);
  left:170px;
  cursor: pointer;
}

#bow2 {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 7px solid #39bfd8;
  border-top: 7px solid #39bfd8;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  transform: rotate(-90deg);
  left:140px;
  top:160px;
  cursor: pointer;
}

#bow3 {
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 7px solid #b85863;
  border-top: 7px solid #b85863;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  transform: rotate(-90deg);
  left:100px;
  top:130px;
  cursor: pointer;
}

Style the text:

#game-complete {
  display: none;
  position: absolute;
  font-size:60px;
  font-weight: bold;
  font-family: tahoma;
  color: #ae2012;
  text-shadow: 2px 2px #001219;
  top:-110px;
  left:-165px;
  z-index:4;
  text-align: center;
}

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

and then the following code:

<script>
  var score = 0;

$( function() {
	$("#ball1, #tree-star, #ball2, #ball3, #ball4, #ball5, #ball6, #bow, #bow2, #bow3 ").draggable({ revert: "invalid" });
  $("#dropzone, #dropzone-1, #dropzone-2").droppable({
			accept: "#ball1, #tree-star, #ball2, #ball3, #ball4, #ball5, #ball6, #bow, #bow2, #bow3 ",
      classes: {
        "ui-droppable-active": "tree-active",},
      drop: function() {
	  score++  
	finish();
  },
    });

function finish() {
	if(score === 12)
	{
		$('#game-complete').delay(300).fadeIn("fast");
       }
     }
   }); 
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Tree Animation

CSS Christmas Tree Snow Globe

Roll the dice!

Categories
CSS HTML Web development

CSS Christmas Tree Animation

CSS Christmas Tree Animation

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

Demo:

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

Step1.

Add HTML

<div id="christmas-tree" class="christmas-tree">
  <div class="tree">
    <div class="tree-details"></div>
  </div>
  <div class="lights">
    <div class="row-one"></div>
    <div class="row-two"></div>
  </div>
  <div class="balls"></div>
  <div class="star"></div>
  <div class="shadow"></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;
  background-color: #16323d;
}

.christmas-tree {
  position: relative;
  top:100px;
  cursor: pointer;
}

Style the Christmas Tree:

.tree {
  position: absolute;
  width: 20px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 55px solid #823723;
  height:0;
  animation: drop 1s linear;
}

.tree:before {
  content:"";
  position: absolute;
  background-color: #823723;
  border-radius: 50%;
  width: 30px;
  height:10px;
  top:50px;
  left:-5px;
}

.tree:after {
  content:"";
  position: absolute;
  border-right: 75px solid transparent;
  border-left: 75px solid transparent;
  border-bottom: 200px solid #107261;
  width:0;
  height:0;
  top:-180px;
  left:-65px;
}

.tree-details {
  position: absolute;
  width: 150px;
  height: 10px;
  background-color: #107261;
  border-radius: 50%;
  top:15px;
  left:-65px;
  z-index:1;
}

.tree-details:before {
  content:"";
  position: absolute;
  background-color: #0a897c;
  border-radius:50%;
  width: 5px;
  height: 5px;
  top:-10px;
  left:20px;
  box-shadow: 50px -50px #0a897c, 30px -70px #0a897c, 40px -130px #0a897c, 70px -5px #0a897c, 85px -75px #0a897c;
}

Style and animate the Christmas Lights:

.lights {
  position: absolute;
  opacity:0;
  animation: light 2s linear infinite, drop 1s linear .5s forwards;
}

@keyframes light {
  0% {filter: drop-shadow(0 0 2px #fefae0) brightness(1);}
  50% {filter: drop-shadow(0 0 5px #fefae0) brightness(1.35);}
  100% {filter: drop-shadow(0 0 2px #fefae0) brightness(1);}
}

.row-one {
  position: absolute;
  background-color: #e9d8a6;
  border-radius:50%;
  width:10px;
  height:10px;
  top: -120px;
  left: -15px;
  box-shadow: 10px 10px #e9d8a6, 25px 15px #e9d8a6, 40px 18px #e9d8a6, 54px 15px #e9d8a6;
}

.row-two {
  position: absolute;
  background-color: #e9d8a6;
  border-radius:50%;
  width:10px;
  height:10px;
  left:-42px;
  top:-45px;
  box-shadow: 10px 10px #e9d8a6, 25px 17px #e9d8a6, 40px 24px #e9d8a6, 55px 28px #e9d8a6, 70px 30px #e9d8a6, 85px 29px #e9d8a6, 100px 25px #e9d8a6, 112px 20px #e9d8a6;
}

Add some Christmas balls:

.balls {
  position: absolute;
  background-color: #f34653;
  width:15px;
  height: 15px;
  border-radius:50%;
  z-index:2;
  opacity:0;
  box-shadow: -20px -55px #f34653, 25px -70px #f34653;
  animation: drop 1s linear 1s forwards;
}

.balls:before {
  content:"";
  position: absolute;
  background-color: #f34653;
  width:13px;
  height: 13px;
  border-radius:50%;
  left:-40px;
  top:-10px;
  box-shadow: 100px 10px #f34653, 25px -80px #f34653, 60px -120px #f34653;
}

.balls:after {
  content:"";
  position: absolute;
  background-color: #94d2bd;
  width:10px;
  height: 10px;
  border-radius:50%;
  top:-40px;
  left:40px;
  box-shadow: -35px -35px #94d2bd, -35px -105px #94d2bd, -60px 45px #94d2bd;
}

Add the star on the top:

.star {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 17.5px solid #f9c819;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
  top:-190px;
  left:-9px;
  opacity:0;
  animation: dropStar 1s linear 1.5s forwards;
    }

.star:before {
      border-bottom: 20px solid #f9c819;
      border-left: 7.5px solid transparent;
      border-right: 7.5px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

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

And the shadow:

.shadow {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.7);
  width: 50px;
  height: 20px;
  z-index:-1;
  top:50px;
  left:-10px;
  animation: scale .5s linear forwards;
}

@keyframes scale {
  0% {transform: scaleX(1);}
  100% {transform: scaleX(3);}
}

Animate the Christmas Tree and decorations:

@keyframes drop {
  0% {transform: translateY(-470px) scaleY(0.9); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px) scaleY(1); opacity: 1;}
  65% {transform: translateY(-15px) scaleY(0.9); opacity: 1;}
  75% {transform: translateY(-18px) scaleY(0.9); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1); opacity: 1;}
}

   @keyframes dropStar {
  0% {transform: translateY(-470px) scaleY(0.9) rotate(-35deg); opacity: 0;}
  5% {opacity: 1;}
  50% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
  65% {transform: translateY(-15px) scaleY(0.9) rotate(-35deg); opacity: 1;}
  75% {transform: translateY(-18px) scaleY(0.9) rotate(-35deg); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
  100% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
}

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-tree').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Christmas Tree

CSS Christmas Card

CSS Winter window scene

Categories
CSS JQuery Web development

CSS Christmas Card

Many of us have our own personal traditions when sending out Christmas cards. I always send the wishes to my family and friends, so to make it easier I created the CSS Christmas Card 🙂

CSS Christmas Card

If you still did not send the wishes to your loved ones, follow the steps below and create an original Christmas card!

*Christmas card opened in the Firefox browser.
*to see the animation on the website click here.

Demo:

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. Add jQuery (optional)

Step1.

Add HTML

Create the container, the card, and snowflakes:

<div id="christmascard">
  <div class="card">
    <div class="tree">
      <div class="tree1"></div>
      <div class="balls"></div>
      <div class="balls1"></div>
      <div class="sparkles">✨</div>
      <div class="sparkles1">✨</div>
    </div>
    <div class="wishes">
<!-- You can type your wishes here -->
      <div class="merry">Merry</div>
      <div class="christmas">CHRISTMAS</div>
      <div class="everyone">Everyone</div>
      <div class="lena">Lena xxx</div>
  </div>
    <div class="snowfall">
      <div class="snowflake1">❄</div>
      <div class="snowflake2">❄</div>
      <div class="snowflake3">❄</div>
      <div class="snowflake4">❄</div>
      <div class="snowflake5">❄</div>
      <div class="snowflake6">❄</div>
      <div class="snowflake7">❄</div>
      <div class="snowflake8">❄</div>
      <div class="snowflake9">❄</div>
      <div class="snowflake10">❄</div>
    </div>
</div>
</div>

Step2.

Add CSS

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

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

#christmascard {
  position: relative;  
}

Create the card:

.card {
  z-index:1;
  position: relative;
  width: 500px;
  height: 400px;
  border: 10px solid #fff;
  box-shadow: inset 5px 5px 1px rgba(0,0,0,0.07), 10px 10px 7px rgba(0,0,0,0.3);
  background-color: #c44536;
  overflow:hidden;
  
}

.tree {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #43291f;
  left: 245px;
  top:120px;
}

.tree:before {
  content:"";
  position: absolute;
  border-bottom: 45px solid #6a994e;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  width:0;
  height:0;
  left:-35px;
  top:-30px;
}

.tree:after {
  content:"";
  position: absolute;
  border-bottom: 45px solid #a7c957;
  border-right: 40px solid transparent;
  top:-30px;
  left:5px;
  width:0;
  height:0;
}

.tree1 {
  position: absolute;
  border-bottom: 40px solid #6a994e;
  border-right: 35px solid transparent;
  border-left: 35px solid transparent;
  width:0;
  height:0;
  left:-30px;
  top:-55px;
}

.tree1:before {
  content:"";
  position: absolute;
  border-bottom: 40px solid #a7c957;
  border-right: 35px solid transparent;
  top:0;
  left:0;
  width:0;
  height:0;
}

.tree1:after {
  content:"";
  position: absolute;
  border-bottom: 30px solid #6a994e;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-15px;
  left:-25px;
  width:0;
  height:0;
}

.balls {
  position: absolute;
  border-bottom: 30px solid #a7c957;
  border-right: 25px solid transparent;
  width:0;
  height:0;
  left:5px;
  top:-70px;
}

.balls:before {
  content:"";
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  top:14px;
  left:2px;
}

.balls:after {
  content:"";
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  top:40px;
  left:-15px;
}

.balls1 {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  z-index:2;
  left:-10px;
}

.balls1:before {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  content:"";
  left:20px;
  top:-25px;
}

.balls1:after {
  background-color: #fff;
  border-radius:50%;
  width:7px;
  height: 7px;
  position: absolute;
  content:"";
  left:25px;
  top:-5px;
}

.sparkles {
  position: absolute;
  z-index:2;
  font-size:25px;
  left:-50px;
  top:-5px;
}

.sparkles1 {
  position: absolute;
  z-index:2;
  font-size:23px;
  top:-63px;
  left:18px;
}

Style the wishes (you can type your wishes in the HTML part):

.wishes {
  position: absolute;
  top:200px;
  text-align: center;
  left:140px;
  top:180px;
  color: #fff;
  line-height: 50px;  
}

.merry {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.everyone {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.christmas {
  font-size: 35px;
  font-family: Verdana, sans-serif;
}

.lena {
  font-family: 'Brush Script MT', cursive;
  font-size: 25px;
}

Step3.

Add CSS Animation

Add some snowflakes to the card:

.snowfall {
  position: absolute;
}

.snowflake1, .snowflake2, .snowflake3, .snowflake4, .snowflake5, .snowflake6, .snowflake7, .snowflake8, .snowflake9, .snowflake10 {
  color: white;
  position: absolute;
}

.snowflake1 {
  font-size:25px;
  left:30px;
  animation: fall 10s linear infinite;
}

.snowflake2 {
  font-size:15px;
  left:30px;
  animation: fall2 6s linear infinite;
}

.snowflake3 {
  font-size:19px;
  left:230px;
  animation: fall3 7s linear infinite;
}

.snowflake4 {
  font-size:24px;
  left:250px;
  animation: fall4 8s linear infinite;
}

.snowflake5 {
  font-size:22px;
  left:333px;
  animation: fall2 6s linear infinite;
}

.snowflake6 {
  font-size:27px;
  left:400px;
  animation: fall 6.5s linear infinite;
}

.snowflake7 {
  font-size:20px;
  left:450px;
  animation: fall5 8.5s linear infinite;
}

.snowflake8 {
  font-size:18px;
  left:170px;
  animation: fall3 7.5s linear infinite;
}

.snowflake9 {
  font-size:29px;
  left:120px;
  animation: fall4 9.5s linear infinite;
}

.snowflake10 {
  font-size:27px;
  left:290px;
  animation: fall5 5s linear infinite;
}

@keyframes fall {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-10px);}
}

@keyframes fall2 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-40px);}
}

@keyframes fall3 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(50px);}
}

@keyframes fall4 {
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(30px);}
}

@keyframes fall5{
  0% {top:-10px;transform:translateX(10px);}
  100% {top:400px;transform:translateX(-40px);}
}

Christmas Card is ready but if you want to add to the card an extra rotation effect follow the step below.

Step4.

Add jQuery

*don’t forget to add the jQuery library in the head section of your HTML file.

$(function(){
    var card = $("#christmascard");
    card.on('mousemove', function (event) {
    var y = event.clientY - $(this).offset().top + $(window).scrollTop();
    var x = event.clientX - $(this).offset().left + $(window).scrollLeft();
            
    var rY = turn(x, 0, $(this).width(), -30, 30);
    var rX = turn(y, 0, $(this).height(), -50, 50);
    
        $(this).children(".card").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
    });
        
    function turn(x, in_min, in_max, out_min, out_max)
    {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }
});

To see the CSS Christmas Card animation on the website go to lenastanley.com.

Enjoy coding!

Read also:

CSS Snowfall

CSS Christmas Tree Snow Globe

CSS Christmas Tree

Categories
CSS HTML Web development

CSS Christmas Tree

CSS Christmas Tree

Christmas is coming! Do you have your Christmas tree ready?

*animation opened in the Firefox browser.
*to see the animation on the website click here.

Demo:

To create the CSS Christmas Tree animation follow the steps below and watch the video tutorial:

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

Step1.

Add HTML

<div class="christmas">
  <div class="tree">
    <div class="chain"></div>
    <div class="chain2"></div>
  </div>
  <div class="lights">
    <div class="light1"></div>
    <div class="light2"></div>
    <div class="light3"></div>
    <div class="light4"></div>
    <div class="light5"></div>
    <div class="light6"></div>
    <div class="light7"></div>
    <div class="light8"></div>
    <div class="light9"></div>
    <div class="light10"></div>
  </div>
  <div class="balls">
    <div class="ball1"></div>  
  </div>
  <div class="star"></div>
  <div class="gift"></div>
  <div class="ribbon"></div>
  <div class="gift2"></div>
  <div class="ribbon2"></div>
  <div class="gift3"></div>
  <div class="ribbon3"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

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

body {
  background-color: #00509d;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.christmas {
  position: relative;
}

Style the Christmas tree:

.tree {
  position: relative;
  background-color: #685044;
  width: 30px;
  height:80px;
  top:100px;
  transform-style: preserve-3d;
}

.tree:before {
  content:"";
  position: relative;
  width: 0;
  height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 270px solid #127475;
  border-radius: 30px;
  top:-250px;
  left:-75px;
}

.tree:after {
  content:"";
  position: relative;
  width: 0;
  height: 0;
  border-right: 90px solid transparent;
  border-bottom: 270px solid #0e9594;
  border-bottom-right-radius: 30px;
  top:-250px;
  left:-165px;
}
.shadow {
  background-color: rgba(0,0,0,0.07);
  position: absolute;
  width: 250px;
  height: 30px;
  border-radius:50%;
  top:170px;
  left:-115px;
  z-index:-1;
}

Add the Christmas decorations:

.chain {
  width: 85px;
  height: 85px;
  border: solid 3px #333;
  border-radius: 50%;
  top: -185px; 
  left: -35px; 
  position: absolute;
  transform: rotate3d(8, 0.1, -5, 75deg); 
  box-sizing: border-box;
  backface-visibility: visible !important;
  z-index:5;
}

.chain2 {
  width: 145px;
  height: 135px;
  border: solid 3px #333;
  border-radius: 50%;
  top: -115px; 
  left: -65px; 
  position: absolute;
  transform: rotate3d(8, 0.1, -5, 75deg); 
  box-sizing: border-box;
  backface-visibility: visible !important;
  z-index:5;
  
}
CSS Xmas Tree

Add the Christmas lights:

.lights {
  position: absolute;
  
}

.light1 {
   position: absolute;
   width: 15px; 
   height: 15px;
   border-radius: 10px 150px 30px 150px;
}

.light1 {
  background-color: #ff595e;
  top:-100px;
  left:-35px;
  transform: rotate(40deg);
  box-shadow: 1px 1px 15px #faf3dd;
}

.light2 {
  position: absolute;
  background-color: #ffca3a;
  top:-95px;
  left:-10px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light3 {
  position: absolute;
  background-color: #6a4c93;
  top:-105px;
  left:15px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light4 {
  position: absolute;
  background-color: #1982c4;
  top:-118px;
  left:35px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light5 {
  position: absolute;
  background-color: #1982c4;
  top:12px;
  left:-55px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light6 {
  position: absolute;
  background-color: #8ac926;
  top:15px;
  left:-25px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light7 {
  position: absolute;
  background-color: #ff595e;
  top:10px;
  left:2px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light8 {
  position: absolute;
  background-color: #ffca3a;
  top:-2px;
  left:27px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light9 {
  position: absolute;
  background-color: #9e0059;
  top:-17px;
  left:50px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}

.light10 {
  position: absolute;
  background-color: #4361ee;
  top:-40px;
  left:68px;
  box-shadow: 1px 1px 15px #faf3dd;
  width: 15px; 
  height: 15px;
  border-radius: 10px 150px 30px 150px;
  transform: rotate(40deg);
}
CSS Christmas Tree

and the star on the top:

.star {
  margin: 50px 0;
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 17.5px solid #f9dc5c;
  border-left: 25px solid transparent;
  transform: rotate(35deg);
  top:-190px;
  left:-9px;
    }

.star:before {
      border-bottom: 20px solid #f9dc5c;
      border-left: 7.5px solid transparent;
      border-right: 7.5px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -12.5px;
      left: -17.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star:after {
      position: absolute;
      display: block;
      top: 0.75px;
      left: -26.25px;
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-bottom: 17.5px solid #f9dc5c;
      border-left: 25px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }
CSS Christmas Tree Animation

Style the gifts:

.gift {
  position: absolute;
  width: 60px;
  height: 50px;
  background-color: #ffc857;
  top:130px;
  left:30px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift:before {
  content:"";
  position: absolute;
  width:70px;
  height:15px;
  background-color: #ffc857;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift:after {
  content:"";
  background-color: #db3a34;
  width: 10px;
  height:50px;
  position: absolute;
  left:25px;
}

.ribbon {
  position: absolute;
  width: 20px;
  height: 10px;
  border: 3px solid #db3a34;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:116px;
  left:35px;
}

.ribbon:before {
  content:"";
  position: absolute;
  width: 20px;
  height: 10px;
  border: 3px solid #db3a34;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:22px;
  top:-8px;
}

.gift2 {
  position: absolute;
  width: 50px;
  height: 40px;
  background-color: #08bdbd;
  top:140px;
  left:-65px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift2:before {
  content:"";
  position: absolute;
  width:60px;
  height:15px;
  background-color: #08bdbd;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift2:after {
  content:"";
  background-color: #abff4f;
  width: 10px;
  height:40px;
  position: absolute;
  left:15px;
}

.gift3 {
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: #7678ed;
  top:150px;
  left:-85px;
  box-shadow: inset -8px 0 0 rgba(0,0,0,0.07);
  
}

.gift3:before {
  content:"";
  position: absolute;
  width:50px;
  height:10px;
  background-color: #7678ed;
  left:-5px;
  box-shadow: inset -8px -4px 0 rgba(0,0,0,0.07);
  
}

.gift3:after {
  content:"";
  background-color: #f7b801;
  width: 7px;
  height:30px;
  position: absolute;
  left:15px;
}

.ribbon2 {
  position: absolute;
  width: 15px;
  height: 7px;
  border: 3px solid #abff4f;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:129px;
  left:-65px;
}

.ribbon2:before {
  content:"";
  position: absolute;
  width: 15px;
  height: 7px;
  border: 3px solid #abff4f;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:15px;
  top:-8px;
}

.ribbon3 {
  position: absolute;
  width: 12px;
  height: 5px;
  border: 3px solid #f7b801;
  border-radius:50%;
  transform: skew(15deg, 15deg);
  top:142px;
  left:-85px;
}

.ribbon3:before {
  content:"";
  position: absolute;
  width: 12px;
  height: 5px;
  border: 3px solid #f7b801;
  border-radius:50%;
  transform: skew(-15deg, -20deg);
  left:15px;
  top:-8px;
}

and add some Christmas balls:

Pure CSS Christmas Tree

Step3.

Add CSS Animation

To add some flash to Christmas lights:

.light1, .light2, .light3, .light4, .light5, .light6, .light7, .light8, .light9, .light10 {
  -webkit-animation: flash 10s infinite;
}

@-webkit-keyframes flash {
  20%, 24%, 55% {box-shadow: none;}
 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
 box-shadow: 0 0 5px #f5de93, 0 0 15px #f5de93, 0 0 20px #f5de93, 0 0 40px #f5de93, 0 0 60px #decea4, 0 0 10px #d6c0a5, 0 0 98px #ff0000;
  }
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Winter window scene

CSS Christmas Tree Snow Globe

CSS Snowfall