Mimo Duo
KPCKevin Powell - Community
•Created by kingtigerknight on 12/2/2023 in #front-end
How do I create this horizontal scroll while stopping the user from scrolling pass?
Heya! If I were gonna do it I would make a container with a height equal to a few times the window height, make the grid of cards position sticky at the top, then css translate the grid based on a JS calculation that takes the scroll distance from the top of the component to the end into account!
5 replies
KPCKevin Powell - Community
•Created by bunlock on 11/25/2023 in #front-end
How to make cut corners borders with a transparent background ?
Oh boi what a thread! Just dropping this and bouncing, with clip-path you can create a polygon in the shape of a thick border on one element rather than simply clipping two backgrounds / having two separate elements with clip path that clip only the corners. So imagine plotting points on a square, the last point meets the first but then you plot backwards on the inner part of the circle to the beginning. That'll make a polygon in the shape of a thiiqqq outlined square! But luckily you escaped so goodbye!
23 replies
KPCKevin Powell - Community
•Created by sudoTesla(He/Him) on 11/25/2023 in #front-end
Help creating a generic overlapping grid rule.
Heya! The other way is for the parent to have grid-template-areas: "whatevername"; and each child can have grid-area: wahtevername; The benefit to this approach is you avoid magic numbers (1/1). And by naming them the intention of your CSS becomes more clear!
5 replies
KPCKevin Powell - Community
•Created by stealthy on 11/20/2023 in #front-end
Guidance To UI Design
Very late but yup!
30 replies
KPCKevin Powell - Community
•Created by stealthy on 11/20/2023 in #front-end
Guidance To UI Design
Tons of ways to do it! I always try to leverage CSS over JavaScript.
30 replies
KPCKevin Powell - Community
•Created by stealthy on 11/20/2023 in #front-end
Guidance To UI Design
I would have the right side be position: sticky / display grid / grid template areas "stack" with each child grid area stack, when the numbered section is active and in view, id apply a class to that section and the matching right hand section. Then id change scale/opacity of each icon on the right side!
30 replies
KPCKevin Powell - Community
•Created by stealthy on 11/20/2023 in #front-end
Guidance To UI Design
Niceee!! That looks sweet! If you wanna go further you could change the html to be more semantic by converting it to an ordered list 😉
30 replies
KPCKevin Powell - Community
•Created by stealthy on 11/20/2023 in #front-end
Guidance To UI Design
Heya stealthy! Rather than having two separate grid containers, you could have one where each row contains a circle and the content. The grid columns could be width of largest circle / 1fr. On each row with overflow hidden, except the last, you could have a green line going down to the next item that would touch the next circle ;9
30 replies
KPCKevin Powell - Community
•Created by Quest o()xx[{:::::::::::::::> on 11/9/2023 in #front-end
How to make <div> fit image width
Poifecttt glad it worked and hellll yeaa Berserk is awesome 😉 Good luck on the rest of your project!
4 replies
KPCKevin Powell - Community
•Created by Quest o()xx[{:::::::::::::::> on 11/9/2023 in #front-end
How to make <div> fit image width
Heya Guys (Hopefully a Bezerk lover)! The way you've built it out, the image will always be 90% width of the div. Put width: 100% onto the image and now the image will be the same width as the parent div. To get a space between each image you can use the "gap" property where you apply display flex which is a shorthand for "column-gap" and "row-gap". This is standard for any kind of grid where you want space between each item ;9 Hope that helps!
4 replies