Create a diamond grid with CSS (with a bonus animation)

Рет қаралды 45,324

Күн бұрын

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 KZfaq 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!

Пікірлер: 143

@JeffWorthington 2 ай бұрын

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.

@FlorinPop 2 ай бұрын

The king of CSS

@vontower 2 ай бұрын

for the sake of engagement

@maidnuu 2 ай бұрын

Congrats on the engagement!

@kylevandeusen 2 ай бұрын

@IceMetalPunk 2 ай бұрын

@@maidnuu What is this, Shayne and Courtney Topp? 😁 (I assume there's enough internet overlap that other people get the reference...)

@Nusamaxa 2 ай бұрын

I just love how you struggle and then find the solutions and reasons for that struggle. Thanks for explainng everything in an understanding way ✌😊

@mrmibes 2 ай бұрын

Such a handy tool and a great explanation for clip-paths. I really like seeing how you think through things too. Thanks, Kevin!

@seba9260 2 ай бұрын

love seeing your thought-process. thanks!

@joppekoops 2 ай бұрын

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

@nathanwatts76 2 ай бұрын

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!".

@SuikerBossie 2 ай бұрын

You're the man! Thanks Kevin ... always great to watch you. Learn so much from you!

@SlinkyCollins 2 ай бұрын

This is why i love checking out your videos, there's gotta be sth new you're gonna learn

@DavidWatts 2 ай бұрын

What a gem! It looks great and I loved the explanation.

@purringdemon 2 ай бұрын

Keep up the great work, Kevin! Love your channel and content!

@LouieSonugan21 2 ай бұрын

Love it! Thank you Kevin!

@LokiDaFerret 2 ай бұрын

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.

@ajoykrdas 2 ай бұрын

Grid is too powerful!

@GuilhermeGomes-rd8zm 2 ай бұрын

Thank you for the vid! And for sharing the path editor! Cheers from Brasil~

@Patrick33456 2 ай бұрын

Just discovered your channel. Awesome content. Thanks for leaving in your head scratching moments, extremely helpful to see how people think through problems!

@Rapand 2 ай бұрын

Leaving a comment for the sake of the algorithm. Also, great video, gonna use the setup for sure(minus hover effect)!

@jps9355 2 ай бұрын

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

@farhan-app 2 ай бұрын

Such a great video!!

@user-kb9xf9lb2j Ай бұрын

You are king of the css

@cedwards1080 Ай бұрын

Great video!

@codetheworld6721 23 күн бұрын

Awesome ❤

@drewkillion2812 2 ай бұрын

I would love more of these videos

@wildandiamond 2 ай бұрын

Thanks for the tools, I really need it!

@skreepatch2473 2 ай бұрын

Looks good!

@shortyshorty9762 2 ай бұрын

What a great tutorial. Thank you very much for it. 😀👍

@amirmekaiten2784 2 ай бұрын

Had to leave a comment for the sake of engagement!

@aliampichelmilan3345 2 ай бұрын

You'r the best 👑, nice video!

@thevhejalltd8716 2 ай бұрын

Great videos Sir, We want more videos like this😊

@penguinxed 2 ай бұрын

grid is indeed very handy

@fadi_mousa 2 ай бұрын

You are the css MASTER 🎉

@Atlas_Steorra 2 ай бұрын

Bravo 👏

@arunsp767 2 ай бұрын

15:32 When you were moving the points, I was internally screaming OH NO THE CORNERS 😂

@mr_nesram 2 ай бұрын

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"!

@carolmckay5152 2 ай бұрын

You are SUCH a great explainer!

@KevinPowell 2 ай бұрын

Thanks!

@LagrangePoint0 2 ай бұрын

@@KevinPowell Kevin, is there a way to display text over the image when hovering over it?

@alph0n5e_YT 2 ай бұрын

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!

@kill_switch_101 2 ай бұрын

very cool

@iamreg1965 2 ай бұрын

I just created the diamond clip path with rounded corners and then a square clip path with rounded corners, and it worked fine,

@offgarde23 2 ай бұрын

thank you wizard

@eccenux 2 ай бұрын

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 😊

@EricFressange 2 ай бұрын

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.

@KOBE42__ 2 ай бұрын

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?

@KevinPowell 2 ай бұрын

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

@KOBE42__ 2 ай бұрын

@@KevinPowellAhhhh right yeah that makes complete sense now! Thank you

@nucleartux 2 ай бұрын

awesome tricks

@umairmughal6955 2 ай бұрын

It's fun to watch you struggle and then figure it out on your own.

@CatalinCalestru 2 ай бұрын

for the sake of engagement (actually cool videos, I learn a lot of new stuff, keep going :) )

@hameeeed5992 Ай бұрын

nice video

@Diamonddrake 2 ай бұрын

I'm going to try to reproduce this with hexagons!

@_whiteDemon 2 ай бұрын

Hexagons are the bestagons!

@albedesigns 2 ай бұрын

Great idea!

@AJ-vy4yu 2 ай бұрын

A comment for the sake of engagement

@albedesigns 2 ай бұрын

I don't think you have one video that I haven't learned something from!

@Cassandra81552 2 ай бұрын

CSS lord

@nurikbk99 2 ай бұрын

🔥

@tithos 2 ай бұрын

Cool

@kuraudotienda 2 ай бұрын

That z-index hack was 🔥🔥🔥

@_whiteDemon 2 ай бұрын

Much to learn here, but I'm still curious how border-radius and other border properties work when using custom paths

@albedesigns 2 ай бұрын

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!

@pablorey9203 2 ай бұрын

nice!!!!!!!!!!!!!!

@soymuymuy 2 ай бұрын

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

@maidnuu 2 ай бұрын

Thank you, that's exactly what I've been thinking!

@KevinPowell 2 ай бұрын

Oh, yeah that would work as well! Bit cleaner too, since you don't need to set up some keyframes.

@seankennedy7970 2 ай бұрын

Love this, need to find somewhere to use it. But will need to make it responsive.

@albedesigns 2 ай бұрын

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!

@sebastian5855 Ай бұрын

@@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 :)

@charlsey Ай бұрын

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.

@schwetang Ай бұрын

Hey Kevin. Loved this one, but how would I make that responsive?

@peterbk364 2 ай бұрын

❤

@felixjimenezgonzalez9292 2 ай бұрын

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?

@cspjdbh 2 ай бұрын

Leaving a comment for the sake of engagement!

@tolgabeyazoglu536 Ай бұрын

hello good video why didn't we use border radius and rotation properties in image boxes or did I think wrong?

@deadlyecho 2 ай бұрын

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 😂

@inanutshell6533 2 ай бұрын

🎉

@deatho0ne587 2 ай бұрын

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.

@KevinPowell 2 ай бұрын

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.

@tinongnjong1305 2 ай бұрын

For the sake of engagement it seems gap was taking up too much space, causing your border-radius not properly work.

@zhexymusic 2 ай бұрын

There was a button "Rotate" in the tool you've used for path making. I think you could just rotate the clipping itself.

@KevinPowell 2 ай бұрын

Yeah that might have been easier 😆

@zhexymusic 2 ай бұрын

@@KevinPowell 😅

@flaviomauri 2 ай бұрын

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

@juanamorocho8521 2 ай бұрын

would it be possible to mirror the path horizontally and vertically in CSS and animate it?

@heavylog1c 2 ай бұрын

Now I wonder if I can do this with rotate and border-radius.

@KevinPowell 2 ай бұрын

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.

@mycode0 2 ай бұрын

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

@KevinPowell 2 ай бұрын

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 😅

@mycode0 2 ай бұрын

@@KevinPowell Also saw a Quiz app made with only html css and it checks how many questions you have answered correctly madness

@Trafalgar8Law 2 ай бұрын

here, have some of my engagement

@JananaYatharuth 2 ай бұрын

Now we just need to see bad apple played on clip path animation

@meraj5393 2 ай бұрын

Forthe skae of engagement

@AISHAISHWARYA 2 ай бұрын

Sir path operations konse appa se kiya hai

@KevinPowell 2 ай бұрын

The link is in the description 😁

@FeBe95 2 ай бұрын

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?

@KevinPowell 2 ай бұрын

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%

@FeBe95 2 ай бұрын

@@KevinPowellOkay, that worked. I had to set it to 200% though (since they are overflowing their grid cell). Thanks!

@rutikrathod2435 2 ай бұрын

Hello Please try midjourneys hero section

@RandomGeometryDashStuff 2 ай бұрын

08:29 aren't your images 100px + .25rem + 100px because gap between columns?

@KevinPowell 2 ай бұрын

yup, I realize that close to the end 😅

@Stoney_Eagle 2 ай бұрын

Let's entertain the algorithm 😋

@clevermissfox 2 ай бұрын

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?

@KevinPowell 2 ай бұрын

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 🤔

@clevermissfox 2 ай бұрын

@@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?

@01Bluedragon 2 ай бұрын

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

@arctictern360 Ай бұрын

how do I use this code on elementor pro ?

@beanie-bosh 2 ай бұрын

Anyone else experiencing an audio sync issue? Great video!

@KevinPowell 2 ай бұрын

I didn't notice any, and just double checked... but glad you liked the video regardless!

@beanie-bosh 2 ай бұрын

@@KevinPowell just my Firestick it looks like. Thanks.

@MyDpop 2 ай бұрын

I leave a comment for the sake of Engagement 🙃

@SeanHoltWebDesigner 2 ай бұрын

Also for the sake of engagement.

@RandomGeometryDashStuff 2 ай бұрын

21:42 but everything also get darker when hover between images

@KevinPowell 2 ай бұрын

If I use `:has()` it wouldn't. Because I'm doing it for the hover on the entire parent, then it does.

@TheCurz 2 ай бұрын

I'm engaged 💍 for the sake of engagement LOL 😂😂

@joesjoberg7417 2 ай бұрын

Comment for the sake of engagement

@deadlyecho 2 ай бұрын

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 😂

@dave6012 2 ай бұрын

Commenting for reach

@ryzzlas 2 ай бұрын

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.

@KevinPowell 2 ай бұрын

I feel that

@handleman18 2 ай бұрын

😂😂 for sake of engagement

@PietervandenHombergh 2 ай бұрын

you might have to rotate the path.

@clevermissfox 2 ай бұрын

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 2 ай бұрын

Has to be the same number of points, or it doesn't animate. I tried 😆

@I-Broke-Your-Mailbox 2 ай бұрын

God I just learnt so much in one video.

@conceptrat 2 ай бұрын

Couldn't you have just drawn a square then rotated it and finally rounded the corners?

@KevinPowell 2 ай бұрын

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.

@alabamacajun7791 2 ай бұрын

Eight commercial breaks later ...

@KevinPowell 2 ай бұрын

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.

@alabamacajun7791 2 ай бұрын

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