Show HN: Apple-like smooth corners for Tailwind CSS(github.com)
github.com
Show HN: Apple-like smooth corners for Tailwind CSS
https://github.com/gtokman/corner-smoothing
15 comments
I already knew about the whole “mathematically perfect corners” thing Apple does, so I was super curious how someone implemented that in CSS. I figured it was some sort of new CSS feature involving splines, but then I saw there was a folder called “masks” containing PNG files at 3 resolutions and I was immediately transported back to the mid-2000s.
Especially weird since CSS actually has the clip-path property which allows polygons as masks. I think converting a curve to a polygon is still better than having a literal raster image as a mask.
> I already knew about the whole “mathematically perfect corners” thing Apple does
This https://arun.is/blog/apple-rounded-corners ?
This https://arun.is/blog/apple-rounded-corners ?
Not an Apple product user so TIL Apple's rounded corner are different than usual rounded corner using CSS. I'm going to guess this is using CSS's clip-path!
Why don't browsers default to this?
Is this a joke, I can't see a difference.
It's pretty subtle, but hard to unsee after using it a lot.
diff: https://github.com/user-attachments/assets/3edb0bbd-4989-442...
diff: https://github.com/user-attachments/assets/3edb0bbd-4989-442...
PNG masks to achieve this effect is definitely a cure that is worse than the disease.
Looks like the derivative of the angle is continuous.
When you drive around a street corner in a car, you start by turning the wheel to turn a little, then more, then less, then you drive straight again. This looks like that kind of curve.
When you drive around a street corner in a car, you start by turning the wheel to turn a little, then more, then less, then you drive straight again. This looks like that kind of curve.
Some links on this with regards to roads/tracks:
https://en.wikipedia.org/wiki/Jerk_(physics)#In_the_geometri...
https://en.wikipedia.org/wiki/Track_transition_curve
https://en.wikipedia.org/wiki/Jerk_(physics)#In_the_geometri...
https://en.wikipedia.org/wiki/Track_transition_curve
It's subtle. Zoom to the middle of the sample image and compare (the vertical part of) the curve of the two top corners. You will notice like... 5 pixels of difference, then the curve gets aliased in the smooth version. I would like to see it in an actual site though.
Obligatory video on splines: https://www.youtube.com/watch?v=jvPPXbo87ds
From what I've read, Apple rounded corners are using G^2 or G^3 geometric continuity to generate smoother curves.
It's hard to tell which smoothing function this library uses since it looks like it's based on PNG masking.
From what I've read, Apple rounded corners are using G^2 or G^3 geometric continuity to generate smoother curves.
It's hard to tell which smoothing function this library uses since it looks like it's based on PNG masking.
Cool hack, can I see it in action anywhere, OP?
Our website: https://candle.fi !
Looks like it doesn't work on firefox.
Cool plugin idea though!
Cool plugin idea though!