Sometimes KZitem recommendations make me happy. I got to know about an amazing channel today.
@elhamuddin.mahmoodi
4 жыл бұрын
It’s a white stapler by the way
@snowman_web_design_development
4 жыл бұрын
😂😂🤣
@creative216
4 жыл бұрын
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!
@rudethunder6640
4 жыл бұрын
I think it's all about "z-index" css property
@mateuszabramek7015
4 жыл бұрын
@Mr X it could be and browser support would be better.
@chukwudiedupractical2173
3 жыл бұрын
I just like your voice...it's just calming 😌
@destino1930
4 жыл бұрын
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
3 жыл бұрын
Check z-index property And if you set it already, then check that element - it's suppose to have position:relative/fixed/absolute
@antjestiller9846
3 жыл бұрын
@@serjmarkelov9915 I have the same Problem. I tried playing with the z-index...still...I cannot fix it. Any suggestion?
@serjmarkelov9915
3 жыл бұрын
@@antjestiller9846 what is "position" property of the element that you're trying to z-index?
@brettwainscott1165
3 жыл бұрын
Same Problem here. Has anyone found a solution?
@antjestiller9846
3 жыл бұрын
@Red Stapler any chance you can help out with this. I have not figured it out yet.
@stevePurvis1
4 жыл бұрын
Thank you, You make really great tutorials.
@NavySturmGewehr
2 жыл бұрын
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.
@bubbagee4853
4 жыл бұрын
So amazing yet so simple as well
@stevedossin4926
4 жыл бұрын
Real nice and simple tutorial. Thanks !!
@manelariapala8182
4 жыл бұрын
Hi can this be scalable for a responsive background?
@lemasch01
4 жыл бұрын
Really cool! Thank you very much! Is it also like this in Firefox? Or how do I make this for Firefox?
@dvirhanum9530
4 жыл бұрын
Why to use svg in the first place? What are the advantages?
@whateverlulz9215
Жыл бұрын
can you just make it with z-index?
@scooble
4 жыл бұрын
How do you make a graduated mask which fades the opacity either from opaque to transparent or vice versa?
@boppitybip236
3 жыл бұрын
png mask
@guillermomazzari4983
2 жыл бұрын
how do I do this if I dont have photoshop?
@AdrianTschubarov
Жыл бұрын
Why you just dont use z-index?
@LinOGGaming
4 жыл бұрын
Wow amazing video!
@jerryjeremy4038
4 жыл бұрын
As always, genuis
@teoiu7821
Жыл бұрын
the mask ends up covering the headline , anyone know how to fix it ?
@Alex-hm3uk
4 жыл бұрын
Why need mask? Png + Z-index
@RedStapler_channel
4 жыл бұрын
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
4 жыл бұрын
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
4 жыл бұрын
Ionescu Mihail I would love that
@DiegoAlencar8
4 жыл бұрын
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...
@pashka3k
4 жыл бұрын
Amazing! Like your tutorials
@elliemay1748
4 жыл бұрын
The same thing can be made without mask, what is this useful for?
@RedStapler_channel
4 жыл бұрын
scalability, faster loading time, svg path can also be animated/modify with javascript for dynamic mask.
@gaganmanjunath5917
3 жыл бұрын
I’m getting a CORS policy error in chrome
@RockstahRolln
4 жыл бұрын
Really amazing!!
@akashfunde
4 жыл бұрын
Which code editor are you using ?
@RedStapler_channel
4 жыл бұрын
visual studio code
@alfchlopecki7673
4 жыл бұрын
Great job.
@suryadisamudra8097
4 жыл бұрын
Simply Tutorial.. great
3 жыл бұрын
simply, it's 2 layers of imgs that stay from below and above of the text @@
4 жыл бұрын
Genio!!
@Dan-li9qw
3 жыл бұрын
go bang iwan go bang iwan
@anfas184
3 жыл бұрын
fantaste !!!
@DevMoSofi
4 жыл бұрын
Awesome
@mariolopes6262
4 жыл бұрын
Muito legal!
@TheAngerman77
4 жыл бұрын
Dope
@playstore-so2xm
4 жыл бұрын
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
4 жыл бұрын
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 :)
@furbi963
4 жыл бұрын
Tus tutoriales siempre tan buenos, saludos (. ❛ ᴗ ❛.)
@msvmanikantasrivishnu7788
4 жыл бұрын
Super
@noorm8380
4 жыл бұрын
It is a white stapler on a red background 😂
@noorm8380
4 жыл бұрын
Or rather "The Missing Red Stapler"
@albertmontagutcasero2129
4 жыл бұрын
min 3:00 start the mask
@kaychen4996
4 жыл бұрын
I thik maybe this tutorial is too simple for most subscribers :D
@jamesthedude6927
3 жыл бұрын
until chrome doesn't want to work xD
@h.nazmulhassanrakib5058
2 жыл бұрын
didn't understand anything. you are doing quickly and didn't explain what the result after applied mask.
@dream_boy_
4 жыл бұрын
1 st viewer
@jamesthedude6927
3 жыл бұрын
and OFCOURSE chrome just won't work with it, F you Google xD
Пікірлер: 68