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

Make sure to check out and heart Alvaro’s original Codepen, which inspired this video! 🔗 Links ✅ Alvaro’s Codepen: ✅ More of Alvaro’s work: ✅ Alvaro also makes CSS-only comics! 👉 comiCSS: ✅ My finished version: ✅ The path editor I used: ⌚ 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 f ... #KevinPowell #Kevin_Powell #css #front-end #frontend #html #web_development #css_tutorial #tutorial 20240404 A5GXdjEOvos