Una 🇺🇦

@CameronFoxly This is so cool!!!

...And that means it can also be pulled into the web and made interactive with Threejs ( play with it yourself at cameronfoxly.github.io/cooking-test/)...

In the age of AI slop, some of us are still making things by hand, I promise ❤️ Octocat for the new GitHub Copilot App was modeled, rigged, and animated in Blender...

OoooOOooh! Guess what! As of Chrome 149, shape() works in shape-outside! So you can really *shape* your UI's 😉* rect() and xywh() are also supported for shape-outside in Chrome 149 *(just let me have my Mom joke)

@kostyniuk00 @bramus It's a WIP! Our engineers are working on it, and there are some open issues too.

@Una @bramus Looks magical. Any update on Grid Lanes? 👀

Really fun demo of the text-fit property in multiple directions! This feature is landing in Chrome 150, and enables you to adjust the text-size to fit the width of its containing block. One of the many new web features @bramus and I will highlight in our upcoming I/O talk next week! 😁 (though I like this demo way more than the simple one I built!)

@ui_pro @bramus All of a sudden? 👀 Have you been following along for the past 5 years my friend?

@Una @bramus CSS is shipping bangers week after week all of a sudden

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that @codebydennis and @JordanGilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from @greensock. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with @osmosupply ⏳ Total time: 96h

If elements ever shift unexpectedly by a few pixels during an animation and you can’t figure out why, try using the `will-change` CSS property. It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation

@kostyniuk00 In two weeks

@Una Looks pretty good, when do we get 149 in stable? 🥲

👀 Responsive <img> getting simpler You don't need to add "manual breakpoints" anymore Just add sizes="auto" to lazy-loaded images and the browser will figure out the appropriate size of your srcset Now in all latest browsers Screenshot: how to use as progressive enhancement

^ Shoutout to @yisibl for implementing this!

@AbelardoIT It was an external contributor! @yisibl!

@Una Thanks for bring it to us!

Can't wait to see what @ChallengesCss does with this one now 👀👀

Play with it here: codepen.io/una/pen/ogzRBWV

Container scroll-state queries let you apply styles to elements based on the container's scroll state — stuck, snapped, or scrollable👇 .section-header { ... container-type: scroll-state; container-name: sticky-hd; } @ container sticky-hd scroll-state(stuck: top) { ... } #CSS

@bzagrodzki Ooooh these are nice

Math loaders are coming to Loading UI 🔥 if you have idea for any loader, spinner or animation just let me know and I'll ship it to registry 🫡

@WallpaperKeith @github Now that everyone is used to it and it’s second nature? No

@Una @github Do you regret this now?

For what it’s worth, I’m *super* happy to rename the default branch structure of “master” to “main” and I hope we can all do this together as a community with @github leading the charge by implementing in their product moving forward 🙂

The nascent HTML-in-Canvas API is exciting to me not for flashy effects, but because it extends the semantics that the DOM can (tractably) represent — tiny example: it's possible to show an element in multiple places, cheaply, under arbitrary transforms. folkjs.org/demos/html-in-…

Great post on scroll-driven animation from the web animations master himself, @JoshWComeau joshwcomeau.com/animation/scro…