WingNews logo WingNews
top | item 42824608

Show HN: Apple-like smooth corners for Tailwind CSS

33 points| instagary | 1 year ago |github.com

15 comments

order

Uehreka|1 year ago

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.

echoangle|1 year ago

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.

burgerrito|1 year ago

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!

silverwind|1 year ago

Why don't browsers default to this?

_aleph2c_|1 year ago

Is this a joke, I can't see a difference.

baggy_trough|1 year ago

PNG masks to achieve this effect is definitely a cure that is worse than the disease.

Arnt|1 year ago

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.

phoronixrly|1 year ago

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.

weswilson|1 year ago

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.