Tried a very different style with this video and I'd love to know what you think of it! (and yes, the mask-image would have been a lot easier and is probably the best approach 😅)
There's nothing better than taking a design that most people would think requires photoshop/illustrator/masks/whatever and making it purely with CSS :) -- love this one!
This is next level and why I love your work so much. You not only show the 'what' and the 'how' but the 'why'. So important to understand when troubleshooting. At least it is for me. Thank you, and my vote is for more vids in this format.
I used to not be very interested in CSS, and would learn how to brute force certain things, but as I've recently become the staff (read: only) frontend engineer at a startup, I've had to do more and more elegant implementations from our design team, and your videos have been instrumental in teaching me all the levers and switches and tools at my disposal to get things done easily and scalably, and I really appreciate that.
you can do this with clip-path: polygon and sass functions by approximating a radius. Maybe impractical, but kinda cool, cause you can approximate any kinda shape, even squircles (like the shape of an ios app icon), which look very nice. You can even animate clip path point by point.
Love the ingenuity of this. It is not always about the easier way, but knowing the ways you can achieve the same thing, though manipulatable means is the true pursuit of wisdom, as it can be applied in many different, and even unrelated scenarios. Great work, Kevin, as always!
Thanks for this video, Kevin. Seeing you use psuedo classes is always pretty impressive to me. Looking forward to the next one. I also really like that you pull suggestions like these off twitter. Little design challenges like these that I haven't seen before are inspiring.
Bravo 👏 👏 👏, I did the same using an svg as the corner that I rotated for each corner and had a variable for width, height, and fill to control its size and color. Your solution is so awesome and simple, and the best part is that it's all css, amazing!
Maybe not centric to the video, but that bit of "moving on to solving something else to make progress when you get stuck with a problem" is something that really helps me in my day-to-day web-dev tasks
I love this shorter format! It's a good pace, quick and to the point, but still very easy to follow along if you know the basics (pseudo elements, grid, variables)
Excellent, recently in the company we had the same challenge, I solved it using the after and before pseudo elements, in addition to the use of the clip-path function with an internal svg vector to do the drawing.
Honestly, the firs thought was, he got Kevin, will Kevin pull this off, but then again - he is the CSS man so, yeah, you nailed, thanks for the video.....whoooooooohhhh
I came across a scenario like this the other day at work, I really wanted some kind of magical inverted border radius property at the time! 😅 I love your solution and I also enjoyed this content form, reminds me of the pace of a Short but with time for more detail. 👍
Mission accomplished! It's handy, it did the job, but I have to admit I really don't like all these, say, workarounds with pseudo elements. I think it isn't quite maintenable, specially when you cover that responsive behavior, even using CSS vars IMHO. But, well, you did it! Thanks for sharing!
I'll be honest that was a bit Janky or I should say Hacky, But I definitely learned some new things, That's always a Plus. Thanks for everything Kevin. Definately liked this new style, would love to see more like this here and there.
Brilliant as usual Kevin, thanks. In case I want to try the mask way. Is it that I would do it in Photoshop for instance and save it and use it in html? Is that what you mean? I have never tried such thing before.
My solution (OJBZmra) which was picked by CodePen 😉 follows this closely. While CSS method looks sketchier with CSS it's easier to make it responsive and adaptive, all of the SVG solutions can't handle responsive layouts (however I think you could split the image in 2 or 3 which would allow for a responsive layout but it's now added a lot more complexity and it's more complex than the CSS solution. However I did the internal corners differently. Rather than having a square with a circular gradient to cut the corner, I used a transparent circle with the drop shadow 50% left 50% down and with this there were no aliased curves, all smooth and a lot simpler to set up.
Please make video on this challenge. I want to make a layout where there are header and main and main has multiple dynamic items of 150/150 px each. while making responsive screen, items should wraps in smaller size. header should always occupy width according to the items. for example if it has 1 item then header width should have 150px if 2 items then 300px and so on so forth.
This looks great for post-edits but a nightmare for the initial edit. I love native approaches and avoiding raw images, but in this case I would stick to an image.
This is a great video format, and I really enjoyed your explanation. Thanks. But on another issue, I think this challenge illustrates just how crazy CSS is as a language. The CSS solution is often more complex than the problem it is trying to solve. HTTP, HTML, CSS and Javascript were probably all reasonable ideas when they began, but they aren't good at describing the web we are building today. They never had good Separation of Concerns, and the concerns of the modern web are not those of the past. Instead of useful tools they are akin to mystic spells and incantations, adding their own complexity to the original task. We have answered these complexities with the rise of Frameworks and new languages, multiplying the complexity and adding dependency issues on top. All this results in a web that looks great, but has uncertain security, confused UX flow, intermittent bugs and even superstitious advice. We should stop adding to these languages and instead work together to figure out a new paradigm which fits the modern web. $0.02
I've had to do something similar before. Before vector masks were as flexible as they are today. My case was somewhat simpler though. So I can't help but wonder if rendering the image on two boxes would have made it simpler to do.
*Respected Sir,* I would like to ask you, What topics, in what order should I follow to master CSS ? Its a bit confusing cause I know basic CSS but face problems in positioning components, making responsive designs, not able to make shapes etc. - Thank you
This reminds me of those is rounded corner days. When you would put 4 rounded cornered images at the four sides of the box - positioning absolute. CSS Grid should be ashamed of. And why the grid gap did not work? Any idea? This is totally strange!!
Interesting. My first thought would have been abusing outlines, pseudo-elements, and/or z-index, but it would probably be even harder than this method.
I’m not happy with the border-radius on the white price box. You did _size / 2. But it should’ve been _size - 0.75rem. The 0.75 rem comes from the padding on that element, since it’s not set to _size but rather hardcoded 0.75
Possible challenge for you (lol please?): I made a generic UI card that is solid with transparent windows inside of it. So if you have a fixed image/video fullscreen background, as you scroll, the window cutout inside of the card is the background (or whatever element that is under the card). I can share my code if you want (it's hacked together, but it works. Just hoping you could improve it..).
I'm still upset with the inverted corner transition, on the bottom most corner in the middle. The blur wasn't the answer, right. Why were we getting that raster pattern in the first place? I like the speed build thing a lot, so it's not a criticism. But if I were to use this in production, I'd be unhappy with the blockiness of that lower corner facing southwest. So it's a request. Fix that! I mean, we could do it with SVG perfectly, but that would introduce other layout complexities. Or would it? I sort of suspect that you could just increase the resolution somewhere, in your existing example here. I dunno for sure ;)
Tried a very different style with this video and I'd love to know what you think of it! (and yes, the mask-image would have been a lot easier and is probably the best approach 😅)
Loved this new approach. It's interesting to watch your thought process
it was quite fun and entertaining to watch! i hope you do more like these!
Really enjoyed the style of this video!
I like this video style👍
love it and this seems also useful to create a css-only LCARS interface.....
I had no idea you could position pseudo elements on the grid that’s so useful
There's nothing better than taking a design that most people would think requires photoshop/illustrator/masks/whatever and making it purely with CSS :) -- love this one!
Immediately I saw this video I remembered your critique of my website 😂
Is there something that this guy can't do?!
Amazing stuff Kevin!
Yes. I once asked him to make a poor CSS card and he tried his best but failed. It looked too good to pass my criteria
This is next level and why I love your work so much. You not only show the 'what' and the 'how' but the 'why'. So important to understand when troubleshooting. At least it is for me. Thank you, and my vote is for more vids in this format.
I used to not be very interested in CSS, and would learn how to brute force certain things, but as I've recently become the staff (read: only) frontend engineer at a startup, I've had to do more and more elegant implementations from our design team, and your videos have been instrumental in teaching me all the levers and switches and tools at my disposal to get things done easily and scalably, and I really appreciate that.
That’s why you are the CSS GOAT! 🙇♂️
you can do this with clip-path: polygon and sass functions by approximating a radius. Maybe impractical, but kinda cool, cause you can approximate any kinda shape, even squircles (like the shape of an ios app icon), which look very nice. You can even animate clip path point by point.
Love the ingenuity of this. It is not always about the easier way, but knowing the ways you can achieve the same thing, though manipulatable means is the true pursuit of wisdom, as it can be applied in many different, and even unrelated scenarios. Great work, Kevin, as always!
Thanks for this video, Kevin. Seeing you use psuedo classes is always pretty impressive to me. Looking forward to the next one. I also really like that you pull suggestions like these off twitter. Little design challenges like these that I haven't seen before are inspiring.
Bravo 👏 👏 👏, I did the same using an svg as the corner that I rotated for each corner and had a variable for width, height, and fill to control its size and color. Your solution is so awesome and simple, and the best part is that it's all css, amazing!
Had this problem 8 years ago or so. Added circles in size of the radius and in color of the background to get this shape. Very simple solution.
Holy Jesus Kevin, mid-watch I was ready to comment "neat, now make it responsive" AND YOU GO AND MAKE IT RESPONSIVE! Amazing. Thanks for sharing
Maybe not centric to the video, but that bit of "moving on to solving something else to make progress when you get stuck with a problem" is something that really helps me in my day-to-day web-dev tasks
I love this shorter format! It's a good pace, quick and to the point, but still very easy to follow along if you know the basics (pseudo elements, grid, variables)
I saw someone do it in Webflow, although without using the grid. That's some valuable knowledge right here.
Excellent, recently in the company we had the same challenge, I solved it using the after and before pseudo elements, in addition to the use of the clip-path function with an internal svg vector to do the drawing.
This is why you are the King of CSS. I enjoy watching your videos you make CSS digestible and fun.
Thanks for going the hard way, in cases like this proving a point is progress for everyone.
Also the sped-up live work was interesting to watch!
Amazing work 👍kevin...
I would also like to complete this challenge.
Would love to see your approach! So many ways to do this, many probably better than what I did here 🤣
Amazing, but for the amount of work needed, I do believe that making it without SVG mask is the overkill.
100% the mask-image would be easier, plus it would work on non-solid backgrounds as well
@@KevinPowell please do this mask-image as well to compare responsiveness. Also do you any tutorial on mask-image?
I really like hearing your thought process.
Kevin when watching your videos, my soul just relaxes ... .. I am big fan from Nepal 🙂😊
You Kevin really are the CSS KING.
Honestly, the firs thought was, he got Kevin, will Kevin pull this off, but then again - he is the CSS man so, yeah, you nailed, thanks for the video.....whoooooooohhhh
That was a fast-paced video... mercy for non-English speakers! Anyway, great video, thanks for this one, and for so much!
I came across a scenario like this the other day at work, I really wanted some kind of magical inverted border radius property at the time! 😅 I love your solution and I also enjoyed this content form, reminds me of the pace of a Short but with time for more detail. 👍
What a beautiful little design! Thanks for sharing, Kevin!
Really impressive stuff! Thank you for sharing ❤
Kevin when watching your videos, my soul just relaxes ☺
Mission accomplished! It's handy, it did the job, but I have to admit I really don't like all these, say, workarounds with pseudo elements. I think it isn't quite maintenable, specially when you cover that responsive behavior, even using CSS vars IMHO. But, well, you did it! Thanks for sharing!
Ahh I remember this one. Great video Kevin!
Beautiful!! Thanks Kevin!
I can see you tried the same style as hyperplexed. Not quit his quality but keep it up, you’re getting there !
That's amazing. I think I like the different approach. But I found I was having to force myself to breathe. Smooth edits on that.
didn't know you can place absolute elements relative to grid areas . Thanks for sharing.
Amazing work Kevin, thank you for the video!
The King of CSS at it again
The dev was flexing unnecessarily on this one! Nice effect though. Nice one Kevin. 👊🏼
Hello. Congratulations! Challenge completed!
Thanks It worked way better then box shadow method. thank you :)
I think I'd try doing it with an overlaid hand-coded SVG.
Wow awesome Kevin, tricky design, ;)
Intresting......Surely I will find a good use for this knowledge
split keyboard? wow, i'm interested to know how good that is
I'll be honest that was a bit Janky or I should say Hacky, But I definitely learned some new things, That's always a Plus. Thanks for everything Kevin.
Definately liked this new style, would love to see more like this here and there.
That's some next level shit , he always seems to send me to the beginner mode
REally Amazing The CSS King
Both "radii" and "radiuses" are used in the UK and the US. "Radii" is far more common in published writing and academic papers.
Kevin, you should be working on the actual CSS spec... You're mind blowingly good at this.
Crazy well done
Brilliant as usual Kevin, thanks.
In case I want to try the mask way. Is it that I would do it in Photoshop for instance and save it and use it in html? Is that what you mean? I have never tried such thing before.
Good work thank you Kevin
@Kevin Powell can you make a complete series videos on responsiveness with scss, i love you explanation.
Very interesting video! Thanks for sharing. 😉🔥
You are Magic Johnson of the CSS
idk why but I really like the editing and overall the video.
Did you change anything?
Normally I talk as I write the code. This time I recorded the work, then went back over and made a voice over for it. Glad you liked it
@@KevinPowell Keep it going!
You are my favourite teacher ❤
Great video, I haven’t used CSS in a few weeks so this has helped me get a bit of a refresher as well as a cool tip to maybe try.
Awesome just awesome, the css king
My solution (OJBZmra) which was picked by CodePen 😉 follows this closely. While CSS method looks sketchier with CSS it's easier to make it responsive and adaptive, all of the SVG solutions can't handle responsive layouts (however I think you could split the image in 2 or 3 which would allow for a responsive layout but it's now added a lot more complexity and it's more complex than the CSS solution.
However I did the internal corners differently. Rather than having a square with a circular gradient to cut the corner, I used a transparent circle with the drop shadow 50% left 50% down and with this there were no aliased curves, all smooth and a lot simpler to set up.
Looks great. 👍🏻
Sometimes the best solution is not really the best solution. Doing this let you push the limits and find new ways to do stuff.
So absolute position in grid is relative la grid area that grid item takes not all grid container rectangle?. Is this correct? Thank you!
Congratulations! This one is really tricky, having tried it some time ago, and failed
This is a nice solution
I tip my hat to you sir. Amazing.
Wished you showed more regarding the stacking in grid. Havent seen a video regarding this..
Explicitly set the same grid column and row on both the elements that you want to overlap
That was brilliant
That was a lot…. Thanks for all your work
Please make video on this challenge.
I want to make a layout where there are header and main and main has multiple dynamic items of 150/150 px each. while making responsive screen, items should wraps in smaller size. header should always occupy width according to the items. for example if it has 1 item then header width should have 150px if 2 items then 300px and so on so forth.
i need to try this
About to be enlightened by the content but first - which monitor do you use Kevin?
Samsung Odyssey Neo G9 🙂
@@KevinPowell Wow, that is _not_ cheap!
If 1440p is good enough for Kevin then might have to purchase 😅
That monitor grabbed my attention too.
This was a great video Kevin. This is the type of info we only get here. We appreciate you 🙏🏾
@@jezmck definitely a bit of a splurge, lol. I really like it, but a good 2 monitor set up is just fine as well
You are a true magiccsian!
This looks great for post-edits but a nightmare for the initial edit. I love native approaches and avoiding raw images, but in this case I would stick to an image.
Wow amazing thank. Now I Know
WoW Kevin nice work station, how big is it? do you enjoy it?
It's the samsung odessy neo g9, 49". I love it, but I know some people who hate the curve and much prefer using multiple monitors instead
@@KevinPowell the curve seems massive indeed
as allways amazing
Oh my GOD, you have a split keyboard. Can you make a video about your macros and about your experience with a split keyboard? It would be nice :)
I had to something like this but with a dynamic background. clip-path() with SCSS variables instead of custom properties was how I got it done.
This is a great video format, and I really enjoyed your explanation. Thanks.
But on another issue, I think this challenge illustrates just how crazy CSS is as a language. The CSS solution is often more complex than the problem it is trying to solve.
HTTP, HTML, CSS and Javascript were probably all reasonable ideas when they began, but they aren't good at describing the web we are building today.
They never had good Separation of Concerns, and the concerns of the modern web are not those of the past. Instead of useful tools they are akin to mystic spells and incantations, adding their own complexity to the original task. We have answered these complexities with the rise of Frameworks and new languages, multiplying the complexity and adding dependency issues on top. All this results in a web that looks great, but has uncertain security, confused UX flow, intermittent bugs and even superstitious advice.
We should stop adding to these languages and instead work together to figure out a new paradigm which fits the modern web. $0.02
amazing maaan you are the goat ✨✨✨✨✨✨
GENIUS!
I've had to do something similar before. Before vector masks were as flexible as they are today. My case was somewhat simpler though. So I can't help but wonder if rendering the image on two boxes would have made it simpler to do.
*Respected Sir,*
I would like to ask you,
What topics, in what order should I follow to master CSS ?
Its a bit confusing cause I know basic CSS but face problems in positioning components, making responsive designs, not able to make shapes etc.
- Thank you
This reminds me of those is rounded corner days. When you would put 4 rounded cornered images at the four sides of the box - positioning absolute. CSS Grid should be ashamed of. And why the grid gap did not work? Any idea? This is totally strange!!
the gap is there, but it doesn't work because the image is spanning multiple cells, so we don't see the gap there.
You could use gradients for mask-image instead of an svg.
I'd love to know how to do that! Can you share a link?
@@erichepperlewp I don't think RUclips lets you comment links but its on my Codepen megancweber.
Maybe if we can apply
Image-rendering: smooth;
To shapes is possible
“Insanity is doing the same thing over and over and expecting different results." -Albert Einstein
Thank you master.
Interesting. My first thought would have been abusing outlines, pseudo-elements, and/or z-index, but it would probably be even harder than this method.
Oh, it's border-radii. Just flexing my knowledge of Latin plurals, you know the system where the entire modern language is based upon, no big deal. 😎📚
From Egypt u are the best
I’m not happy with the border-radius on the white price box.
You did _size / 2. But it should’ve been _size - 0.75rem.
The 0.75 rem comes from the padding on that element, since it’s not set to _size but rather hardcoded 0.75
Greetings from Cyprus. I was trying to do this on a project I'm working on..
This is definitely one of those "great katas that you'd never want to actually implement" type of things
Absolute goat
Possible challenge for you (lol please?): I made a generic UI card that is solid with transparent windows inside of it. So if you have a fixed image/video fullscreen background, as you scroll, the window cutout inside of the card is the background (or whatever element that is under the card). I can share my code if you want (it's hacked together, but it works. Just hoping you could improve it..).
LIke this? 😁
codepen.io/kevinpowell/pen/ExdMBeR/166a1b2c21d929b155f2e044194f2139
I'm still upset with the inverted corner transition, on the bottom most corner in the middle. The blur wasn't the answer, right. Why were we getting that raster pattern in the first place?
I like the speed build thing a lot, so it's not a criticism. But if I were to use this in production, I'd be unhappy with the blockiness of that lower corner facing southwest. So it's a request. Fix that! I mean, we could do it with SVG perfectly, but that would introduce other layout complexities. Or would it?
I sort of suspect that you could just increase the resolution somewhere, in your existing example here. I dunno for sure ;)
Hi Kevin,
this is a nice tutorial
But can you do a video using mask-image
What monitor do use @kevin
Samsung Odessy Neo G9 - it's a bit of overkill, but I like it :D