Understand CSS Mask in 4 Minutes


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

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *