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!