Technical coding question - General Layout

[ellacoker]

Hello,

I have quite a technical question regarding coding for a specific store that I am creating. I am wanting the lines to be really soft and kind of wavy throughout, please find attached the inspiration for what I am trying to create. Would anyone have any code on making the lines for the image banner and collection like this? I also love if you could tap on the drawer, and for the list to come out kind of like a wave shape (see photo for reference). Quite a hard one. Thank you.

Ella.

URL: https://shopnirjara.myshopify.com/

PW: ellaella

[sizzlecentral]

Hey Ella,

Cool design! With the css box model it can be tricky to achieve designs like this. I think you need a combination of svgs tacked on to existing elements as well as css masks based on svgs to make it work.

For the drawer I would probably add an svg as an "after" pseudo element, stretching the full height of the screen. For things like the hero banner or product cards, I would probably use an svg shape as a css mask, letting the image show through but with the wavy edges.

Good luck with it! Nice to see something different. It will take some work, but should be worth the effort if done right.

Don

[ellacoker]

Hello Don,

Thank you so much for responding. I am currently working on this and do have a question... I have used an svg and applied it as a mask, but I have two issues. It is way too short, and also the svg is also showing underneath my banner for some reason? Please see screenshots, do you have any suggestions for the code? Thank you. Ella.

URL: https://shopnirjara.myshopify.com/

PW: ellaella

[sizzlecentral]

Hi Ella,

Without spending some time on it it's hard to say exactly what the issue is, but the fact that your image is showing the wavy edge is a good sign. It seems like you're on the right track, so I think if you keep at it you'll get it. Feel free to contact me if you end up needing professional help.

Good luck!

D