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!