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.
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 :)
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 !!
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...
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.
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 :)
Sometimes TH-cam recommendations make me happy. I got to know about an amazing channel today.
It’s a white stapler by the way
😂😂🤣
I think it's all about "z-index" css property
@Mr X it could be and browser support would be better.
I just like your voice...it's just calming 😌
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...
Check z-index property
And if you set it already, then check that element - it's suppose to have position:relative/fixed/absolute
@@serjmarkelov9915 I have the same Problem. I tried playing with the z-index...still...I cannot fix it. Any suggestion?
@@antjestiller9846 what is "position" property of the element that you're trying to z-index?
Same Problem here. Has anyone found a solution?
@Red Stapler any chance you can help out with this. I have not figured it out yet.
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!
can you just make it with z-index?
how do I do this if I dont have photoshop?
So amazing yet so simple as well
Thank you, You make really great tutorials.
Why to use svg in the first place? What are the advantages?
Hi can this be scalable for a responsive background?
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.
Why need mask? Png + Z-index
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 :)
Why you just dont use z-index?
How do you make a graduated mask which fades the opacity either from opaque to transparent or vice versa?
png mask
Real nice and simple tutorial. Thanks !!
the mask ends up covering the headline , anyone know how to fix it ?
Really cool! Thank you very much! Is it also like this in Firefox? Or how do I make this for Firefox?
I’m getting a CORS policy error in chrome
simply, it's 2 layers of imgs that stay from below and above of the text @@
The same thing can be made without mask, what is this useful for?
scalability, faster loading time, svg path can also be animated/modify with javascript for dynamic mask.
min 3:00 start the mask
Amazing! Like your tutorials
Which code editor are you using ?
visual studio code
Wow amazing video!
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 !!
Ionescu Mihail I would love that
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...
Really amazing!!
Great job.
As always, genuis
Simply Tutorial.. great
It is a white stapler on a red background 😂
Or rather "The Missing Red Stapler"
go bang iwan go bang iwan
I thik maybe this tutorial is too simple for most subscribers :D
until chrome doesn't want to work xD
Awesome
fantaste !!!
Muito legal!
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.
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 :)
Dope
Super
Genio!!
didn't understand anything. you are doing quickly and didn't explain what the result after applied mask.
Tus tutoriales siempre tan buenos, saludos (. ❛ ᴗ ❛.)
and OFCOURSE chrome just won't work with it, F you Google xD
1 st viewer
this is not mask
its overlapping
You could have it positioned absolute
Awesome