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
