mask-image lets you do some really cool stuff

Подписаться 907 тыс.

Просмотров 89 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

17 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 94

@KevinPowell Год назад

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

@mimoduocss Год назад

Full screen code and cut out output is pretty nice!

@giorgiobellisario Год назад

👌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! 😉

@anettebianca6855 Год назад

...didn't notice...the colors distracted me ;)

@janorajmond Год назад

Yeah, I'm sorry but we're gonna need the "Hello my friend and friends" back!

@KD-tp6er Год назад

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.

@KevinPowell Год назад

So have I! And yeah, I'm doing this from now on too :)

@ShawnRitch Год назад

Great job Kevin. Love that you gave a few options as well :)

@zanzaboonda 7 месяцев назад

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.

@developer_hadi Год назад

It would be STUNNING if we could animate the masks from one to one using a transition or whatever

@danielbengtsson9833 Год назад

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

@developer_hadi Год назад

@@danielbengtsson9833 YEAH EASY, but it would be a lot better if it could be possible in just css masks

@shaynejr Год назад

I have an idea. Scale one mask up, and the other mask down at the same time.

@MrDammed1 Год назад

guys, kevin made a video on just that. and its css only. have fun

@abdelazizlaissaoui9079 7 месяцев назад

@@MrDammed1where is the video plz ?

@techmarkpk Год назад

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 👌

@emmanuelameyaw5686 Год назад

Thanks so much, sir! I am so enlightened. Your videos are really helping my CSS and even SASS. Thanks again, sir!

@Trekiros Год назад

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

@user-kn4oi9oh4i 4 месяца назад

Omg! This is a really great content and tutorial! First time of knowing about css masking! Thank you so much!

@DuneNobleman Год назад

Always a pleasure Kevin!

@sambaraka5228 Год назад

Never really thought of this as a possibility. Man I need to get better at design. This looks sick!!

@photomat Год назад

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?

@ZenGheist Год назад

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?

@Anderson-iy1ji Год назад

very cool my godfather, css keeps getting better 👍

@JulianColeman03 Год назад

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!

@bradleyandrews2444 Год назад

sometimes i feels like u post video to solve problems that I am having right at this very moment I swear

@fscaramuzza Год назад

I still will fall madly deeply in love with CSS :)

@keviincosmos Год назад

Morph effect on this would be amazing to see.. 😊 Thanks again 👏

@bySterling Год назад

Awesome! Valuable info indeed

@lucaturgueniev Год назад

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

@pibbz13 Год назад

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 😅

@PeppertopComics Год назад

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.

@michaelm8044 Год назад

really cool video, thanks kev

@Zashxq Год назад

i love this channel so much!!!

@AlexStefan-vs2dj Год назад

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.. ❤

@peteharrison3241 2 месяца назад

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.

@not_amanullah 2 месяца назад

This tutorial is helpful ❤

@okawashingo2079 Год назад

May the force be with you.

@olatunjiolakunle6908 Год назад

Thanks Kevin, for the tutorial, please any suggestion on a public svg domain ?

@nv3796 Год назад

Fantastic !!!

@junsu-ho Год назад

nice Kevin !

@Vancha112 Год назад

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

@Allformyequine Год назад

HAHA too funny: "and you guys really do care about browser support" LOL! Thank you this is great and that made me laugh!

@britsluver Год назад

Gotta love ya Kevin

@nro337 Год назад

Awesome video!

@theman7050 Год назад

great! thank you very much.

@VideoNOLA 10 месяцев назад

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.

@CoolConceptCars Год назад

Woah, did not know this existed

@treshi Месяц назад

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.

@elivanrock9892 Год назад

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?

@Kasetwo755 Год назад

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

@estephebouvet2147 Год назад

I wonder if we could add some animations to the mask to transition from one shape to another

@paterfamilias01 Год назад

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

@VasilyPavlik Год назад

Wow. I used clipPath + SVG to make the same effect, but this mask-image() is truly better. Waiting for browser support :)

@martaoskot8866 3 месяца назад

love this trick? what's the font You use? :)

@zer001 Год назад

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!

@KevinPowell Год назад

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 😅

@daleryanaldover6545 Год назад

as the days go by, the more I am convinced that web browsers are close to emulating photoshop natively on the web

@mhcbon4606 Год назад

Can you invert it ? Like the Apple+I shortcut in PS.

Год назад

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)

@blac-whit Год назад

4:30 where can i get those svgs? Pls and Thx u

@Talha_10 2 месяца назад

Great videos 👍👍👍👍

@Trazynn Год назад

How do I show an image parsed through javascript in this mask?

@Avsword Год назад

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)

@KevinPowell Год назад

No, not that I can think of anyway

@Avsword Год назад

@@KevinPowell :( Well, thank you for answering

@javabeanz8549 Год назад

I'll wait for the browser support before using things like this. I prefer Firefox myself, but I test in Chrome and Chromium.

@shadowsketch5107 Год назад

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...😩

@KevinPowell Год назад

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.

@Grainus Год назад

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.

@gregoriusmike Год назад

Hope you can use png as an image mask in certain scenarios.

@CMZIEBARTH Год назад

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!

@LokiDaFerret Год назад

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? 🤣😂🤣😂

@PascalHorn Год назад

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. ☺️

@kevinwaag9976 Год назад

you need to make actual online courses! I would love to fully learn from you! :)

@KevinPowell Год назад

I have a few already! kevinpowell.co/courses 🙂

@adeisaac Год назад

After this video, I will have a challenge against a graphics designer....

@Vietnamkid1993 Год назад

I love the tutorial but since my clients decide to use archaic browsers, I can’t use them

@dylanheslop9161 8 месяцев назад

anyone have any free svg website where I can get such images

@troll_ac 17 дней назад

Where to get SVG?

@rfryanfavour4369 Год назад

Woow❤🎉🎉

@danielbengtsson9833 Год назад

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.

@ruhamayared3829 Год назад

He didn't say he was surprised we care about browser support - he just mentioned we do care based on the comments.

@dreadedassassin44 Год назад

Hi Kevin!

@KevinPowell Год назад

👋

@zn3rgy1000 Год назад

wth is that thumbnail Kevin!? 🤣

@anasouardini Год назад

omg youtube really should stop recommending me these vids.

@shahfaisal3923 Год назад

just simple amazing and beautiful. Love and Respect from Afghanistna. We need your prayers to get rid of barbarian talibans.

@rproctor83 Год назад

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.

@Q_20 Год назад

thank you so much

@yasincabuk7330 Год назад

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.