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.