I've been playing around with masking as well and I found out that you don't have to upload any svg image when you use the webkit-mask-image property in CSS and convert the svg into a Data URI with a SVG to CSS convertor. You can place this converted SVG code directly into CSS and you don't have to upload any image, great for cutting down on the server requests. You can do really cool stuff with masking when you start animating them. 😉 You can even build custom shape dividers with masks. Really worth to explore.
Would you mind making a video about a header that changes its colour on scroll? I basically want it to be transparent and only give it a background colour when scrolling. I've seen that exact effect like a million times with an image that's underneath the header but I can't reproduce it 100% bug-free. When using the background colour and transparency scrolling effect it works but it that has the disadvantage of the background colour being loaded when visiting the first time. It literally flickers. That's the video from Elementor about it with the bug I described: ruclips.net/video/PJp87rmeLcI/видео.html
![Ice On My Teeth - ATEEZ エイティーズ 에이티즈 [Music Bank] | KBS WORLD TV 241115](http://i.ytimg.com/vi/c-n92OgbbwA/mqdefault.jpg)
I've been playing around with masking as well and I found out that you don't have to upload any svg image when you use the webkit-mask-image property in CSS and convert the svg into a Data URI with a SVG to CSS convertor. You can place this converted SVG code directly into CSS and you don't have to upload any image, great for cutting down on the server requests.
You can do really cool stuff with masking when you start animating them. 😉 You can even build custom shape dividers with masks.
Really worth to explore.
This is genius. Although i knew this and have explored this area this is actually so fun to do.
Oh yeah, I completely forgot that you can actually do that too!! More brains are better than one 😁 thanks for this, Frank!
How do I do this?
@@campusconnecttv170
Do what?
Looking supper modern, thanks for the tutorial!
Thank you, John!😉
Fantastic tutorial Andrea!
Thank you so much, Mauro!
Excellent content!
Glad you enjoyed it
Oke this is legit very cool! Got a new sub!
Great work
Thank you so much 😀
great tutorial thank you very much! is it possible to combine that with a parralax straight from elementor?
I haven't tried that but I think so.
Thanks, great idea :)
You are very welcome!
Thanks this was really helpful!
Glad it was helpful!
Thanks for this good tutorial. Is it possible to use mask in Elementor for videos?
You're welcome! Yes you can!
Good job! 👌😊❤👍👍👍👏👏👏
Thank you! 😃
oh i didnt know that the image widget has the custom shape mask.. nice!
Hehe, now you know 😁
this tutorial is great 🔥how do you get this dark theme style ?
thank you myke! Go to Dashboard > Elementor > Settings > Features, scroll to Editor Top Bar and set it to active, save changes and Voila!😉
Good mam ❤
Thanks a lot
❤
Would you mind making a video about a header that changes its colour on scroll? I basically want it to be transparent and only give it a background colour when scrolling. I've seen that exact effect like a million times with an image that's underneath the header but I can't reproduce it 100% bug-free. When using the background colour and transparency scrolling effect it works but it that has the disadvantage of the background colour being loaded when visiting the first time. It literally flickers. That's the video from Elementor about it with the bug I described: ruclips.net/video/PJp87rmeLcI/видео.html
You are absolutely crushing it theres a lot i want to ask and I would love to connect to you on instagram. Please share
I can't share links here but you can find it on my about section here. Also, thanks!!!!! 😁