7 ms·
Show HN: Apple-like smooth corners for Tailwind CSS
- Uehreka 2y agoI 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 2y agoEspecially 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.
- Alifatisk 2y ago> I already knew about the whole “mathematically perfect corners” thing Apple does This https://arun.is/blog/apple-rounded-corners https://arun.is/blog/apple-rounded-corners ?
- burgerrito 2y agoNot 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!
- _aleph2c_ 2y agoIs this a joke, I can't see a difference.
- baggy_trough 2y agoPNG masks to achieve this effect is definitely a cure that is worse than the disease.
- phoronixrly 2y agoIt'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.
- Arnt 2y agoLooks 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.
- echoangle 2y agoSome links on this with regards to roads/tracks: https://en.wikipedia.org/wiki/Jerk_(physics)#In_the_geometric_design_of_roads_and_tracks https://en.wikipedia.org/wiki/Jerk_(physics)#In_the_geometri... https://en.wikipedia.org/wiki/Track_transition_curve https://en.wikipedia.org/wiki/Track_transition_curve
- instagary 2y agoIt's pretty subtle, but hard to unsee after using it a lot. diff: https://github.com/user-attachments/assets/3edb0bbd-4989-442a-ac77-13ef5f2b9715 https://github.com/user-attachments/assets/3edb0bbd-4989-442...
- phoronixrly 2y agoCool hack, can I see it in action anywhere, OP?
- weswilson 2y agoObligatory video on splines: https://www.youtube.com/watch?v=jvPPXbo87ds 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.
- silverwind 2y agoWhy don't browsers default to this?