Understand CSS Mask in 4 Minutes

[@cjmaaz]

Sometimes KZbin 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]

😂😂🤣

[@rudethunder6640]

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

[@mateuszabramek7015]

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

[@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.

[@chukwudiedupractical2173]

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

[@NavyCuda]

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.

[@manelariapala8182]

Hi can this be scalable for a responsive background?

[@whateverlulz9215]

can you just make it with z-index?

[@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!

[@guillermomazzari4983]

how do I do this if I dont have photoshop?

[@bubbagee4853]

So amazing yet so simple as well

[@stevePurvis1]

Thank you, You make really great tutorials.

[@dvirhanum9530]

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

[@AdrianTschubarov]

Why you just dont use z-index?

[@scooble]

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

[@boppitybip236]

png mask

[@stevedossin4926]

Real nice and simple tutorial. Thanks !!

[@lemasch01]

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

[@gaganmanjunath5917]

I’m getting a CORS policy error in chrome

[@teoiu7821]

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

[@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 :)

[@akashfunde]

Which code editor are you using ?

[@RedStapler_channel]

visual studio code

[@albertmontagutcasero2129]

min 3:00 start the mask

[@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 @@

[@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...

[@LinOGGaming]

Wow amazing video!

[@alfchlopecki7673]

Great job.

[@pashka3k]

Amazing! Like your tutorials

[@RockstahRolln]

Really amazing!!

[@suryadisamudra8097]

Simply Tutorial.. great

[@jerryjeremy4038]

As always, genuis

[@mariolopes6262]

Muito legal!

[@theMadZakuPilot]

Awesome

[@99danwil]

go bang iwan go bang iwan

[@noorm8380]

It is a white stapler on a red background 😂

[@noorm8380]

Or rather "The Missing Red Stapler"

Genio!!

[@TheAngerman77]

Dope

[@msvmanikantasrivishnu7788]

Super

[@anfas184]

fantaste !!!

[@h.nazmulhassanrakib5058]

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

[@furbi963]

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

[@kaychen4996]

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

[@jamesthedude6927]

until chrome doesn't want to work xD

[@jamesthedude6927]

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

[@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 :)

[@fahd4007]

this is not mask its overlapping

[@ayushkarir5377]

You could have it positioned absolute

[@dream_boy_]

1 st viewer

[@DevMoSofi]

Awesome