I know you could have made this so much more concise as a tutorial but watching you work through the process of solving this problem was SO valuable for me. Thank you!
Tbh, i prefer watching someone get stuck and see how to unstuck is much better than just a tutorial with a scenario, also seeing the real process for someone todo something
This is pure gold! I recent worked on a gradient border and I also had the idea of using mask-image and border image, woulda turn out the same with yours except I didn't even know bout the CSS registering property hahahaha...glad I learnt something! Thanks Kevin.
I'm mostly a native mobile dev but still watch your content time to time, I get a lot of inspiration from this type of videos and with somewhat similar approach we can implement same effect of native canvases.
Interesting video. I just want to point out a few things: - When overlapping mask images, a pretty useful property is mask-composite, which lets you decide how the mask images interact. (If you want to use it, remember to also use the relative -webkit property) - Use a modern color space like "oklch" in -gradient(in oklch, blue, red). colors will look much better than before 🤩. Gradients in srgb can be a little unsaturated. Still a great video ❤.
Kevin: figures it out the right approach in 20 minutes and calls it a struggle. Me: struggle for 2 hours to style and position a simple modal and calls it a win. I wish my struggles were more like yours 😂. Really cool video!
I was screaming "just use blur!! blur!!" inside my head the whole time 😭 Amazing job, though!! I always love seeing multiple ways to get to the same result!
Remark : filter: blur() does not combine with mask-image apparently, however backdrop-filter: blur() does, which is very nice, the opacity of the mask-image controls the intensity of the blur
Forgot about masks, remembered the border-image but never quite remember how that works. Tried to replicate it before the video, basically did the same thing with pseudo element and just rotating that element instead of creating a property. Thought you'd need an after with transparent borders or something to lay on top of the before. Or filters/mix-blend-modes. Pretty elegant solution just with the border-image! Though stacking the linear-gradients was also pretty neat.
For anyone who missed it, the reason you need to use "transparent" instead of "white" is because luminance masks are only supported within SVGs and otherwise you need to use an alpha mask. It's not explicitly spelled out in a lot of places and I keep running face first into that bug on a semi regular basis.
Man, CSS has changed a lot. Not that long ago I remember fighting with the language to implement things like rounded corners - oh and remember sliding doors for buttons? Not to mention techniques to make things work across browsers.
"I never think of using border image for anything" - nobody* thinks of using border-image, mostly because it has a syntax taken from the Necronomicon. * As a footnote, though: Temani Afif thinks about it, and has written at least one article about how it can be used, and exploited. I read that article, and then my brain melted at the eldritch horror.
I am glad I am not the only who makes a silly mistake like misplacing a comma and immediately conclude that I don't have the knowledge required to solve a problem. Imposter syndrome is hell of a demon.
Great video and just shows you the various way to get things done. BTW: bit slow but only just found out your Canadian..... like you even more now 😂😂😂😂
Aaaah. Remove the ending comma of the mask-image at 17:52 ... then it will work AAAAH XD My inner Monk be like: "Seriousely. You had it already right, and just throw it away as you JUST HAD TO REMOVE THE LAST COMMA XD XD XDXD WOAAAAAAH" I'm crying
My initial thought was to begin with how I normally do gradient borders with a radius (both outer and inner): div { --border-width: 10px; aspect-ratio: 1; height: 200px; position: relative; border: var(--border-width) solid transparent; border-radius: 20px; &::before { content: ""; position: absolute; inset: calc(-1 * var(--border-width)); border: inherit; border-radius: inherit; background-image: conic-gradient(in oklch longer hue, red, red); mask: conic-gradient(#000 0 0) padding-box exclude, conic-gradient(#000 0 0); pointer-events: none; } } The pseudo has two fully opaque mask images, one covering the entire border-box (which is default), and the other only the padding-box. We also set `exclude` as value for `mask-composite`, which removes the area where the masks overlap. Not sure if I would think of using a blur filter though. That was very clever.
I needed this same kind of cutout effect and tried clipmasks and all kinds of sandboxes until j found the “exclude” keyword.it was a joyous day 🎉Then I saw the browser support 😔 haven’t watched the whole video yet,curious on the approach if not exclude
@@clevermissfox The prefixed version of `mask` has > 99% browser support as long you use the longhand properties. What you‘re looking for is `-webkit-mask-composite: xor`. -webkit-mask-image: conic-gradient(#000 0 0), conic-gradient(#000 0 0); -webkit-mask-clip: padding-box, border-box; -webkit-mask-origin: padding-box, border-box; -webkit-mask-composite: xor; mask: conic-gradient(#000 0 0) padding-box exclude, conic-gradient(#000 0 0);
@nilaallj so just to clarify, browser support is fine foe production if you either: a. Use the longhand "mask" property with exclude or b. Use shorthand and prefixed "-webkit-mask-composite" with a value of "xor"? (Have never seen such a combination of characters, how do you even pronounce that??? Is it "zore" like zoro sans the last "o" ? Rhymes with "soar"or "bore"?) Am I understanding that correctly?
Or no it's not an either or: you need all the shorthand properties with the prefixes and then the longhand mask property with exclude like your example. It's not either a or b, you need both?
@@clevermissfox For supported browsers the `mask` shorthand will be prioritized over the prefixed properties as long it is declared last. This is no different from normal cascading rules. E.g. if you declare the same property twice on the same element, the last declaration wins. This is a common progressive enhancement practice. Unsupported declarations get ignored by the browser, but it does not prevent it from falling back to preceding declarations. So `mask` will get ignored by browsers that does not support it, and by so it will fall back to the prefixed properties.
3:39 "Shaun, I'm recording a video, I'm not doing a livestream..." - soo adorable! 😂
Trying to build his RUclipsr fame 😂
For the trailing comma problem you faced, I was shoutting at you: "It's the trailing comma, Kevin delete the trailing comma" 🤣
I edited out over 5 minutes of me not realizing it, lol
Yeah, it was really infuriating. My GF was looking at me for talking to the screen
@@KevinPowell THE css learning curve 😉
One of those mistakes that's easy to do and not see when you're coding, but then easy for others to see. 😂
Thank god I wasn't alone 😂
I know you could have made this so much more concise as a tutorial but watching you work through the process of solving this problem was SO valuable for me. Thank you!
Watching you resolve issues is really motivating as a beginner
Tbh, i prefer watching someone get stuck and see how to unstuck is much better than just a tutorial with a scenario, also seeing the real process for someone todo something
FYI mask-mode:luminance; would allow you to use black and white. Alpha is the default because it renders a little faster.
Woah very nice, thanks !
I watch for a few minutes and scream at you, comma at the end, comma at the end and I was so happy when you noticed :D
This is pure gold! I recent worked on a gradient border and I also had the idea of using mask-image and border image, woulda turn out the same with yours except I didn't even know bout the CSS registering property hahahaha...glad I learnt something! Thanks Kevin.
I was never going to get all the way there, but I did know you could build directly on the border. I'll take that as a win!
I'm mostly a native mobile dev but still watch your content time to time, I get a lot of inspiration from this type of videos and with somewhat similar approach we can implement same effect of native canvases.
Soooo sweet that scene with your son 😊
Interesting video. I just want to point out a few things:
- When overlapping mask images, a pretty useful property is mask-composite, which lets you decide how the mask images interact. (If you want to use it, remember to also use the relative -webkit property)
- Use a modern color space like "oklch" in -gradient(in oklch, blue, red). colors will look much better than before 🤩. Gradients in srgb can be a little unsaturated.
Still a great video ❤.
Kevin: figures it out the right approach in 20 minutes and calls it a struggle.
Me: struggle for 2 hours to style and position a simple modal and calls it a win.
I wish my struggles were more like yours 😂. Really cool video!
I was screaming "just use blur!! blur!!" inside my head the whole time 😭
Amazing job, though!! I always love seeing multiple ways to get to the same result!
I've learned something: that I don't know much modern CSS.
Remark : filter: blur() does not combine with mask-image apparently, however backdrop-filter: blur() does, which is very nice, the opacity of the mask-image controls the intensity of the blur
Thanks for this - I was thinking border, but I didn't border-image was a thing. Thanks also for being real and looking stuff up!
I came here from your Frontend Masters course, which I loved. I learned a lot of new things. Subscribing to your channel is a must.
Ana Tudor is an artist
That is unbelievably cool!
Well done, perfect lunch break content ;)
I found box shadow to work as well, great video, thank you
Thank you, so funny and educational video!
very nice work, thanks alot !
at 16:50 I was sitting there and yelling at the screen. REMOVE THE COMMA :D
Great Video thanks for that!
need several video challenges like this.
Ana tudor is unmatched bar none
Kevin, you're an Ace with an inner glow
OMG that trailing comma! Listen Kevin! 🤣🤣
You can make border image correct corners if you do border radius, so that is not really a big issue there...
Forgot about masks, remembered the border-image but never quite remember how that works. Tried to replicate it before the video, basically did the same thing with pseudo element and just rotating that element instead of creating a property. Thought you'd need an after with transparent borders or something to lay on top of the before. Or filters/mix-blend-modes. Pretty elegant solution just with the border-image! Though stacking the linear-gradients was also pretty neat.
5:15 "Hugh rotation". THAT is a 2013 video I never thought I'd hear again
(from the creator of the "Jimmy Neutron Happy Family Hour" animation)
Awesome!!!! ✨💫
For anyone who missed it, the reason you need to use "transparent" instead of "white" is because luminance masks are only supported within SVGs and otherwise you need to use an alpha mask. It's not explicitly spelled out in a lot of places and I keep running face first into that bug on a semi regular basis.
Man, CSS has changed a lot. Not that long ago I remember fighting with the language to implement things like rounded corners - oh and remember sliding doors for buttons? Not to mention techniques to make things work across browsers.
Noice! Both of your approaches are good however I like yours more Only because it would be simpler and easier to maintain in the future.
thank you so much for the content
You can use scale for the mask right
Yes, I was screaming "THE COMMA!" 😆
And yes agree, Bluesky is the good place now.
"Why don't I see anything?"
Me everyday on my CSS journey LOL
miss these typa videos
This was very interesting an challenging!
As a back-end dev, I wish I could someday do this wizardry too.
3:34 did you just put display: none on your kid?
one div psuedo elements and only the border is crazy
"I never think of using border image for anything" - nobody* thinks of using border-image, mostly because it has a syntax taken from the Necronomicon.
* As a footnote, though: Temani Afif thinks about it, and has written at least one article about how it can be used, and exploited. I read that article, and then my brain melted at the eldritch horror.
It would be so nice if codepen had linting and / or prettier formatting to fix those thing. Maybe it does if you save?
Do you choose to let RUclips offer the fake "enhanced bitrate" 1080p option? Or is it up to them
I am glad I am not the only who makes a silly mistake like misplacing a comma and immediately conclude that I don't have the knowledge required to solve a problem.
Imposter syndrome is hell of a demon.
Your son is very cute. 🙂
Can you try cloning Apple Music rotating blur background
Hey king, mind if I ask what mic do you use ? 🤠
Great video and just shows you the various way to get things done. BTW: bit slow but only just found out your Canadian..... like you even more now 😂😂😂😂
3:44 most iconic div container 😂😂
Haven't had your coffee for this one Kevin? ;D
7:48 why can't you just use box-shadow inset and animate the colour?
You should use an actual ide instead of codepen with HMR. It would highlight a lot of the mistakes that cost you time in this video.
Hi Sean!
Aaaah. Remove the ending comma of the mask-image at 17:52 ... then it will work AAAAH XD
My inner Monk be like: "Seriousely. You had it already right, and just throw it away as you JUST HAD TO REMOVE THE LAST COMMA XD XD XDXD WOAAAAAAH"
I'm crying
neat af
Did you know you can do that with a border? It might not work on all devices though
so you can't make the inside of the border round with border-image? that sucks. can we make a feature request to the CSS committee or something?
box-shadow: inset 0 0 1em 1em --rgb; (animate the rgb variable) Am I crazy to think this is the answer?
My initial thought was to begin with how I normally do gradient borders with a radius (both outer and inner):
div {
--border-width: 10px;
aspect-ratio: 1;
height: 200px;
position: relative;
border: var(--border-width) solid transparent;
border-radius: 20px;
&::before {
content: "";
position: absolute;
inset: calc(-1 * var(--border-width));
border: inherit;
border-radius: inherit;
background-image: conic-gradient(in oklch longer hue, red, red);
mask:
conic-gradient(#000 0 0) padding-box exclude,
conic-gradient(#000 0 0);
pointer-events: none;
}
}
The pseudo has two fully opaque mask images, one covering the entire border-box (which is default), and the other only the padding-box. We also set `exclude` as value for `mask-composite`, which removes the area where the masks overlap.
Not sure if I would think of using a blur filter though. That was very clever.
I needed this same kind of cutout effect and tried clipmasks and all kinds of sandboxes until j found the “exclude” keyword.it was a joyous day 🎉Then I saw the browser support 😔 haven’t watched the whole video yet,curious on the approach if not exclude
@@clevermissfox The prefixed version of `mask` has > 99% browser support as long you use the longhand properties. What you‘re looking for is `-webkit-mask-composite: xor`.
-webkit-mask-image:
conic-gradient(#000 0 0),
conic-gradient(#000 0 0);
-webkit-mask-clip: padding-box, border-box;
-webkit-mask-origin: padding-box, border-box;
-webkit-mask-composite: xor;
mask:
conic-gradient(#000 0 0) padding-box exclude,
conic-gradient(#000 0 0);
@nilaallj so just to clarify, browser support is fine foe production if you either: a. Use the longhand "mask" property with exclude or b. Use shorthand and prefixed "-webkit-mask-composite" with a value of "xor"? (Have never seen such a combination of characters, how do you even pronounce that??? Is it "zore" like zoro sans the last "o" ? Rhymes with "soar"or "bore"?)
Am I understanding that correctly?
Or no it's not an either or: you need all the shorthand properties with the prefixes and then the longhand mask property with exclude like your example.
It's not either a or b, you need both?
@@clevermissfox For supported browsers the `mask` shorthand will be prioritized over the prefixed properties as long it is declared last. This is no different from normal cascading rules. E.g. if you declare the same property twice on the same element, the last declaration wins. This is a common progressive enhancement practice. Unsupported declarations get ignored by the browser, but it does not prevent it from falling back to preceding declarations. So `mask` will get ignored by browsers that does not support it, and by so it will fall back to the prefixed properties.
This made me wonder if it’s possible to do like a broken glass holographic effect with just CSS to make things look like foil trading cards dhdjdj
oh a google search led me to pokemon cards holo effect by simeydotme and it has made me very happy dhdhdhd
Was about to link that site to you! haha
100vb would fit better with min-block-size
Good point 👍
Is there any device where this is actually different from vh or is it just semantically more correct?
some times you are doing task in hard way.
Bluesky? What are ya ... a liberal???
Cry more