Simon Coudeville
@simoncoudeville.bsky.social
Designer and frontend developer. I teach design and frontend development at Howest University, Belgium. I have a blog now: https://simoncoudeville.be/. I share demo's on https://codepen.io/simoncoudeville
Full write-up on the techniques from the CodePen demo I shared earlier 👉 simoncoudeville.be/blog/aligning-images-to-a-baseline-grid-with-modern-css/
Aligning images to a baseline grid with modern CSS - Simon Coudeville
Snapping images to a baseline grid used to require JavaScript. With container queries, advanced attr() and round(), it can now be done in pure CSS.
simoncoudeville.be
I found a way to align images on a baseline grid with CSS. It involves a container query for the width, typed attr() for the aspect ratio, and round() to snap the height to the baseline. Pure CSS, no JS. It's quite satisfying to see it snap: codepen.io/simoncoudevi...
Aligning images on a baseline grid with CSS
...
codepen.io
I made a rotation aware drop-shadow with sin() and cos(). CSS calculates the drop-shadow x and y offset based on a single css variable for the angle. codepen.io/simoncoudevi...
Rotation aware drop-shadow with sin() and cos()
...
codepen.io
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...
Quick gap decoration test
...
codepen.io
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-...
Custom cursor interactions with :has - Simon Coudeville
How to create a custom cursor that reacts to hover and active states using the :has pseudo-class and CSS custom properties.
simoncoudeville.be
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.
view-transition moving toggle button
...
codepen.io
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...
A CSS-only fluid typography approach - Simon Coudeville
A look at how to implement fluid typography with no external dependencies. Only CSS variables, calc() and clamp().
simoncoudeville.be
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...
A CSS-only fluid typography approach - Simon Coudeville
A look at how to implement fluid typography with no external dependencies. Only CSS variables, calc() and clamp().
simoncoudeville.be
So I finally have a blog. You can read why it took so long here: simoncoudeville.be/blog/hello-w...
A Long Overdue Hello World - Simon Coudeville
This is my first ever blog post on my personal blog.
simoncoudeville.be
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)
Pure CSS squircle
...
codepen.io
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...
The Gap Strikes Back: Now Stylable | CSS-Tricks
Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet a...
css-tricks.com
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.
Joe Lanman@joelanman.com · last yr.wooahh Figma's new Sites thing produces no semantic HTML at all. Every single element is a div. Incredibly inaccessible Example: plugin-value-scrum.figma.site
Neat: Generate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙 easingwizard.com
Easing Wizard - CSS Easing Editor and Generator
Generate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙
easingwizard.com
