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