I'm not sure what the correct term is for a moving background toggle button group thing. But I made one with view-transition: codepen.io/simoncoudevi.... It's a bit tricky to get right but still a lot easier to make the thing move to the right place with the right width.

Apparently we live in the future now. With the latest versions of Chrome it's now possible to use CSS functions. This means you can define a function that encapsulates the fluid typography calculation. I updated my article and added another demo: simoncoudeville.be/blog/a-css-o...

In my first real blog post I wrote about applying fluid typography without generators or build tools. Just CSS variables, calc() and clamp(). simoncoudeville.be/blog/a-css-o...

So I finally have a blog. You can read why it took so long here: simoncoudeville.be/blog/hello-w...

Pure CSS squircles with corner-shape: superellipse(). codepen.io/simoncoudevi.... Check it out in Chrome or Edge because it's not baseline yet. (Even the preview can't render it yet, but it's a good fallback for now)

CSS random() 🥹: webkit.org/blog/17285/r...

I've been experimenting with Figma's Dev Mode MCP Server and Github Copilot in VS Code. It's the first time I find It's actually useful. It doesn't just take guesses at the whitepace, color, font-sizes and so on, it can actually get it from the design file's data.

Cool! Gap decorations are now possible by extending the column-rule property. css-tricks.com/the-gap-stri...

I needed a dotted world map illustration. None of the ones I found fitted my needs. Because I wanted all the dots to be on a pixel perfect grid I ended up drawing, moving and removing a lot of dots myself. My eyes still hurt. That's the kind of thing I expect AI to do for me...

Using <div> everywhere is the same as naming every object in the world "thing".

We use words like "bike", "plant", and "table" because they give meaning to what you are talking about.

The same applies to HTML: If you show a heading then it should be a heading and not a "thing" that looks like one.

Neat: Generate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙 easingwizard.com