CSS

There is no `anchor` attribute in HTML, it was decided CSS `anchor-name` / `position-anchor` was the way to go. But modern CSS functions can get us there anyway.

Una Kravets: Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with clip-path. […] This is where border-shape comes in. It’s a powerful upcoming CSS primitive that defines a custom shape for an element’s border. Welp, clip-path() had a good run. I’ll always be fond […]

This time we get into very smooth starts and stops for infinite animations using CSS. One of the tricks is layering on a transition on top of an animation.

We look at designing callout UI elements using CSS, incorporating leader lines and text boxes. It details setting up the HTML structure, utilizing CSS properties like offset-path and borders.

We look at a couple of ways to essentially draw a little square dot in a slightly larger area and let it repeat, giving us a nice dotted background effect.

Something like manipulating the speed of an animation isn’t a big deal, but it’s harder when the animation is *already running*. We got tricks.

I just blogged about a niche idea for View Transitions. Here are a couple more posts that specifically use the same-page style View Transitions and have a bit more practical demos:

Let’s try a fresh take on animating focus rings around a page. Flying focus, as it were. Only instead of measuring where elements are ourselves, we’ll let View Transitions figure it out.

:nth-child supports the keyword `of` in the argument which can be super useful on it’s own. Combo that with a :has() selector to do some pretty wild stuff!

If you have any shared styles across multiple shadow DOMs (imagine 20 custom button components), a Constructable Stylesheets is just way more efficient.