Create a diamond grid with CSS (with a bonus animation)
HTML-код
- Опубликовано: 31 май 2024
- Make sure to check out and heart Alvaro's original Codepen, which inspired this video! codepen.io/alvaromontoro/pen/...
🔗 Links
✅ Alvaro's Codepen: codepen.io/alvaromontoro/pen/...
✅ More of Alvaro's work: alvaromontoro.com/blog
✅ Alvaro also makes CSS-only comics! 👉 comiCSS: comicss.art/
✅ My finished version: codepen.io/kevinpowell/pen/NW...
✅ The path editor I used: yqnn.github.io/svg-path-editor/
⌚ Timestamps
00:00 - Introduction
01:16 - Creating the grid
03:20 - Offsetting the middle row
03:50 - Creating the diamond shape
08:10 - Fitting them closer together
10:40 - Animating the clip-path
17:05 - Failed attempt to keep the round corners on hover
18:35 - The z-index “hack” to keep items in front
20:42 - Making the elements fade out on hover
23:18 - Fixing the rounder corners on hover
#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!
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.
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...)
The king of CSS
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!".
Such a handy tool and a great explanation for clip-paths. I really like seeing how you think through things too. Thanks, Kevin!
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
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!
You're the man! Thanks Kevin ... always great to watch you. Learn so much from you!
Keep up the great work, Kevin! Love your channel and content!
What a gem! It looks great and I loved the explanation.
This is why i love checking out your videos, there's gotta be sth new you're gonna learn
Just discovered your channel. Awesome content. Thanks for leaving in your head scratching moments, extremely helpful to see how people think through problems!
Thank you for the vid! And for sharing the path editor! Cheers from Brasil~
Love it! Thank you Kevin!
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.
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. 😊
Leaving a comment for the sake of the algorithm. Also, great video, gonna use the setup for sure(minus hover effect)!
Such a great video!!
What a great tutorial. Thank you very much for it. 😀👍
Thanks for the tools, I really need it!
I just created the diamond clip path with rounded corners and then a square clip path with rounded corners, and it worked fine,
I would love more of these videos
Great video!
15:32 When you were moving the points, I was internally screaming OH NO THE CORNERS 😂
Great videos Sir, We want more videos like this😊
Looks good!
Grid is too powerful!
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!
You'r the best 👑, nice video!
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"!
You are SUCH a great explainer!
Thanks!
@@KevinPowell Kevin, is there a way to display text over the image when hovering over it?
You are king of the css
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 the css MASTER 🎉
Bravo 👏
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!
very cool
hello good video why didn't we use border radius and rotation properties in image boxes or did I think wrong?
thank you wizard
I'm going to try to reproduce this with hexagons!
Hexagons are the bestagons!
Great idea!
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 😊
awesome tricks
Had to leave a comment for the sake of engagement!
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.
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.
nice video
It's fun to watch you struggle and then figure it out on your own.
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
would it be possible to mirror the path horizontally and vertically in CSS and animate it?
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 :)
Cool
nice!!!!!!!!!!!!!!
I don't think you have one video that I haven't learned something from!
for the sake of engagement (actually cool videos, I learn a lot of new stuff, keep going :) )
Hey Kevin. Loved this one, but how would I make that responsive?
🔥
CSS lord
❤
For the sake of engagement it seems gap was taking up too much space, causing your border-radius not properly work.
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!
grid is indeed very handy
That z-index hack was 🔥🔥🔥
🎉
how do I use this code on elementor pro ?
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 😂
Sir path operations konse appa se kiya hai
The link is in the description 😁
There was a button "Rotate" in the tool you've used for path making. I think you could just rotate the clipping itself.
Yeah that might have been easier 😆
@@KevinPowell 😅
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.
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?
Leaving a comment for the sake of engagement!
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 we just need to see bad apple played on clip path animation
A comment for the sake of engagement
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
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
08:29 aren't your images 100px + .25rem + 100px because gap between columns?
yup, I realize that close to the end 😅
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.
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.
here, have some of my engagement
Hello Please try midjourneys hero section
Forthe skae of engagement
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.
Let's entertain the algorithm 😋
Also for the sake of engagement.
I leave a comment for the sake of Engagement 🙃
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
I'm engaged 💍 for the sake of engagement LOL 😂😂
Comment for the sake of engagement
Commenting for reach
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 😂
😂😂 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.
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.
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.
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 😆
Say muck one more time
muck
1. I don't understand that grid, how to learn it better?
2. clip-path is a cheat-code, you should try it do with rotate instead 😈
Don't want to be negative.. but man, if you first say you won't look his code until you finish and then you checkup like 10 times until you finish..
Haha, fair enough. I should have said I don't want to look if I can avoid it, but if I get stuck I'll go look for a hint 😅