Blog Post Articles

The last part of this series is taking our site that we’ve got in GitHub and addng an Astro build process to it, then mapping a domain we own to the Netlify-hosted site.

It’s pretty straightforward to animate list items into new positions, but there is a few tricks when the specific one you’ve chosen to move needs a *different* transition.

The `satisfies` keyword allows you to assert that a certain value “satisfies” a given type, while preventing a wider type from being inferred.

You’ve got A LOT of control over the design of select menus now, and it can be done as a progressive enhancement.

A deep dive into producing an interpolated “gradient” of colors from just two provided colors.

:has() makes quantities queries both easier and more powerful. We can alter how a grid is laid out and where the children go. Or, we can just blast it into a carousel.

The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.

After you’ve got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.

We’ve got @scope in CSS now, and it’s got it’s uses. But the concept of scope in CSS is a wider idea.

This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.