Understand CSS Mask in 4 Minutes

How to use CSS Mask property and example demo to create a parallax text scrolling effect with svg and transparent png mask image.
Source code: redstapler.co/understand-css-...
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#CSS #Mask #WebDesign

[@cjmaaz]

Sometimes RUclips recommendations make me happy. I got to know about an amazing channel today.

[@elhamuddin.mahmoodi]

It’s a white stapler by the way

[@snowman_web_design_development]

😂😂🤣

[@creative216]

Amazing job! So so helpful! I enjoy the work you’re doing and your tutorials are great and allow the viewers to build on top of them!

[@bubbagee4853]

So amazing yet so simple as well

[@stevedossin4926]

Real nice and simple tutorial. Thanks !!

[@stevePurvis1]

Thank you, You make really great tutorials.

[@chukwudiedupractical2173]

I just like your voice...it's just calming 😌

[@RockstahRolln]

Really amazing!!

[@LinOGGaming]

Wow amazing video!

[@NavySturmGewehr]

Do you have anything on a number of elements sharing the same background image so that they're all aligned to the same position? I have a nav bar in a header, the header has a background image, the nav bar has a background color and is on top of the header. When I hover on a link, I want the link to show the background from the header, in the correct orientation.

[@alfchlopecki7673]

Great job.

[@suryadisamudra8097]

Simply Tutorial.. great

[@manelariapala8182]

Hi can this be scalable for a responsive background?

[@pashka3k]

Amazing! Like your tutorials

[@jerryjeremy4038]

As always, genuis

[@mariolopes6262]

Muito legal!

[@lemasch01]

Really cool! Thank you very much! Is it also like this in Firefox? Or how do I make this for Firefox?

Genio!!

[@theMadZakuPilot]

Awesome

[@TheAngerman77]

Dope

[@dvirhanum9530]

Why to use svg in the first place? What are the advantages?

[@msvmanikantasrivishnu7788]

Super

[@rudethunder6640]

I think it's all about "z-index" css property

[@mateuszabramek7015]

@Mr X it could be and browser support would be better.

[@furbi963]

Tus tutoriales siempre tan buenos, saludos (. ❛ ᴗ ❛.)

[@anfas184]

fantaste !!!

[@guillermomazzari4983]

how do I do this if I dont have photoshop?

[@scooble]

How do you make a graduated mask which fades the opacity either from opaque to transparent or vice versa?

[@boppitybip236]

png mask

[@whateverlulz9215]

can you just make it with z-index?

[@destino1930]

it doesnt seem to work for me. i did just as you showed in the video but the mask just covers up the headline and i dont know how to fix it...

[@serjmarkelov9915]

Check z-index property
And if you set it already, then check that element - it's suppose to have position:relative/fixed/absolute

[@antjestiller9846]

@@serjmarkelov9915 I have the same Problem. I tried playing with the z-index...still...I cannot fix it. Any suggestion?

[@serjmarkelov9915]

@@antjestiller9846 what is "position" property of the element that you're trying to z-index?

[@brettwainscott1165]

Same Problem here. Has anyone found a solution?

[@antjestiller9846]

@Red Stapler any chance you can help out with this. I have not figured it out yet.

[@akashfunde]

Which code editor are you using ?

[@RedStapler_channel]

visual studio code

[@AdrianTschubarov]

Why you just dont use z-index?

[@gaganmanjunath5917]

I’m getting a CORS policy error in chrome

[@teoiu7821]

the mask ends up covering the headline , anyone know how to fix it ?

[@Dan-li9qw]

go bang iwan go bang iwan

[@Alex-hm3uk]

Why need mask? Png + Z-index

[@RedStapler_channel]

Good question. The advantage of CSS mask is:
1) Both methods need to load 2 images. But mask image size is much smaller (significantly if it's svg)
2) Mask actually "clip" html element to any shape while z-index method just position itself on top. This means you can't select or interact with the element underneath it.
3) z-index method will mostly need to rely on absolute position which might be difficult for some page structure
However, the huge disadvantage is browser support as mask doesn't work on IE :)

[@ionescumihail41]

Man , you know what would be cool to create ?
A video tutorial that when you explain when you hover the mouse over a building it goes up if you know what i mean , subscribe and liked your videos , good work i see you have lot of experience !!

[@skyleradd1485]

Ionescu Mihail I would love that

[@DiegoAlencar8]

If i understood it right, it would be better to create a photo montage mixing several building photos and several layers of sea of clouds, maybe done with custom photoshop brushes, and then export each one separated as png transparent.
Then, it would be necessary to set the position of each one inside the html, setting the z-index correctly and animating it with a class to change the position of it when hover (using transition property). With javascript, would be necessary to set a mouse over event for every building which would toggle the class that animates the building position.
Maybe it's not the best approach cause of the total weight of images it would create. Maybe using the canvas tag and load images inside with ajax requests... don't know, It's something to think about...

[@elliemay1748]

The same thing can be made without mask, what is this useful for?

[@RedStapler_channel]

scalability, faster loading time, svg path can also be animated/modify with javascript for dynamic mask.

simply, it's 2 layers of imgs that stay from below and above of the text @@

[@playstore-so2xm]

Great fan of your art and tips&tricks.
However, I have a wish. Sir, Could you please make a tutorial playlist on Wordpress for making an E-commerce website and deploying it or making a basic photoshop tutorial? Please fulfill my wish. I am your regular viewer and subscriber.

[@RedStapler_channel]

building an ecommerce website is not a mere simple tutorial. this involve all levels of dev stacks. Despite worked on some projects myself, I have to admit I'm not confident enough to create a tutorial. It will do more harm than good :)

[@albertmontagutcasero2129]

min 3:00 start the mask

[@dream_boy_]

1 st viewer

[@noorm8380]

It is a white stapler on a red background 😂

[@noorm8380]

Or rather "The Missing Red Stapler"

[@kaychen4996]

I thik maybe this tutorial is too simple for most subscribers :D

[@jamesthedude6927]

until chrome doesn't want to work xD

[@h.nazmulhassanrakib5058]

didn't understand anything. you are doing quickly and didn't explain what the result after applied mask.

[@ayushkarir5377]

You could have it positioned absolute

[@fahd4007]

this is not mask
its overlapping

[@jamesthedude6927]

and OFCOURSE chrome just won't work with it, F you Google xD

[@DevMoSofi]

Awesome