Not only a cool effect, but in going through your thought process ("hmm, why isn't that working?"), you help us understand how to think through this kind of problem generally.
I think that if you use relative paths, they are based on the size of the element they're on with percentages. That way, you don't have to worry about the size of the path anymore and it doesn't matter if the image is 4px bigger
@KevinPowell in that editor, you just have to rotate 45deg and center origin to have rounded corners on hover - just repeating workflow and having fun 🙂
Just discovered your channel. Awesome content. Thanks for leaving in your head scratching moments, extremely helpful to see how people think through problems!
It would be awesome to see if you can make this responsive where the grid changes based on the screen size but you still keep the diamond pattern. Similar to the way you did in "Create an adaptive CSS grid with a max column count!".
Kev you're amazing bro! From you, I learned many things including not to stop working on something that "worked" but understanding how it's really working. And, if I get some error like you did using the border-radius property, i try to figure out why it is not working as expected! I know i'm talking with everybody's mouth when i say "I love you man"!
Thanks for this great video! Inspired by this concept, I tried to create a hexagon-based grid in the same way. The math is a bit more involved due to the dimensions of a regular hexagon, but it was fun!
Kevin! The keyframes hack is interesting. The way I have dealt with something similar in the past, is that I set additional transition for the z-index property, but in a way that enforces a "delay" of 500ms (in this case) before starting, and for the delayed transition, i just do "0s linear".
I think the rotate feature in that path editor would have made that much simpler. It would obviously animate differently but would also be trivially simple to build.
svg-path-editor added to my favorites thx :D What you can do @kevin to keep the border radius is to "turn" each 2 couple points corner of 45° to the left and place each point around your new four corners. By doing this you keep the border radius and you have a mask rotate + scale effect.
Nice animations. I think I would use inkscape for the project like this. In inkscape you can add grid lines to snap points easily. Or click to align selected points vertically 😊
I love how happy and satisfied you get when you managed to insert the grid rows and they all came together 🙂 I’m still confused how making the 4th child image span 2 managed to create the correct layout, how did that bit work?
I'm having all of them span 2, but the 4th one is offset by 1 grid column, so it shifts over, along with the next one. 6th one doesn't have room now, so it goes to the next row
border-radius property works independently of the clip-path property. It's used to round the corners of an element irrespective of its shape or clipping path. It applies to the visible area of the element AFTER the clipping path has been applied. Hope this helps!
That's what I did - I changed the shapes a bit, made it responsive, and added javascript to it so that the images open up in a pop up modal & you can see them bigger. It was a lot of fun!
@@albedesigns That's awesome, I've been trying for hours to do it but i'm struggling with the clip-path, I can't make it responsive while mantain its transition on hover (At least no without using JavaScript), can you share how you did it, i'd really appreciate that :)
Thank you! Really appreciate this awesome tutorial and your thought process as you walk us through it! But I'm struggling to make it Responsive. Is there a way to make it responsive with just CSS? Or is it absolutely necessary to use JS or some other technology like Sass, or Bootstrap, etc... Would love to get your feedback on this.
Great video! Always learning something new 😄 Have you covered 12 column layout in a video yet 😅? Or do you have any courses related to that?o you have any courses related to that?
I used to suck at CSS although I loved creating creative effects, watching you all these years and trying to play with CSS stuff I learned has made me alot confidence when approaching designs ❤ although I am a backend engineer, learning to expand as Full Stack using the Angular 😂
instead of messing with the z index i think you could just apply a perspective to the container and then transform:translateZ! then you dont need to bother with animations at all
The aspect-ratio property does not seem to work correclty in Firefox. The portrait images are shown correctly while the landscape images are not filling the entire 2x2 grid cells. How could this be solved?
I wonder could you put each image in a parent, round the corners, rotate it, rotate the image back , overflow hidden then on the hover state , turn overflow: unset?
The only issue is overflow can't be animated, so it would just jump from overflowing to not. Otherwise, yeah that would be a lot easier :) One option could potentially be to keep the overflow hidden, but rotate the child like you're saying, but also play with the scale... scale up the parent, scale down the child, and vice versa... Might work 🤔
@@KevinPowell I'm just so terrible with paths and svgs , was trying to look through the lens of alternatives to clipPath 🤣 what's the transition-behaviour allow-discrete do for properties like display or overflow that don't animate?
You *might* be able to do it with a parent that has overflow hidden, and rotates. The image, which is the child, rotates the opposite way. The only thing is, you'd have to also animate the scale of the image to make it work, I think. Might be worth playing around with though.
Think for yours, you should do 4 rows. Yes you only have 3 rows of images, but thinking if this was in a real project you either need a large margin-bottom or just 4 rows.
Good point! I'd probably use a margin bottom, that way you could potentially have more images. I'd have to tweak my :nth-child() selector to make sure every second row was offset properly though.
Alvaro also made Snake & Ladders in HTML+CSS with no JS total savage, I can't change the color of a button without downloading react, typescript, tailwind, shadcn etc etc
You should have scaled by 20 not 10 since you span 2 grid columns with an aspect ratio of 1 so your image is 200×200 Edit: I noticed you figured it out later 😂
That clip-path cannot handle dynamic sizes (which is the whole point of vectors) is sooo disappointing. I wish this would get some attention. Because you could do so many cool things with it.
To do it with images, I'd have to have a around each image, rotate the div one way, and rotate the image the other way, so that the image stays the right direction the entire time. I think you'd also potentially need to play with the scale of the image too, to ensure it's always big enough, but I haven't tried so I'm not sure. I did mention off the top that something like that is doable, but because I was basing it on what Alvaro did, I wanted to keep the HTML the same way he had it.
And the curve arm thingies are called tangent handles. Also could you just put a border radius in the image for rounded corners? Sunce the clip path on hover isnt really for clipping its unclipping? Edit: I'm validated! Border radius on image!😂 And does it have to be the same number of points or could you just say on hover, clip-path : none?
@@KevinPowell After I wrote you, I went onto a live stream and the ad service was going bonkers. Others reported similar issues with lag. Sorry to bother you, I do enjoy the CSS mastering.
The king of CSS
Not only a cool effect, but in going through your thought process ("hmm, why isn't that working?"), you help us understand how to think through this kind of problem generally.
Such a handy tool and a great explanation for clip-paths. I really like seeing how you think through things too. Thanks, Kevin!
I just love how you struggle and then find the solutions and reasons for that struggle. Thanks for explainng everything in an understanding way ✌😊
love seeing your thought-process. thanks!
I think that if you use relative paths, they are based on the size of the element they're on with percentages. That way, you don't have to worry about the size of the path anymore and it doesn't matter if the image is 4px bigger
You're the man! Thanks Kevin ... always great to watch you. Learn so much from you!
@KevinPowell in that editor, you just have to rotate 45deg and center origin to have rounded corners on hover - just repeating workflow and having fun 🙂
This is why i love checking out your videos, there's gotta be sth new you're gonna learn
for the sake of engagement
Congrats on the engagement!
+1
@@maidnuu What is this, Shayne and Courtney Topp? 😁 (I assume there's enough internet overlap that other people get the reference...)
Just discovered your channel. Awesome content. Thanks for leaving in your head scratching moments, extremely helpful to see how people think through problems!
Hiiiiiiii xD
Great video. I've been practicing alot of css and watching alot of your videos (and also liking them). Thanks for the great content. 😊
It would be awesome to see if you can make this responsive where the grid changes based on the screen size but you still keep the diamond pattern. Similar to the way you did in "Create an adaptive CSS grid with a max column count!".
Leaving a comment for the sake of the algorithm. Also, great video, gonna use the setup for sure(minus hover effect)!
Kev you're amazing bro! From you, I learned many things including not to stop working on something that "worked" but understanding how it's really working. And, if I get some error like you did using the border-radius property, i try to figure out why it is not working as expected!
I know i'm talking with everybody's mouth when i say "I love you man"!
What a gem! It looks great and I loved the explanation.
Thanks for this great video! Inspired by this concept, I tried to create a hexagon-based grid in the same way. The math is a bit more involved due to the dimensions of a regular hexagon, but it was fun!
I just created the diamond clip path with rounded corners and then a square clip path with rounded corners, and it worked fine,
Keep up the great work, Kevin! Love your channel and content!
Kevin! The keyframes hack is interesting. The way I have dealt with something similar in the past, is that I set additional transition for the z-index property, but in a way that enforces a "delay" of 500ms (in this case) before starting, and for the delayed transition, i just do "0s linear".
Thank you, that's exactly what I've been thinking!
Oh, yeah that would work as well! Bit cleaner too, since you don't need to set up some keyframes.
Grid is too powerful!
Thank you for the vid! And for sharing the path editor! Cheers from Brasil~
I think the rotate feature in that path editor would have made that much simpler. It would obviously animate differently but would also be trivially simple to build.
svg-path-editor added to my favorites thx :D
What you can do @kevin to keep the border radius is to "turn" each 2 couple points corner of 45° to the left and place each point around your new four corners.
By doing this you keep the border radius and you have a mask rotate + scale effect.
You are king of the css
Nice animations. I think I would use inkscape for the project like this. In inkscape you can add grid lines to snap points easily. Or click to align selected points vertically 😊
15:32 When you were moving the points, I was internally screaming OH NO THE CORNERS 😂
I would love more of these videos
It's fun to watch you struggle and then figure it out on your own.
hello good video why didn't we use border radius and rotation properties in image boxes or did I think wrong?
What a great tutorial. Thank you very much for it. 😀👍
I love how happy and satisfied you get when you managed to insert the grid rows and they all came together 🙂
I’m still confused how making the 4th child image span 2 managed to create the correct layout, how did that bit work?
I'm having all of them span 2, but the 4th one is offset by 1 grid column, so it shifts over, along with the next one. 6th one doesn't have room now, so it goes to the next row
@@KevinPowellAhhhh right yeah that makes complete sense now! Thank you
for the sake of engagement (actually cool videos, I learn a lot of new stuff, keep going :) )
Much to learn here, but I'm still curious how border-radius and other border properties work when using custom paths
border-radius property works independently of the clip-path property. It's used to round the corners of an element irrespective of its shape or clipping path. It applies to the visible area of the element AFTER the clipping path has been applied. Hope this helps!
Great videos Sir, We want more videos like this😊
Love this, need to find somewhere to use it. But will need to make it responsive.
That's what I did - I changed the shapes a bit, made it responsive, and added javascript to it so that the images open up in a pop up modal & you can see them bigger. It was a lot of fun!
@@albedesigns That's awesome, I've been trying for hours to do it but i'm struggling with the clip-path, I can't make it responsive while mantain its transition on hover (At least no without using JavaScript), can you share how you did it, i'd really appreciate that :)
You are SUCH a great explainer!
Thanks!
@@KevinPowell Kevin, is there a way to display text over the image when hovering over it?
Great video!
You are the css MASTER 🎉
Thanks for the tools, I really need it!
Love it! Thank you Kevin!
Thank you! Really appreciate this awesome tutorial and your thought process as you walk us through it! But I'm struggling to make it Responsive. Is there a way to make it responsive with just CSS? Or is it absolutely necessary to use JS or some other technology like Sass, or Bootstrap, etc... Would love to get your feedback on this.
Awesome ❤
I'm going to try to reproduce this with hexagons!
Hexagons are the bestagons!
Great idea!
thank you wizard
Had to leave a comment for the sake of engagement!
Great video!
Always learning something new 😄
Have you covered 12 column layout in a video yet 😅? Or do you have any courses related to that?o you have any courses related to that?
I don't think you have one video that I haven't learned something from!
Hey Kevin. Loved this one, but how would I make that responsive?
You'r the best 👑, nice video!
grid is indeed very handy
Looks good!
21:42 but everything also get darker when hover between images
If I use `:has()` it wouldn't. Because I'm doing it for the hover on the entire parent, then it does.
Bravo 👏
would it be possible to mirror the path horizontally and vertically in CSS and animate it?
very cool
For the sake of engagement it seems gap was taking up too much space, causing your border-radius not properly work.
A comment for the sake of engagement
That z-index hack was 🔥🔥🔥
CSS lord
I don't like the hover effect tbh, i would just like some zooming on the image, or the diamond pop up a bit with transform+shadow
I used to suck at CSS although I loved creating creative effects, watching you all these years and trying to play with CSS stuff I learned has made me alot confidence when approaching designs ❤ although I am a backend engineer, learning to expand as Full Stack using the Angular 😂
For anyone who want's to double the size I think this is the correct paths: /*This is double the size*/
clip-path: path('M180,20 C200,0 200,0 220,20 380,180 380,180 380,180 400,200 400,200 380,220 380,220 220,380 220,380 200,400 200,400 180,380 180,380 20,220 20,220 0,200 0,200 20,180Z');
/*clip-path: path('M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z');*/
&:hover{
/*This is double the size*/
clip-path: path('M0,0 C0,0 400,0 400,0 400,0 400,200 400,200 400,200 400,400 400,400 400,400 200,400 200,400 200,400 200,400 0,400 0,400 0,200 0,200 0,200 0,200 0,200Z');
/*clip-path: path('M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z');*/
z-index: 2; /*on Hover put the image over the other images*/
}
I used scrimba.com/scrim/cocf6487e99264da4e193fec8
instead of messing with the z index i think you could just apply a perspective to the container and then transform:translateZ! then you dont need to bother with animations at all
The aspect-ratio property does not seem to work correclty in Firefox. The portrait images are shown correctly while the landscape images are not filling the entire 2x2 grid cells. How could this be solved?
Hmm, that's interesting. I might not have ever given them a width, so width:100% might do the trick. If not, I'd also add height: 100%
@@KevinPowellOkay, that worked. I had to set it to 200% though (since they are overflowing their grid cell). Thanks!
08:29 aren't your images 100px + .25rem + 100px because gap between columns?
yup, I realize that close to the end 😅
I wonder could you put each image in a parent, round the corners, rotate it, rotate the image back , overflow hidden then on the hover state , turn overflow: unset?
The only issue is overflow can't be animated, so it would just jump from overflowing to not. Otherwise, yeah that would be a lot easier :)
One option could potentially be to keep the overflow hidden, but rotate the child like you're saying, but also play with the scale... scale up the parent, scale down the child, and vice versa... Might work 🤔
@@KevinPowell I'm just so terrible with paths and svgs , was trying to look through the lens of alternatives to clipPath 🤣 what's the transition-behaviour allow-discrete do for properties like display or overflow that don't animate?
Now I wonder if I can do this with rotate and border-radius.
You *might* be able to do it with a parent that has overflow hidden, and rotates. The image, which is the child, rotates the opposite way. The only thing is, you'd have to also animate the scale of the image to make it work, I think. Might be worth playing around with though.
Think for yours, you should do 4 rows. Yes you only have 3 rows of images, but thinking if this was in a real project you either need a large margin-bottom or just 4 rows.
Good point! I'd probably use a margin bottom, that way you could potentially have more images. I'd have to tweak my :nth-child() selector to make sure every second row was offset properly though.
Alvaro also made Snake & Ladders in HTML+CSS with no JS total savage, I can't change the color of a button without downloading react, typescript, tailwind, shadcn etc etc
I think he has a rock paper scissors as well... (might be mixing him up with someone else though). I won't be trying to remake any of those 😅
@@KevinPowell Also saw a Quiz app made with only html css and it checks how many questions you have answered correctly madness
nice video
Now we just need to see bad apple played on clip path animation
how do I use this code on elementor pro ?
🎉
awesome tricks
❤
Leaving a comment for the sake of engagement!
Sir path operations konse appa se kiya hai
The link is in the description 😁
Anyone else experiencing an audio sync issue?
Great video!
I didn't notice any, and just double checked... but glad you liked the video regardless!
@@KevinPowell just my Firestick it looks like. Thanks.
🔥
Cool
Hello Please try midjourneys hero section
Let's entertain the algorithm 😋
nice!!!!!!!!!!!!!!
Also for the sake of engagement.
here, have some of my engagement
I leave a comment for the sake of Engagement 🙃
Forthe skae of engagement
You should have scaled by 20 not 10 since you span 2 grid columns with an aspect ratio of 1 so your image is 200×200
Edit: I noticed you figured it out later 😂
I'm engaged 💍 for the sake of engagement LOL 😂😂
for the sake of engagement
Comment for the sake of engagement
That clip-path cannot handle dynamic sizes (which is the whole point of vectors) is sooo disappointing. I wish this would get some attention. Because you could do so many cool things with it.
I feel that
you might have to rotate the path.
😂😂 for sake of engagement
Couldn't you have just drawn a square then rotated it and finally rounded the corners?
To do it with images, I'd have to have a around each image, rotate the div one way, and rotate the image the other way, so that the image stays the right direction the entire time. I think you'd also potentially need to play with the scale of the image too, to ensure it's always big enough, but I haven't tried so I'm not sure. I did mention off the top that something like that is doable, but because I was basing it on what Alvaro did, I wanted to keep the HTML the same way he had it.
And the curve arm thingies are called tangent handles. Also could you just put a border radius in the image for rounded corners? Sunce the clip path on hover isnt really for clipping its unclipping?
Edit: I'm validated! Border radius on image!😂
And does it have to be the same number of points or could you just say on hover, clip-path : none?
Has to be the same number of points, or it doesn't animate. I tried 😆
Commenting for reach
Eight commercial breaks later ...
Really? There shouldn't be that many, but I'll check my ad break thingy. YT must have got a little heavy handed on this one for some reason.
@@KevinPowell After I wrote you, I went onto a live stream and the ad service was going bonkers. Others reported similar issues with lag. Sorry to bother you, I do enjoy the CSS mastering.
Say muck one more time
muck