Pure CSS Snow Falling Effect for Christmas

Category: Animation | February 2, 2019
Pure CSS Snow Falling Effect
Author: Artimon
Official Page: Go to Website
Last Update:March 28, 2019
License:MIT

Are you planning to build a theme for your client for winter or holiday? let’s try out this simple and pure CSS snow falling effect and standout your site.

It is a tiny CSS file which you simply need to include in your theme to start adding the effect. You can easily override the default values to customize it as per your need.

You don’t need Js anymore to developed snowflakes on your website. It’s pure CSS build which means, no load on your site. Its work perfect with all the modern browsers using the CSS3 animations.

Simply add the one line of CSS file and few lines of HTML code to your website and enjoy the beautiful falling snow effect. Merry Chrismas!

How to Create Snow Falling Effect with Pure CSS

let’s download the plugin and add the snowfall.css in your website header. Just like this way.

<link rel="stylesheet" type="text/css" href="css/snowfall.css">

As for as HTML. it’s also simple and easy to understand. All you need to define the HTML5 tag snowfall and then place each snowflake inside it. Just example below.

<snowfall>
	<snowflake><img src="img/snowflake.png">️</snowflake>
	<snowflake><img src="img/snowflake.png">️</snowflake>
</snowfall>

If you don’t want to use the image or want to mix the snowflake with a combination of images and icon. You can add it as well.

<snowflake><span>❄</span>️️</snowflake>
<snowflake><span>🍂</span>️️</snowflake>
<snowflake><span>💝</span> ️️</snowflake>
<snowflake><span>🌟</span>️</snowflake>

In our demo, we have also added some nice background which you can also do by defining the background-image property in your stylesheet.

<style>
	html,
	body {
		width: 100%;
		height: 100%;

		padding: 0;
		margin: 0;
	}

	body {
		background-image: url(../img/pexels-photo-753337.jpeg);
		background-size: cover;
	}
</style>

That’s it! I hope it will help you. If you like this post, please share it. Thanks.

 

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.