It's amazing how you create videos of modern web design trends that are always to the point. Can you also make a video of how a shape can be changed using the :before and/or :after like a square which is shaped like a simple piece of a jigsaw puzzle(similar to the circle at bottom on 5:48 but at top left). I came across a page recently where the rectangular banner element had an inner circular indent and the circular company logo was placed on the circular area of the banner. I feel :before and :after are heavily slept on and should have more content about its capabilities.
The most in depth and valuable mask-image video I have seen so far. The only thing I would have added to the video as I think it's still relevant and supporting some older browser doesn't hurt. In a real case scenario, I'd add the vendor prefix (-webkit-mask-image). The creative ways radial or linear gradients offers us is fantastic. Fade out content with one line of CSS or mask image(s) inside a container. The ways are endless. Thanks for the golden nugget here. Have a nice day.
Thank you for the feedback and kind words! Right - adding a vendor prefix is a solid idea for older browser support. Comments like this mean a lot-thanks again.
@@OptimisticWeb You do very good, as usual. I just thought about the webkit vendor as some newer browser will understand "mask" without it but in general, even I would say it's almost safe to use it right now. For the near future, it will be safe to use, of course. 🙂
How can you create a tutorial on masking without even mentioning clipPaths? It's legit the best way to mask images and videos. Messing with gradients is for noobs.
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
As @PicSta suggested in the comments below, adding a vendor prefix can be a solution for maintaining older browser compatibility.
It's amazing how you create videos of modern web design trends that are always to the point.
Can you also make a video of how a shape can be changed using the :before and/or :after like a square which is shaped like a simple piece of a jigsaw puzzle(similar to the circle at bottom on 5:48 but at top left). I came across a page recently where the rectangular banner element had an inner circular indent and the circular company logo was placed on the circular area of the banner.
I feel :before and :after are heavily slept on and should have more content about its capabilities.
Thanks for the suggestion, I'll try to cover that in future.
The most in depth and valuable mask-image video I have seen so far. The only thing I would have added to the video as I think it's still relevant and supporting some older browser doesn't hurt. In a real case scenario, I'd add the vendor prefix (-webkit-mask-image). The creative ways radial or linear gradients offers us is fantastic. Fade out content with one line of CSS or mask image(s) inside a container. The ways are endless. Thanks for the golden nugget here. Have a nice day.
Thank you for the feedback and kind words! Right - adding a vendor prefix is a solid idea for older browser support. Comments like this mean a lot-thanks again.
@@OptimisticWeb You do very good, as usual. I just thought about the webkit vendor as some newer browser will understand "mask" without it but in general, even I would say it's almost safe to use it right now. For the near future, it will be safe to use, of course. 🙂
Totally agree 👍
Awesome, clear explanation
Appreciate you checking it out!
Need to rewatch slowly so I can copy the code to play with it. Thank you for an interesting video.
he has codepen link. please check it sir
The final code is now available at the link shared in the description. Thanks for watching!
A really nice video!
Thank you!
There is a one word I can tell to this video. Perfect.
Thank you!
It can be possible to apply mask to a video? 🤓
Yes, you can apply the mask to the parent element and have the video visible through the opaque pixels.
@ terrific 🤩
How can you create a tutorial on masking without even mentioning clipPaths? It's legit the best way to mask images and videos. Messing with gradients is for noobs.
I already have a detailed video on clip-path - Feel free to check this out - ruclips.net/video/N_IrzRpJ0s4/видео.html