Giters

codeAdrian / clay.css

Easily add claymorphic styles to any HTML element with this micro class and SASS mixin.

Home Page:https://codeadrian.github.io/clay.css/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is there any way to make the edges curved?

raquelhortab opened this issue · comments

commented

Hi! I just came across this library thanks to TLDR. I was wondering if this library just adds shadows and round corners or there is any kind of support for making the edges kind of curved, just like in the examples linked in your demo page:

Selection_136

I am currently using custom images to do that, which makes the work kind of difficult when working with different sizes. I guess it could be done with css shapes but it'd be equally painful and wouldn't be supported in all browsers. Also, if the shadow is applied as css afterwards, the shadow would be rather flat, not following the round shape of the image.

Thanks!

commented

Hi @raquelhortab , thanks for reaching out. I was looking into it and I don't think there is an elegant and efficient way to do this in CSS, as you've already concluded.

The article from the creators of Claymorphism also abandons the idea od curved edges and just goes with the standard border radius https://hype4.academy/articles/coding/how-to-create-claymorphism-using-css

Perhaps we would be able to do this in the future with CSS houdini?

Bests,
Adrian

commented

Oh I figured! Thanks anyway for the library, looks very nice :)

PS: I'm not a CSS expert so I don't kown much about CSS houdini but I do hope CSS improves and becomes more flexible in the future!

Cheers,

Raquel