Mads Stoumann articles - 117 total
Charts in CSS
Charts have been done in CSS many times before — there's even a dedicated project. So why this post?...
Guitar Chords in CSS
In my previous article, I looked into the new, improved attr() method in CSS. I was over the moon...
Phases of the Moon in CSS
You might have heard that the humble, old attr() method in CSS just got a big update. It's only in...
How To Create Gauges in CSS
With modern CSS we can create beautiful gauges with ease. It involves a bunch of techniques, so let's...
Digital Clocks in CSS
In my previous post, I looked into clocks and watches, mimicking classic, analog watches. Now, how...
Clocks and Watches in CSS
A couple of years ago, when CSS trigonometry functions became baseline, I wrote an article about...
The Unofficial Dev.To Embed Web Component
The other day, I re-discovered the dev.to API and found out that it can be used without an API key....
Creating a Print Preview Web Component
I’m currently working on a large e-commerce project — an update to an app I coded back in 1994-1996!...
Art with CSS Grid and SVG filters
Have you ever explored the power of grid-auto-flow: dense? When combined with randomly generated...
Creating a Scroll Grid
The other day I noticed the similarities between Tailscale and MUBI — not the companies, of course,...
Can I Drive? Coding an Alcohol Tester
In Denmark, where I live, we unfortunately hold a record within Europe: our kids are the heaviest...
Designing Better Tables: Using Popovers for Extra Data
When working with large data tables, displaying all available information at once can often make the...
The Golden Ratio in CSS
The golden ratio, also called the golden number, golden proportion, or even the divine proportion, is...
CMYK, RGB, and Building a Color Visualizer
When I was a kid, I published a fanzine about comics. This was long before I had a computer—it was...
Alien Signals — 2-in-1 Challenge
This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space But it's also a...
The Periodic Table in CSS
Like the Solar System, The Periodic Table has been done in CSS a lot of times … but it has never been...
And the Oscar Goes to … Coding a Chronology Component
Earlier this year, a friend of mine shared a massive poster he had been working on for the Copenhell...
The Solar System in CSS
The Solar System has been done in CSS a lot of times — just search Codepen! So why do it...
Line Numbers for <textarea> using SVG
The other day I was working on a JSON Schema Generator, and wanted to display line numbers in a...
Build A CSS Word Search Game In ... CSS!
I've heard it so many times: CSS is not a programming language — or — why do it in CSS, when you can...
Sunday Fun: Re-creating a Radiohead cover
The other day, I read an article about how Radiohead's graphic designer, Stanley Donwood, got...
A Trip To The Beach
This is a submission for [Frontend Challenge...
La Luzerne
This is a submission for Frontend Challenge v24.04.17, CSS Art: June. Inspiration "La...
Getting Creative with CSS Grid
Grids don't have to be boring! You can easily spice up a classic 12x12 grid with very few lines of...
Wheel of Fortune with CSS
A "Wheel of Fortune" component just popped up in my feed. I always spin, but never win! Anyway, this...
Unleashing the Hidden Power of HTML Forms
HTML forms are powerful beasts, but I feel a lot of its übercool features are often...
Eurovision Gradients
So, it's that time of the year, if you live in Europe: Eurovision! It's the world's oldest and...
Animating Numbers
This tutorial will look into creating a small web component for animating numbers — and all the...
Small Tips for Styling Card Components
The other day, I stumbled upon an "About Us"-page for an agency, I used to work for. Not only were...
Fetch with AbortController
This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature. ...