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