Categories
Web development

Pure CSS Snow Globe

CSS Snow Globe

To learn how to create the CSS Snow Globe follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="snow-ball">
  <div class="snow-globe">
  <div class="ball-container">
    <div class="cottage">
      <div class="roof"></div>
      <div class="window"></div>
      <div class="chimney">
        <div id="up" class="smoke"></div>
        <div id="up" class="smoke2"></div>
      </div>
    </div>
    <div class="snowman">
      <div class="scarf"></div>
      <div class="hat"></div>
    </div>
    <div class="trees"></div>
    <div class="trees2"></div>
    <div class="reflection"></div>
    <div class="snowfall">
      <div class="snowflake"></div>
      <div class="snowflake1"></div>
      <div class="snowflake2"></div>
    </div>
  </div>
  <div class="holder"></div>
  </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;
  justify-content: center;
  align-items: center;
  background-color: #ade8f4;
  overflow: hidden;
}

.snow-ball {
  position: relative;
  top:-15px;
}

Style the snow globe:

.ball-container {
  position: relative;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,0.3);
  overflow: hidden;
}

.ball-container:before {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:350px;
  height: 110px;
  top:275px;
}

.ball-container:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius: 50%;
  width:324px;
  height:40px;
  top:255px;
  left:23px;
}
CSS Snow ball

Style the cottage:

.cottage {
  position: absolute;
  z-index:2;
  width: 80px;
  height: 40px;
  background-color: #aca081;
  box-shadow: -40px 0 #8d826c;
  top:230px;
  left:120px;
}

.cottage:before {
  content:"";
  position: absolute;
  background-color: #aca081;
  width:57.5px;
  height: 57.5px;
  transform: rotate(45deg);
  top:-28px;
  left:11px;
}

.cottage:after {
  content:"";
  position: absolute;
  background-color: #e7e7e7;
  box-shadow: -40px 0 #c0c0c0;
  width: 80px;
  height:20px;
  top:22px;
}

.roof {
  position: absolute;
  background-color: rgba(0,0,0,0.2);
  width:40px;
  height: 5px;
  left:-40px;
}

.roof:before {
  content:"";
  position: absolute;
  background-color: white;
  border-radius: 5px 0px 0px 5px;
  width:50px;
  height: 43px;
  top:-43px;
  transform: skew(-45deg);
  left:13px;
}

.roof:after {
  content:"";
  position: absolute;
  transform: skew(45deg);
  background-color: white;
  width: 7px;
  height: 43px;
  border-radius: 0 2px 5px 0;
  top:-43px;
  left:98px;
}

.window {
  position: absolute;
  width: 23px;
  height: 23px;
  background-color: #fff7c2;
  top:-5px;
  left:30px;
  box-shadow: 10px 0 #625f56, -10px 0 #625f56;
}

.window:before {
  content:"";
  position: absolute;
  width: 23px;
  height: 2px;
  background-color: #c5bb97;
  top:11px;
}

.window:after {
  content:"";
  position: absolute;
  width: 2px;
  height: 23px;
  background-color: #c5bb97;
  top:0;
  left:10.3px;
}

.chimney {
  position: absolute;
  background-color: #8d826c;
  width:15px;
  height:30px;
  top:-45px;
  left:-25px;
  box-shadow: 0 -5px #625f56;
  z-index:3;
}

.chimney:before {
  content:"";
  position: absolute;
  width:10px;
  height: 5px;
  background-color: #bfaf94;
  border-radius:10px;
  top: 15px;
  left: 60px;
  box-shadow: 5px 10px #bfaf94, -8px 15px #bfaf94, -28px 25px #bfaf94, -32px 35px #bfaf94, 20px 17px #bfaf94, 30px 30px #bfaf94, 32px 40px #bfaf94,-28px 44px #bfaf94, -50px 37px #7d7360, -55px 44px #7d7360, -70px 41px #7d7360;
}

.chimney:after {
  content:"";
  position: absolute;
  background-color: white;
  width:45px;
  height: 10px;
  top:62px;
  left:44px;
  border-radius:5px;
}
CSS Snowball

And add smoke from the chimney:

#up {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e5e5e5;
  border-radius: 50%;
  opacity: 0;
  top: -25px;
  left: -5px;
  z-index:-1;
}

.smoke {
  animation: up 2.5s ease-out infinite; 
}

.smoke2 {
  animation: up 1.7s ease-out infinite 1s; 
}

.smoke2:before {
  content:"";
  position: absolute;
  left:5px;
  width:15px;
  height:15px;
  background-color: #e5e5e5;
  border-radius:50%;
  top:20px;
}

@keyframes up {
  0%{
    transform: translateY(0) scale(0.5);
    opacity: 0.8;
  }
  100%{
    transform: translateY(-50px) scale(1.35);
    opacity: 0.1;
  }
}

Style trees and the snowman:

.trees {
  position: absolute;
  background-color: white;
  width:20px;
  height:45px;
  border-radius:10px;
  left:50px;
  top:210px;
  z-index:3;
  box-shadow: 160px -10px white;
}

.trees:before {
  content:"";
  position: absolute;
  background-color: #625f56;
  width:5px;
  border-radius:5px 5px 0 0;
  height:30px;
  left:7.5px;
  top:25px;
  box-shadow: 159.5px -10px #625f56;
}

.trees2 {
  position: absolute;
  height:0;
  width:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #97b2b0;
  top:165px;
  left:165px;
}

.trees2:before {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 70px solid #62827c;
  top:25px;
  left:25px;
}

.trees2:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 90px solid #62827c;
  left:-140px;
  top:20px;
}

.snowman {
  position: absolute;
  border-radius:50%;
  background-color: rgba(0,0,0,0.1);
  width:30px;
  height:10px;
  top:270px;
  left:265px;
  z-index:4;
}

.snowman:before {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:30px;
  height:30px;
  border-radius: 50%;
  top:-23px;
}

.snowman:after {
  content:"";
  position: absolute;
  background-color: #f2f2f2;
  width:20px;
  height:20px;
  border-radius: 50%;
  top:-40px;
  left:5px;
}

.scarf {
  position: absolute;
  width:20px;
  height:5px;
  background-color: #a5a696;
  top:-23px;
  left:5px;
  border-radius:10px;
  z-index:5;
}

.scarf:before {
  content:"";
  position: absolute;
  width:5px;
  height: 15px;
  background-color: #a5a696;
  left:5px;
  border-radius:10px;
}

.scarf:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-right: 10px solid #ca6702;
  top:-7px;
  left:-5px;
  transform: rotate(-10deg);
}

.hat {
  position: absolute;
  z-index:6;
  border-top: 12px solid #60676a;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  border-bottom: 5px solid transparent;
  width:15px;
  top:-52px;
  left:5px;
}

.hat:before {
  content:"";
  position: absolute;
  background-color: #60676a;
  width: 25px;
  height:3px;
  border-radius:10px;
  left:-5px;
}

.hat:after {
  content:"";
  position: absolute;
  background-color: #60676a;
  border-radius:50%;
  width:3px;
  height:3px;
  top:5px;
  box-shadow: 5px 0 #60676a;
}
CSS Snow Ball

Add the ball reflection and the holder with the shadow:

.reflection {
  position: absolute;
  z-index:7;
  background-color: rgba(255,255,255,0.2);
  width: 370px;
  height: 370px;
  border-radius: 50%;
  box-shadow: inset 5px 10px 20px rgba(255,255,255,0.4);
}
.holder {
  position: absolute;
  z-index:8;
  width:255px;
  height:20px;
  background-color: #625f56;
  top:335px;
  left:63px;
}

.holder:before {
  content:"";
  position: absolute;
  width: 255px;
  height:0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 60px solid #7d7360;
  top:20px;
  left:-10px;
}

.holder:after {
  content:"";
  position: absolute;
  width:285px;
  height: 5px;
  border-radius:20px;
  background-color: #625f56;
  top:75px;
  left:-15px;
}

.shadow {
  position: absolute;
  width: 370px;
  height: 10px;
  border-radius:20px;
  background-color: rgba(0,0,0,0.2);
  top:410px;
  left:4px;
  transition: .3s;
}
Pure CSS snowglobe

Create the Snowfall:

.snowfall {
  position: absolute;
  z-index:6;
}

.snowflake, .snowflake1, .snowflake2 {
  position: absolute;
  border-radius:50%;
  background-color: white;
  width: 7px;
  height: 7px;
  filter: blur(1px);
  left: 50px;
  box-shadow: 40px 40px white, -40px -40px white, 80px 60px white, 100px -70px white, 110px -20px white,20px -20px white,120px 40px white, 150px 10px white, 180px 20px white, 50px -60px white, 100px 20px white, 150px -80px white, 170px -50px white, 185px -70px white, 190px 40px white, 220px -10px white, 230px -60px white, 240px -30px white, 250px 20px white, 260px -80px white, -20px 20px white, 10px 10px white, 280px -40px white, 300px -10px white, 320px -100px white, 290px -110px white, 100px -100px white, 80px -120px white;
  animation: fall 2.5s linear infinite;
}

.snowflake {
  left:0;
}

.snowflake1 {
  top:-80px;
  left: 60px;
  animation-delay: .5s;
}

.snowflake2 {
  top: -70px;
  left: 100px;
  animation-delay: 1s;
}

@keyframes fall {
  0 {transform: translateY(-50px);opacity:0.9;}
  100% {transform: translateY(380px);opacity:0.2;}
}

Add effects on hover:

.snow-ball:hover .snow-globe {
  animation: shake .3s ease;
  animation-iteration-count: 2;
}

@keyframes shake {
  0% {transform: rotate(0);}
  25% {transform: rotate(-30deg);}
  50% {transform: rotate(0);}
  75% {transform: rotate(30deg);}
  100% {transform: rotate(0);}
}
.snow-ball:hover .shadow {
  opacity:0;
}

.snow-ball:hover .snowfall {
  animation: bounce .5s ease;
  animation-iteration-count: 2;
}

@keyframes bounce {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-20px);}
	20%, 40%, 60%, 80% {transform: translateX(20px);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Christmas Tree Snow Globe

CSS Winter window scene

JS Canvas Snow Animation

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 Web development

CSS Snowfall

CSS Snowfall

Demo:

*to see the CSS Snowfall animation on the website click here.

What do you need to do?

To create the CSS Snowfall animation follow the steps below:

  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 and elements:

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);}
}

Enjoy coding!

Read also:

CSS Winter window scene

JS Canvas Snow Animation

CSS Christmas Card

Categories
CSS Web development

CSS Christmas Tree Snow Globe

CSS Christmas Tree Snow Globe

CSS Snow Globe Animation:

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

Demo:

To create the CSS Christmas Tree Snow Globe 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="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 elements:

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;
}
CSS Snowball

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;
}
CSS Snow ball

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: '';
    }
CSS Snow globe

Step3.

Add CSS Animation

Add the 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; 
}

Animate the snow:

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

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Christmas Tree

CSS Winter window scene

CSS Snowfall