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 created the CSS Christmas Card 🙂

Do you like this image? Check more images in the store!

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

*Christmas card opened in the Firefox browser.
*to see the live output of the animation click here.

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 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 live output of the CSS Christmas card animation go to lenastanley.com.

Enjoy coding!

Categories
CSS Web development

CSS Snowfall

In the last few days the most clicked tutorial was “Let it snow! CSS Snowfall Animation“. In this tutorial, I created the snowfall effect using the png files.

Today I will show you another way to create the snowfall effect just using pure CSS.

Do you like this GIF? Check more gifs in the store.

CSS Snowfall animation:

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

What do you need to do?

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

Step1.

Add HTML

Create the container, and add snow layers:

<div id="snowfall">
  <div class="snow"></div>
  <div class="snow1"></div>
  <div class="snow2"></div>
</div>
  

Step2.

Add CSS

Set the colour and the size of the background:

body {
  height: 100vh;
  background-image: linear-gradient(0deg, #fff 0%, #73bfdc 100%);
}

Set the size and the position of the container:

#snowfall {
  position: absolute;
  width: 100%;
  height: 100px;
}

Add the snowflakes:

.snow {
  position: absolute;
  border-radius:50%;
  filter: blur(1px);
  background-color: #fff;
  width: 10px;
  height: 10px;
  top:-1000px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation: snowfall 7s linear infinite;
}

.snow:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-150px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-250px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}
.snow1 {
  position: absolute;
  border-radius:50%;
  filter: blur(2px);
  background-color: #fff;
  width: 9px;
  height: 9px;
  top:-850px;
  left:123px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation-delay:-3s;
  animation: snowfall 9s linear infinite;
}

.snow1:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-350px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow1:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-450px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}

.snow2 {
  position: absolute;
  border-radius:50%;
  filter: blur(1.5px);
  background-color: #fff;
  width: 9px;
  height: 9px;
  top:-900px;
  left:-50px;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  animation-delay:-4s;
  animation: snowfall 14s linear infinite;
}

.snow2:before {
  content:"";
  width:7px;
  height:7px;
  position: absolute;
  background-color: #fff;
  left: 200px;
  top:-550px;
  border-radius:50%;
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
  
}

.snow2:after {
  content:"";
  width:5px;
  height:5px;
  position: absolute;
  background-color: #fff;
  left: 300px;
  top:-650px;
  border-radius:50%;
  filter: blur(1px);
  box-shadow: 20px 20px 1px #fff, 60px 40px 1px #fff, 160px 135px 1px #fff, 260px 240px 1px #fff, 360px 340px 1px #fff, 460px 440px 1px #fff, 560px 340px 1px #fff, 660px 240px 1px #fff, 760px 140px 1px #fff, 260px 640px 1px #fff, 160px 340px 1px #fff, 260px 440px 1px #fff, 760px 140px 1px #fff,860px 40px 1px #fff, 760px 140px 1px #fff, 1260px 120px 1px #fff, 1460px 10px 1px #fff,1560px 30px 1px #fff, 1590px 124px 1px #fff, 1680px 415px 1px #fff, 1720px 335px 1px #fff,1000px 212px 1px #fff, 990px 311px 1px #fff, 888px 122px 1px #fff, 765px 10px 1px #fff, 635px 15px 1px #fff, 554px 111px 1px #fff, 455px 222px 1px #fff, 125px 105px 1px #fff, 275px 96px 1px #fff, 245px 40px 1px #fff, 230px 70px 1px #fff, 285px 17px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 360px 340px 1px #fff, 430px 210px 1px #fff, 523px 23px 1px #fff, 1650px 335px 1px #fff, 1777px 123px 1px #fff, 1800px 222px 1px #fff, 1360px 140px 1px #fff;
}

Step3.

Add CSS Animation

@keyframes snowfall {
    100% {transform: translateY(1500px);}
}

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Categories
CSS Web development

CSS Christmas Tree Snow Globe

Yesterday, I posted the tutorial – how to create the Christmas tree using just pure CSS, today then being still in the Christmas mood I will show you how to create the Snow Globe using just pure CSS too.

CSS Snow Globe Animation:

*animation opened in the Firefox browser.
*to see the live output of the animation click here.

What do you need to do?

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

Step.1

Add HTML

<div class="snowball">
  <div class="ball">
    <div class="fall">
      <div class="snowFlakes1"></div>
      <div class="snowFlakes2"></div>
      <div class="snowFlakes3"></div>
      <div class="snowFlakes4"></div>
      <div class="snowFlakes5"></div>
      <div class="snowFlakes6"></div>
      <div class="snowFlakes7"></div>
      <div class="snowFlakes8"></div>
      <div class="snowFlakes9"></div>
      <div class="snowFlakes10"></div>
    </div>
    <div class="tree">
      <div class="tree1"></div>
      <div class="tree2"></div>
      <div class="snow"></div>
      <div class="balls"></div>
      <div class="balls1"></div>
    </div>
    <div class="star"></div>
    <div class="star1"></div>
  </div>
  <div class="holder">
    <div class="text">Merry Christmas!</div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background and the Snow Globe:

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

.snowball {
  position: relative;
  top:-200px;
  left:-200px;
}

Create the glass ball and the holder:

.ball {
  position: absolute;
  width: 300px;
  height:300px;
  border: 8px solid #003049;
  background-color: #bde0fe;
  box-shadow: inset 10px 10px 0 white;
  border-radius:50%;
  overflow:hidden;
}

.holder {
  position: absolute;
  width:250px;
  height:55px;
  background-color: #2a9d8f;
  border: 8px solid #003049;
  border-radius:20px 20px 0 0;
  top:308px;
  left:25px;  
}

.holder:before {
  content:"";
  position: absolute;
  width:500px;
  height:8px;
  background-color:#003049;
  top:55px;
  left:-130px;
}

Add the Christmas Tree:

.tree {
  position: absolute;
  background-color:#003049;
  width:8px;
  height: 40px;
  top:270px;
  left: 145px;
}

.tree:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 120px solid #003049;
  top:-120px;
  left:-70px;
}

.tree:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 95px solid #386641;
  top:-103px;
  left:-55px;
}

.tree1 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 120px solid #003049;
  top:-160px;
  left:-70px;
  z-index:1;
}

.tree1:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 95px solid #6a994e;
  top:17px;
  left:-60px;
}

.tree2 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
  border-bottom: 110px solid #003049;
  top:-200px;
  left:-60px;
  z-index:2;
}

.tree2:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 85px solid #386641;
  top:17px;
  left:-50px;
}

and decorate the tree:

.snow {
  position: absolute;
  z-index:5;
  background-color: white;
  width: 30px;
  height: 15px;
  border-radius: 20px;
  top:-119px;
  left:-30px;
  
}

.snow:before {
  content:"";
  position: absolute;
  z-index:5;
  background-color: white;
  width: 30px;
  height: 15px;
  border-radius: 20px;
  top:50px;
  left:30px;
}

.snow:after {
  content:"";
  position: absolute;
  z-index:5;
  background-color: white;
  width: 30px;
  height: 15px;
  border-radius: 20px;
  top:90px;
  left:10px;
}

.balls {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #d90429;
  border-radius:50%;
  border:4px solid #003049;
  top:-100px;
  z-index:10;
}

.balls:before {
  content:"";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #118ab2;
  border-radius:50%;
  border:4px solid #003049;
  top:-50px;
  left:15px;
  
}

.balls:after {
  content:"";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #8338ec;
  border-radius:50%;
  border:4px solid #003049;
  top:50px;
  left:-55px;
  
}

.balls1 {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #ff006e;
  border-radius:50%;
  border:4px solid #003049;
  top:-160px;
  left:-30px;
  z-index:10;
}

.balls1:before {
  content:"";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #fb5607;
  border-radius:50%;
  border:4px solid #003049;
  top:100px;
  left:55px;
  
}

.balls1:after {
  content:"";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: #ffbe0b;
  border-radius:50%;
  border:4px solid #003049;
  top:75px;
  left:-25px;
  
}

.star1 {
  margin: 50px 0;
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 45.5px solid transparent;
  border-bottom: 31.85px solid #003049;
  border-left: 45.5px solid transparent;
  transform: rotate(35deg);
  top:3px;
  left:107.5px;
  z-index:3;
    }

.star1:before {
      border-bottom: 36.4px solid #003049;
      border-left: 12.85px solid transparent;
      border-right: 12.95px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -22.75px;
      left: -31.85px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

.star1:after {
      position: absolute;
      display: block;
      top: 1.365px;
      left: -48.37px;
      width: 0px;
      height: 0px;
      border-right: 45.5px solid transparent;
      border-bottom: 31.85px solid #003049;
      border-left: 45.5px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

.star {
  margin: 50px 0;
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-bottom: 17.5px solid #ffbe0b;
  border-left: 25px solid transparent;
  transform: rotate(35deg);
  top:10px;
  left:126px;
  z-index:4;
    }

.star:before {
      border-bottom: 20px solid #ffbe0b;
      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 #ffbe0b;
      border-left: 25px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

Step3.

Add CSS Animation

Style the snow and let it snow!

.fall {
  position: absolute;
  z-index:15;
}

.snowFlakes1, .snowFlakes2, .snowFlakes3, .snowFlakes4, .snowFlakes5, .snowFlakes6, .snowFlakes7, .snowFlakes8, .snowFlakes9, .snowFlakes10  {
  width:10px;
  height: 10px;
  border-radius:50%;
  position: absolute;
  background-color: white;
}

.snowFlakes1 {
  top:10px;
  left:80px;
  animation: fall 7s linear infinite;  
}

.snowFlakes2 {
  top:10px;
  left: 140px;
  animation: fall 5s linear infinite; 
}

.snowFlakes3 {
  top:10px;
  left: 70px;
  animation: fall 5s linear infinite; 
}

.snowFlakes4 {
  top:10px;
  left: 40px;
  animation: fall 9s linear infinite; 
}

.snowFlakes5 {
  top:10px;
  left: 190px;
  animation: fall 9.5s linear infinite; 
}

.snowFlakes6 {
  top:10px;
  left: 220px;
  animation: fall 4s linear infinite; 
}

.snowFlakes7 {
  top:10px;
  left: 250px;
  animation: fall 13s linear infinite; 
}

.snowFlakes8 {
  top:10px;
  left: 30px;
  animation: fall 3s linear infinite; 
}

.snowFlakes9 {
  top:10px;
  left: 130px;
  animation: fall 7s linear infinite; 
}

.snowFlakes10 {
  top:10px;
  left: 230px;
  animation: fall 5s linear infinite; 
}

CSS fall animation:

@keyframes fall {
    100% {transform: translateY(300px);}
}

To see the live output of the animation go to lenastanley.com.

Check also my London Snowball.

Enjoy coding!

Categories
CSS Web development

CSS Animation – Snowball

Usually, winter brings us beautiful snowflakes (we have already the middle of the winter season!) which in this season I can watch only in Snowball! You could see some Snowballs already on my blog, which I drew in Adobe Illustrator, but recently I thought…why not use CSS to create Snowball Animation? So, I made it up! Follow this tutorial and create your own CSS Animated Snowball.

Do you like this gif? Check more gifs in the store.
*animation opened in the Safari browser
To see the live output click here.

What do you need to do? You need to have pictures of the snow in .png format (you can download them below) and image of an object which you would like to put inside of snow globe (snowman, cityscape, etc.).

Optionally you gonna need an image of snowball holder (you can use mine too).

Images:

When you’ll get all the images you need:

  1. Add HMTL
  2. Add CSS
  3. Add CSS Animation

Let’s start!

Step 1.

Add HTML

Read the comments in the code:

<div id="ball-container">
        <img src="snowman.png"/> <! –– an image which you want to put inside of snow globe ––> 
        
        <div id="snow1" class="snow-layer"></div> 
        <div id="snow" class="snow-layer"></div>
        <div id="div-wrapper"class="div-wrapper">
        <img src="snowball.png"/></div><! –– an image of Snowball's holder (optional) ––>
        
        </div>

Step 2.

Add CSS

First, add a blue background. To see more HTML blue shadows click here.

body{
 background: #40E0D0;
        
}

Now, we’ll create a transparent ball and then we’ll put our image inside. We’ll use the border-radius property to make our bulb and image round. More about the border-radius property you can read here.

#ball-container {
          
position: relative;
background: transparent;
box-sizing: border-box;
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
box-shadow: inset 0px 15px 60px 5px rgba(0, 0, 0, 0.15);
z-index: 999;   
        }
        
#ball-container img {
width: auto;
height: auto;
position: absolute;
top: 90px;
right: 10%;
border-radius: 50%;
display: block;
        }
This is what you should see now on your screen.

Add the snow layer:

.snow-layer {
position: absolute;
box-sizing: border-box;
border-radius: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;

Optional step: Add the Holder to the Ball.

.div-wrapper {
    position: relative;
    top: 8%;
    right: -22%;
}

Now, our Snowball should look like that:

Snowball with the holder.

Step 3.

Add CSS Animation

In #snow and #snow1 you need to add the images of snow in .png format.

 @keyframes backgroundScroll {
            0%   { background-position: 0 0 }
            100% { background-position: 0 500px }  
        }
  
        #snow1 {
            animation:  backgroundScroll 6s linear infinite;
            background: url('snow4.png') repeat;
            background-size: 100% 100%;   
        }
  
        #snow {
            animation: backgroundScroll 10s linear infinite;
            animation-delay: -3s; 
            background: url('snow3.png') repeat;
            background-size: 100% 100%;   
        }

Our Snowball is ready!

To see the live output visit: lenastanley.com

Check also my other snowballs – pure CSS Christmas Tree Snowball and the London Snowball.

Enjoy coding!

Categories
CSS Web development

Let it snow! CSS Snowfall Animation

I still waiting for the first snow this winter. I love snow and winter sports! I created some snow in CSS (while waiting for the real one ;))

Do you like this GIF? Check more gifs in the store.

You can add the CSS Snow Effect to your image (one element) or whole background. First I’ll show you how to add a bit of snow to the image.

To see live output click here.

Adding the Snow Effect to the Image

To create your own Snow Effect Animation you need four images. 3 images of snowflakes in .png format (you can use those below) and one image which you want to style with snow (winter landscape, snowman, or your picture..).

snow1.png
snow3.png
snow.png

If you want to create the snowflakes by yourself make the documents in the same size.

When you collected all necessary images we can go further and:

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

Step 1.

Add HTML

 <div id="card-container">
        <img src="yourimage.jpg"> 
        <div id="snow-3" class="snow-layer"></div> 
        <div id="snow-2" class="snow-layer"></div> 
        <div id="snow-1" class="snow-layer"></div> 
    </div>

Step 2.

Add CSS

#card-container {
            position: relative;
            box-sizing: border-box;
            display: inline-block;
            padding: 0;
            margin: 0;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
            border: 15px solid brown;
            border-radius: 15px;
        }
 
      
        #card-container img {
            position: relative;
            box-sizing: border-box;
            height: 480px;  
            padding: 0;
            margin: 0;
            display: block;
        }
 
     
        .snow-layer {
            position: absolute;
            box-sizing: border-box;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }

Step 3.

Add CSS Animation

@keyframes backgroundScroll {
            0%   { background-position: 0 0 }
            100% { background-position: 0 480px }  
        }
 
        
        #snow-1 {
            animation:  backgroundScroll 6s linear infinite; /* Linear animation for constant speed */
            background: url('snow.png') repeat; /* Repeat the background */
            background-size: 100% 100%; 
        }
 
       
        #snow-2 {
            animation: backgroundScroll 10s linear infinite;
            animation-delay: -3s; 
            background: url('snow3.png') repeat;
            background-size: 100% 100%;
        }
 
       
        #snow-3 {
            animation: backgroundScroll 14s linear infinite;
            animation-delay: -9s; /* Optional. Shifts layer down. */
            background: url('snow1.png') repeat;
            background-size: 100% 100%;
        }

To see the live output go to lenastanley.com.

Adding the snow effect to the background

What do you need to do?

You need to have just two images of snowflakes in format .png (you can take them from above) and an optional (you can use just background-color property) your image which you would like to put as your background, and then:

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

Step 1.

Add HTML

<div class="section">
<div class="snow1"></div>
<div class="snow2"></div>
</div>

Step 2.

Add CSS

.section{
background:url(your image.jpg);
background-size: cover;
width: 100%;
height: 650px;
position: relative;
overflow: hidden;
}
.snow1{
	background: url(snow.png);
	background-repeat: repeat;
	width: 100%;
	height: 650px;
	position: absolute;
	top:0;
	left:0;
	animation:animateOne 10s infinite linear;
}
.snow2{
	background: url(snow3.png);
	background-repeat: repeat;
	width: 100%;
	height: 650px;
	position: absolute;
	top:0;
	left:0;
	animation:animateSecond 10s infinite linear;
}

Step 3.

Add CSS Animation

@keyframes animateOne 
{
	0%
	{background-position: 0px 0px}
	100%
	{background-position: 100px 650px}
}
@keyframes animateSecond
{
	0%
	{background-position: 0px -100px}
	100%
	{background-position: 0px 650px}
}

To see the live output of CSS Snow Effect background go to: lenastanley.com.

New! Check also the CSS Snowfall tutorial.

Enjoy coding!