hello and welcome to red stapler Channel
in this tutorial we will show you how to
use css mask to easily create effect
like parallax using SVG or transparent
image in just a few minutes ready let's
check it out first if your mask is going
to be a polygonal shape I recommend you
to use an SVG image instead of
transparent PNG as the file will be
smaller and also scalable to create an
SVG mask open your image in Photoshop
and select the area you want it to be visible
then right-click and select make work
path
then at the layer menu select new fill
layer and solid color
click OK and change the color to black
then on a file menu select export
then export as
select SVG format then click export all
and save the file
now we have the mask next let's create
our page first I will create a div for
the background parallax image
then I will put a headline text inside it
then create an another div for the website
content
now I wukk set width to 100% and height
with 50% taller than the screen so we
will be able to scroll down
then set the background image with cover
size
also set position to relative
next we'll set the size of the content div
this div is for spacing purpose in
this tutorial so we will just set the
size and done with it
now the background is ready next let's
set the text style
I'll use Impact font and set the large
font size and white color
then I will set the position to fix 20%
from top
and to center the text we will need to
set the width to 100 percent followed by
text-align:center
finally add a text shadow for aesthetic
our page is ready the next step is to
apply the mask
first we will wrap the text with the
masking div
then add the mask property with svg we created
set then mask size to cover
we also need to add webKit prefix to
make this works on Chrome
finally set the size to 100% of the
parent
now if your masks have a soft edge such
as cloud like this one then you will
need to use transparent PNG instead of
SVG
open the image in Photoshop and select
visible area you want using quick
selection tools then use brush and eraser
tool around the edge for detailing
once finished serve it as transparent
PNG
to use it just replace the SVG with PNG
mask and that's it
and that's all for this tutorial if you
want to see more dev tips and tutorials
don't forget to subscribe our channel to
stay tuned thanks for watching see you
next time bye
