mask-image lets you do some really cool stuff
HTML-код
- Опубликовано: 6 авг 2024
- Add some creativity to your designs with mask-image!
🔗 Links
✅ Browser support: caniuse.com/?search=mask-image
⌚ Timestamps
00:00 - Introduction
00:30 - Setting things up to fade out the image
00:58 - Fading it out
02:30 - Fixing the layout
03:15 - Improving the fade out
03:52 - Masking with shapes
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Trying a few things things with how I'm recording and it led to a few spots with some jumpy editing, so sorry about that! I'm working on things and once I get used to it and can record it in a smoother way it should be better :D
Full screen code and cut out output is pretty nice!
👌I would suggest to keep saying the sentence where you present yourself and you say "falling madly, deeply in love with CSS"... it's fantastic to listen this every video! 😉
...didn't notice...the colors distracted me ;)
Yeah, I'm sorry but we're gonna need the "Hello my friend and friends" back!
For the fading background image, I've always used a pseudo element with absolute positioning with a gradient on to get the same effect, but this way is so much easier.
So have I! And yeah, I'm doing this from now on too :)
Great job Kevin. Love that you gave a few options as well :)
Thanks so much, sir! I am so enlightened. Your videos are really helping my CSS and even SASS. Thanks again, sir!
I love that all your tutorials are deep and step by step , even a slow learner like me understand it quickly so you are the best 👌
It would be STUNNING if we could animate the masks from one to one using a transition or whatever
It's fiddly, but easy - use an inline svg with some javascript - do a setInterval, really think long and hard about the changes you wan to do and then plot out the final positions and bezier curves (you could probably open it up in photoshop or an svg editor and see the values), next do (starting poisition of your verticies - end position of your verticies) / total animation cycles, ad that value on to the starting value on each cycle, and then do a clearInterval() on the timer when you're done, unless you want to keep it goign forever - could animate a beating heart for example. Easy
@@danielbengtsson9833 YEAH EASY, but it would be a lot better if it could be possible in just css masks
I have an idea.
Scale one mask up, and the other mask down at the same time.
guys, kevin made a video on just that. and its css only. have fun
@@MrDammed1where is the video plz ?
I just wanted to say that I really appreciated the pacing of this video. Silver of your older videos went just a little bit fast for me (harder to follow as a non-expert), but I noticed you explained more in a very deliberate way (mentioning shortcut keys, explaining the thought process a little more, etc.). Anyways, this was perfect. Thank you.
Omg! This is a really great content and tutorial! First time of knowing about css masking! Thank you so much!
Never really thought of this as a possibility. Man I need to get better at design. This looks sick!!
OMG Mr Kevin Powell!! I am on old dog learning new tricks for a current project and YOU SIR are saving me so many hours of research. So far 3 of your videos have helped me out and I am sure I will be watching a bunch more. I will be a flexbox expert because of you.
very cool my godfather, css keeps getting better 👍
I love every single one of your videos. You're always bringing some fun and interesting content. I appreaciate it a lot! Greetings from Argentina :D
Always a pleasure Kevin!
I love looking into more options to solutions like this. However, in the beginning of the video, there is a remark regarding we want to avoid having to go to a graphics programme for a non-square image. The solution is then, an image, as a mask, which you also need to create in a gfx app. Basically the step you need to do anyway is moved towards the web (masking real time vs masking in application). Doing it in an app makes it easier to place the map (although we do like tinkering with values in CSS :P). I also don't think you'd re-use either the mask or the masked image in more than one project (assuming the client wants a tailored design). Therefore, the main use case for this I can see is (part of) a logo or brand style element that is repeated onto different images on the site. Which other use cases are there?
Awesome! Valuable info indeed
really cool video, thanks kev
i love this channel so much!!!
Morph effect on this would be amazing to see.. 😊
Thanks again 👏
sometimes i feels like u post video to solve problems that I am having right at this very moment I swear
Awesome video!
This tutorial is helpful ❤
I still will fall madly deeply in love with CSS :)
nice Kevin !
Fantastic !!!
Thank you for your amazing CSS content it really helps a lot to get some great ideas and how to's around CSS!
Do you have any recommendations of a site like pexels but for CC-SVGs to use as masks?
I've used mask-image for a carousel type component, using this as the mask image:
linear gradient to right
0% transparent
1em black
calc(100% - 1rem) black
100% transparent
and then I gave the element in the carousel a horizontal padding of 1 rem
Super simple way to make the carousel look a bit fancier
Gotta love ya Kevin
So i dont know how youtube algorithm works, but just 3 hours ago i was thinking about how can i make strange custom shape images with clip path, and this video from kevin shows up on my feed like it's destiny. Oh god.. ❤
Awesome effect, but I feel like even if I know the css to do it, I lack the creative skills to come up with it in the first place :) impressive stuff
great! thank you very much.
Great videos 👍👍👍👍
May the force be with you.
Why i have not start to learn HTML/CSS and JS 20 Years ago? I am Always staggered to see what a Master can do with CSS. I love your Videos!
We couldn't do anything close to this 20 years ago, so don't feel like you missed out. It was terrible not very long ago 😅
Thanks Kevin, for the tutorial, please any suggestion on a public svg domain ?
At 4:10 you say about using SVGs that 'have no copyright on them'. Be aware that in many (most?) countries documents and images are copyrighted by default, so you'll need to have an explicit license to use them: lack of a license does _not_ mean they're in the public domain or free to use. Fortunately there are a lot of SVG files under Creative Commons and similar licenses, but it's something to bear in mind, particularly in a commercial setting.
Kevin, you are like my father hahaha, bro really you are a beast, I had no notions of design but thanks to you now I can make decent webs. Never forget Kevin, you are a CSS god
Another really interesting tutorial, thanks Kevin. Do you keep a repository of all of these tutorials? I like to code along with many of your video as it helps me understand and take it in better. This one had some code prebuilt so it's harder to keep up.
LOL, this is big tech in a nutshell. I left my current project to make dinner, knowing i would have to find a solution for exactly this when I got back. Talk about being served a solution on a silver platter in the meantime 😅
Super insightful video! I've been looking to improve my understanding of masks. By the way, what keyboard do you use? Sounds a lot like a Leopold!
I think you could do a more extensive or general video on everything that has to do with mask, here you're going only into mask image, but there are quite a few more things to mask and what you can do with it I think, the mask shorthand and all its related properties, I would love to know more, also about what's supported well and what not so much yet, I have a feeling knowing mask well would help a lot, as I was trying to do some things with it today, but basically know little to nothing about it. Especially I wonder if mask can be used for something like an erase effect you'd have in graphics appications for example, or maybe there exists a better method to erasing. I think I saw something on Temani Afif's sources to have a gradient border without a background, would have to check again, so I wonder if that was with mask or if he used a different method and of course if you can achieve something like that with mask.
Woah, did not know this existed
I would be interested in knowing whether an SVG object/shape could be invoke as the mask source (ideally from within the same document, rather than importing an .SVG file). Either way, being able to automate said mask opens up lots of fun stylistic considerations.
I wonder if we could add some animations to the mask to transition from one shape to another
Wow. I used clipPath + SVG to make the same effect, but this mask-image() is truly better. Waiting for browser support :)
For example one, another way to achieve that effect for the background img + gradient is to use the below syntax:
background: linear-gradient(color1, color2), url(path/to/img) center / cover no-repeat
I understand this video is to show how to use mask image but just wanted to share haha
Hi Kevin,
Thank you very much for the so helpful videos you make and you truly make CSS life easier!
Is it possible if you could send a codepen link for the video's code snippet?
4:30 where can i get those svgs? Pls and Thx u
HAHA too funny: "and you guys really do care about browser support" LOL! Thank you this is great and that made me laugh!
Can you invert it ? Like the Apple+I shortcut in PS.
How do I show an image parsed through javascript in this mask?
love this trick? what's the font You use? :)
It's no longer imposter syndrome; I get depressed everytime I watch your videos...😭😂 I am new into this dev space and I would appreciate a tip on where to find these kinds of css updates...😩
This ones actually been around for awhile, but you never hear much about it for some reason.
Part of it I'll be talking about in an upcoming video actually, showing how I learn new things. A lot of the time it's seeing someone use something in code I've never seen before and looking at how they did it, or when I'm researching a topic, I find a link to something I've never heard of before and follow a link or two.
as the days go by, the more I am convinced that web browsers are close to emulating photoshop natively on the web
Where to get SVG?
Is there any way to just... delete a colour from an image with CSS? I'm in a position where I'm forced to use images with a green background colour and I can't really filter the colour out (or I dont know how to)
No, not that I can think of anyway
@@KevinPowell :( Well, thank you for answering
I'll wait for the browser support before using things like this. I prefer Firefox myself, but I test in Chrome and Chromium.
Does mask image accept other image things aside from just gradients? Could we put an actual image file there? Would an animated gif work as a mask then? :P (At that point it would be easier to just have an actual gif image instead of doing all this with mask, but it is a fun thought)
you need to make actual online courses! I would love to fully learn from you! :)
I have a few already! kevinpowell.co/courses 🙂
Hope you can use png as an image mask in certain scenarios.
I‘ve had an eureka moment today in a need of a sub grid solution that also works in Chrome, and I found an easy pseudo subgrid hack.
.parent {display: grid; grid-template-columns: repeat(4, 1fr);}
.child {display: contents;}
Now all direct children of the .child class can be affected by the grid, like so:
.child > .double {grid-column: span 2;}
Maybe interesting for a video idea. 🤗
I do love modern CSS. So many hidden possibilities and potentials if you just dig deep enough into it. ☺️
I believe it would have been a better idea to switch to a browser that has full support for this feature, since this is mainly for demonstration. You could then simply mention that for chromium you need the prefix and which features are not supported yet.
How about animating the mask to reveal the image?
anyone have any free svg website where I can get such images
I love the tutorial but since my clients decide to use archaic browsers, I can’t use them
WAIT! Aren't you going to help me fall madly, deeply in love with CSS? If not be a little bit less frustrated by it? 🤣😂🤣😂
Woow❤🎉🎉
After this video, I will have a challenge against a graphics designer....
That class of "hero-image" should be an ID instead when there's only one. An ID Is for specifying that an element is truly unique. Classes are for class-ifying multiple elements. People get this confused and think that an ID is a class that is too restrictive, but that's an incorrect way of looking at it. Very good work nonetheless. Thank you!
Hi Kevin!
👋
Just out of curiosity...why? I mean, you could just do an img over a div with a background image, nest divs with background images, do a table with one background, a tr with another and td wih yet another, etc, etc.
And yes, I'm a little bit shocked that you're surprised to find out we care about browser support. I mean, that's way more important than the other things you usually mention like assistive tech or SEO. Or at least it is for me, what's the point of a website if only a portion of the visitors can use it properly?
That used to be a tell tale sign of a poor webdesigner from like 20 years ago when web developers thought they could force everyone to use firefox. Quite surprised to see it still around today.
He didn't say he was surprised we care about browser support - he just mentioned we do care based on the comments.
thank you so much
wth is that thumbnail Kevin!? 🤣
just simple amazing and beautiful.
Love and Respect from Afghanistna.
We need your prayers to get rid of barbarian talibans.
omg youtube really should stop recommending me these vids.
Personally I hate browser support, it's one of the most frustrating things and even though it has improved vastly over the years it is still a huge pai.
Definitely nice content. But please don't forget about my guild wars 2 suggestion(Insta DM) :) I believe it will be better than the Stripe home page challenge.