ideas on creating this design?
it basically caught my eye and i wanted to challenge myself in doing something like this, i decided the feature of grid along with subgrid would be the easiest and probably the most solid option,
any tips and tricks on how youd create this? i know it's a bit advanced design but i just found it challenging enough and overall fun way of learning the overlapping feature along with bunch of others such as the subgrid that the display: grid offers. am i going the right direction? thank you https://codepen.io/thecubiq/pen/oNmOvWo?editors=1100 orig: https://www.behance.net/gallery/186093715/4-Steps-Infographics-Design
any tips and tricks on how youd create this? i know it's a bit advanced design but i just found it challenging enough and overall fun way of learning the overlapping feature along with bunch of others such as the subgrid that the display: grid offers. am i going the right direction? thank you https://codepen.io/thecubiq/pen/oNmOvWo?editors=1100 orig: https://www.behance.net/gallery/186093715/4-Steps-Infographics-Design
15 Replies
svg path with dasharray will probably be like 100 times easier to work with id say
how do i properly offset it by -1.5em from all sides?
the first cell is shorter intentionally btw
oh, right, fixed it, i had width for all items in the subgrid set as 100%. by setting it to auto, i could have just set inset to it and it worked :)
awesome
awesome
works flawlessly
this is seriously awesome š
just testing the actual connections by removing the line cap and the responsiveness works so well
update, extremely cool xd
Can you share your project ? This is very cool and Iām not understanding the elements you used to achieve this
its up there :) i didn't feel like creating new project so i mostly continued on this one xd
and i didn't really care that much about browser compatibility, this is clearly just desktop chromium/firefox compatible, i have no idea why it doesn't work on my mobile
Ahh i see now, the dotted border and clip-path ! very clever! isnt grid great? if you havent you should watch KPs vid on using grid to replace containers. It makes sense to me and has some tips about line-naming conventions that are helpful. https://youtu.be/c13gpBrnGEw?feature=shared
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts ā https://smolcss.dev/#smol-breakout-grid ā I had an idea of how we could do this to completely drop the idea of containers, and then...
Great job grinding and figuring this out! I'll have to take a look at your codepen and see how you got this working because I have no idea how to do this š
literally ive watched all of them whilst doing it :D