Show HN: Apple-like smooth corners for Tailwind CSS
1–10 of 16 posts
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#2I 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.
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#3Not 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!
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#4Is this a joke, I can't see a difference.
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#5Cool hack, can I see it in action anywhere, OP?
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#6Is this a joke, I can't see a difference.
PNG masks to achieve this effect is definitely a cure that is worse than the disease.
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#7Is this a joke, I can't see a difference.
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.
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#8Is this a joke, I can't see a difference.
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.
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#9Obligatory 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.
Re: Show HN: Apple-like smooth corners for Tailwind CSS
#10I 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.