Damn, anchor positioning works so good. It was on my list of things to try for some time. So I remade my toggle button group with it: codepen.io/simoncoudevi... Something like this? The inverted corners remain a mystery though.
Thanks. Very interesting.
That's really cool. But how?
Been playing around with the row-rule and column-rule properties on a grid container. I wonder why I need a gap to make them work as they don't take in any space. So for a row- and column-rule of e.g. 10px I need to to set the gap to at least 0.01px. codepen.io/simoncoudevi...
For years (decades even), my go to trick to center an element horizontaly was to use margin: 0 auto; or a variation of that. I just learned that the same thing can be achieved by using justify-self: center; No flexbox or grid required on the parent, just that. 🤯
Just published a new blog post on how to create a custom cursor that reacts to hover and active states using the :has pseudo-class. Check it out here: simoncoudeville.be/blog/custom-...
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.
Wow, interesting. Indeed very complicated. Have you seen it online somewhere? He shows a codepen but I can't seem to find it.
🙋♂️ I just recently started blogging on simoncoudeville.be. I do mean to write on a regular basis.
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...
Oh right, forgot about those. That's a good idea. Glad you like it and thanks for reading.
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)
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
