bring-shrubbery / squircle-js

A squircle element for your favourite frontend framework!
https://squircle.js.org
MIT License
117 stars 7 forks source link

Support for Shadows on Squircle Elements? #7

Closed morgansson closed 11 months ago

morgansson commented 12 months ago

Hello there!

Firstly, thank you for creating this plugin - it's been great to recreate the Apple-like rounded corners in my project. It really adds a touch of modern aesthetics!

I wanted to ask whether you have implemented or have plans to implement shadow support for the squircle elements? Proper shadows would really enhance the depth effect and make the UI elements pop, especially if it behaves correctly with the unique curvature of the squircle.

If this feature is already present and I've missed it, could you please point me in the right direction? If not, I'd love to know if this is in the roadmap or if you'd be open to contributions towards this feature.

Thanks in advance and keep up the great work!

Best regards, morgansson

bring-shrubbery commented 12 months ago

Great question, I didn't need shadows myself, so I didn't think about it too much.

I believe default CSS shadows will drop the regular shadows. But it might be enough since shadows are usually blurry enough to not see their actual shape.

If you need non blurry shadows I believe you could try to use another squircle with a CSS tranform: translate. It might be harder to do than it sounds since you probably need to make the shadow squircle have absolute positioning, which might break JS element size observer.

You try implementing one of these and pasting a code snippet or a codesandbox link here, so I could help you make it work :)