hello and welcome to red stapler channel in this tutorial I'm going to show you
how to create a snow effect using CSS box-shadow
and without any background image at all ready let's check it out
the key concept of this project is to use CSS box shadow to create a snow layer on each div then
apply various blur filter on each snow layer to create depth of field
effect and finally apply the animation this may sounds a little bit complicated
but don't worry we'll work on it step-by-step let's create a first layer
of the snow and then on to the CSS since this project involves of
generating random snow particles we'll be using a CSS to achieve that
first let's apply a radial-gradient background to the wrapper
for our snows set the border-radius to 50% to form a circle and the opacity to 80%
and next we'll define the properties of the first snow layer set the width and height
to 1.5 REM and apply a small amount of blur filter
and here comes the key part of this tutorial in previous video we use box-shadow
to create an 8-bit Pokeball image we'll do something similar for this
project except that we will create a for loop to random the position for each snow particle
create a variable and a for loop that
runs 400 times. This will be the number of snow particles for each layer
For each run random the x,y position using viewport units
and concat with zero blur radius
and concat with spread parameter using negative value. This will create a
various snow size. And finally concat with white color. I will also add a condition
to concat comma except the final run
now it's time to apply this for the box-shadow
all right that looks good it's time that we work on another layers I'm going to
create three layers of snow let's duplicate all the code from the first one
to create depth of field effect I'm going to reduce the size and increase
the blur of the second and third layers
okay now let's work on the animation I'm going to create a linear
infinite animation that moved the snow downward
also set a position of the snow to starting position
to maintain the depth of field effect I'm going to make the back layers move
slower than the front using animation duration
almost done now to create a seamless mission we will duplicate each layer and
then set the animation delay on one of them with the half of the duration
the trick is to use negative value this will offset animation to skip the part
where the snow is moving into the screen
and here's the result
so that's it. Hope you guys enjoy you can find a link to a Pokeball 8-bit image tutorial
below if you loved this video please feel free to like or subscribe to stay
with us or follow the Facebook page for interesting updates thanks for watching
and see you next time bye