News for hackers. Stuff that matters.
Re:The World of CSS Transforms by divbzero on Monday August 09, 2021 @01:55PM (#28120013)
Noteworthy tidbit about percent values:

There's one thing that makes translate ridiculously powerful, though. Something totally unique in the CSS language.

When we use a percentage value in translate, that percentage refers to the element's own size, not the available space within the parent container.

Re:The World of CSS Transforms by brundolf on Monday August 09, 2021 @02:13PM (#28120206)
It's unique because in any other context, defining an element's size in terms of its size would be circular. But the transform property works differently: the rendered size is independent from the element's "real" DOM size. This can be seen in the fact that transform doesn't change the flow of the document at all; there's an invisible placeholder element that's still taking up the same space, and only its visual representation is changed. So the latter can be derived from the former without a circular effect. This is also the reason browsers can offload the transform property to the GPU.

Something I love to do with this is create "squishy" buttons that transform:scale(0.9) when under the :active pseudo-class (with a short transition set up for smooth animation). It's extra satisfying on touchscreens.

Re:The World of CSS Transforms by jeffreyq on Tuesday August 10, 2021 @08:33AM (#28128012)
The first time I've stepped out of the shadows as a lurker just to +1 your comment on "squishy" buttons. I recently saw this technique used on matcha.xyz/blog and I must say I am also a big fan.
Re:The World of CSS Transforms by tintt on Monday August 09, 2021 @02:17PM (#28120261)
Nice, didn’t know that one