Sign in

Nils Binder

@ichimnetz.com
853 followers 93 following 90 posts

Frontend Designer @ 9elements.com • Co organizer @css.cafe • Also, I'm an origami enthusiast spending hours folding paper • He/Him.

PostsRepliesMedia
Nils Binder @ichimnetz.com · 29/06/2026
I used to do Latin American dancing. Paying for coaches and clothing. It was maybe about 200-300€/month. Every now and then I do origami (it comes in phases). Buying books and paper is at 200€/year maybe.
010
Nils Binder @ichimnetz.com · 14/06/2026
Everyone turning … 30 … should have a decent gadget to place their wine glass. 😆
010
Nils Binder @ichimnetz.com · 14/06/2026
Got back from #CSSday. Apart from the great talks I had a wonderful time. I was being proposed to by @joshtumath.uk with a beer can, had very important discussions about soft hands, numbers of duvets, crochet and cross-stitch and many more. Very happy to be part of this lovely community.
Two men laughing at a conference. One kneels on the floor in a playful proposal pose, holding up a can of beer toward the other, who stands by a wall covered in posters and project notes.
260
Nils Binder @ichimnetz.com · 14/06/2026
Big thanks to @cydstumpel.nl for the photo
030
Nils Binder @ichimnetz.com · 14/06/2026
A few of you asked for the pattern for the wine-glass cozy I wore at #CSSday. My crochet-pattern debut — here it is! Have fun with it, and I'd love to see your results if you make one. 🧶 schick.link/pattern @utilitybend.com @lea.verou.me @kevinpowell.co @sjoy.lol @ohhelloana.blog
Me at CSS Day holding up a wine glass nestled in a red and green striped crocheted cozy, worn on a cord around the neck so the glass hangs hands-free.
2276
Nils Binder @ichimnetz.com · 11/06/2026
Arrived at #CSSDay. We brought a bunch of stickers … make sure to ask some of the 9elements guys for “Javer Skirpt”
Name badge reading “Nils Binder” on top of css related stickers. A coffee table with a bunch of css related stickers and a bouquet of flowers. 9elements rollup in the background.
051
Nils Binder @ichimnetz.com · 10/06/2026
Yeah more important than a laptop. At least more useful.
100
Nils Binder @ichimnetz.com · 10/06/2026
Couldn’t agree more. Looking forward to seeing you again. Let’s hope we’ll make it without any fire alarm this time.
110
Nils Binder @ichimnetz.com · 10/06/2026
Yeahhh. Looking forward to seeing you again.
010
Reposted by Nils Binder
Niki @nikitonsky.mastodon.online.ap.brid.gy · 09/06/2026
You’re welcome
File menu on Tahoe with an icon for each menu itemFile menu on Golden Gate has only 4 icons
5454
Reposted by Nils Binder
Kevin Powell @kevinpowell.co · 04/06/2026
If you're in/around Amsterdam but can't make it to CSS Day, I also plan to be at the @css.cafe event that takes place the day after if you want to get a chance to hang out a bit 😊
2143
Reposted by Nils Binder
CSS Café @css.cafe · 02/06/2026
Our favourite conference of the year is back: CSS Day ✨ CSS legends, browser engineers, and web platform experts sharing talks on modern CSS, accessibility, design systems, browser internals, and much more. cssday.nl See you next week in Amsterdam? ☕️
cssday.nl
CSS Day 2026, 11th & 12th of June, Amsterdam
CSS Day is the conference for CSS designers, developers, spec writers, and browser vendors.
3238
Nils Binder @ichimnetz.com · 18/05/2026
I was happy, that i found a solution for the image, that works without calc-size. You need to know the dimensions though, which is not a big issue in my daily workflow.
000
Nils Binder @ichimnetz.com · 18/05/2026
Ahhh, I also did a baseline grid example codepen.io/enbee81/pen/...
codepen.io
fluid-fixed-type-system using round()
...
110
Nils Binder @ichimnetz.com · 18/05/2026
Thanks for the amazing article! I've wanted to write about round() for quite some time now myself — you beat me to it. At least I can share the examples I had prepared: Non distorted border-Image tiles: codepen.io/enbee81/pen/... Char-decoration for monospace fonts: codepen.io/enbee81/pen/...
codepen.io
rounded border
...
110
Reposted by Nils Binder
Matthias Ott @matthiasott.com · 28/04/2026
Found the #CSS table with @ichimnetz.com, @utilitybend.com, and @bram.us at #btconf! 🙌
A table with Nils Binder, Brecht de Ruyte, Bramus van Damme, and Matthias Ott - all smiling of course
2233
Nils Binder @ichimnetz.com · 17/04/2026
We call it “DuBi” short for Dusch-Bier where Dusche means shower and well Bier is Beer.
120
Nils Binder @ichimnetz.com · 27/03/2026
Wow thanks. One more day off. Wanna come over for a coffee? I guess I can manage to bake a cake as well.
110
Nils Binder @ichimnetz.com · 27/03/2026
After thinking it through, I’d vote for 100px across all elements. It reminds me of how line-height behaves—set it to 1.5em and that computed value flows down to children. Not a perfect analogy, but it aligns with what feels intuitive.
010
Nils Binder @ichimnetz.com · 24/03/2026
Ever wanted to get rid of “widows” in the last row of your auto-generated grid? I found a solution with modern CSS. We do need to know the child count though. @kevinpowell.co I actually came up with this after you asked about use-cases for child-count. codepen.io/enbee81/pen/...
codepen.io
Widow-Killer Auto-Grid
...
270
Reposted by Nils Binder
Matthias Ott @matthiasott.com · 21/03/2026
✍️ New post: The Shape of Friction I wrote a short blog post reply to @davatron5000.bsky.social’s recent post (👏) about generative AI, friction, and people. matthiasott.com/notes/the-sh...
matthiasott.com
The Shape of Friction · Matthias Ott
Web design engineer, UX designer, teacher, and speaker – helping teams build websites and digital products with a focus on CSS, accessibility, and performance.
49128
Nils Binder @ichimnetz.com · 19/03/2026
Also related to sliders. If you want to place them on a 3d hexagon or octagon or whatever depending on the child count you need to know how many items there are to get the correct angle for the transforms.
010
Nils Binder @ichimnetz.com · 19/03/2026
In a css carousel it’s hard to get the width of the scroll marker group. The scroll markers don’t really “live” inside the group. So when know the number of children you can give it a fixed width placing the scroll buttons next to it.
010
Nils Binder @ichimnetz.com · 19/03/2026
Parts of your “design” are more accessible at least… not sure about the hidden history though
000
Nils Binder @ichimnetz.com · 19/03/2026
“We made the buttons on the screen look so good you'll want to lick them.” Steve Jobs
120
Nils Binder @ichimnetz.com · 16/03/2026
Could you maybe also use the calculated hypot value (using 100cqi and 100cqb) and divide it by 1px? Support seems to be similar to scroll animations. caniuse.com/mdn-css_type...
caniuse.com
types: `calc()`: Divisions between typed values produce unitless number ("typed arithmetic") | Can I use... Support tables for HTML5, CSS3, etc
100
Nils Binder @ichimnetz.com · 16/03/2026
Looking forward to it. I didn’t look too much into how you calculated the length and what all the keyframe animations do. So will definitely read it.
121
Nils Binder @ichimnetz.com · 16/03/2026
I was quite proud of this solution that uses scroll driven animations for the sticky headers. But having a native solution would be even better of course codepen.io/enbee81/pen/... +1 for the need to have a way to detect support so previous solutions don’t break.
codepen.io
Timetable | 03b
...
010
Nils Binder @ichimnetz.com · 16/03/2026
And I also have to mention @kevinpowell.co’s video that also helped me understand all this: youtu.be/Y-3tPDZCk2o?...
youtu.be
CSS is too powerful now
YouTube video by Kevin Powell
020
Nils Binder @ichimnetz.com · 16/03/2026
Here’s the original pen by @css-only.dev that helped me do this: codepen.io/t_afif/pen/Y...
codepen.io
Graph Theory (Chrome-only)
https://css-tip.com/graph-theory/...
010
Nils Binder @ichimnetz.com · 16/03/2026
After finally understanding @css-only.dev's demo for calculating the shortest paths between points, I was able to create this little spotlight effect. Pretty happy with the result! codepen.io/enbee81/deta...
codepen.io
anchor ray 3 spotlights - final
This would not have been possible without seeing Temani Afif’s mind-blowing CSS-only graph theory. https://codepen.io/t_afif/pen/YPWMmOP...
45613
Nils Binder @ichimnetz.com · 28/11/2025
Thanks for including my little article 🥰
120
Nils Binder @ichimnetz.com · 27/11/2025
🥰
020
Nils Binder @ichimnetz.com · 18/11/2025
@bell.bz They dressed up. They put on their best little chili hat. It’s almost Christmas — they’re basically festive now — and you’re still pretending they don’t exist. Brutal.
Icon of Notion’s AI agent with a small red chili pepper hat.
000
Nils Binder @ichimnetz.com · 17/11/2025
A bit more niche, but next to fancy things like scroll-driven animations, CSS also introduced new math functions like round() and mod(). With them, you can take a time value like 1045 (without the colon) and calculate the minutes passed since midnight. bsky.app/profile/ichi...
.session {
  /* Starting time 10:45 written without : */
  --start: 1045;
  /* Extract the hour part with roun() 
     (→ 10 * 60 = 600 minutes) */
  --hours-to-minutes: calc(round(down, var(--start) / 100, 1) * 60);
  /* Extract the minute part with mod()
     (→ 45 minutes) */
  --minutes: mod(var(--start), 100);
  
  /* Total minutes from midnight */
  --total-minutes: calc(var(--hours-to-minutes) + var(--minutes));
}
041
Nils Binder @ichimnetz.com · 14/11/2025
If you want the full breakdown of how this is done, here’s the write-up 👇 9elements.com/blog/buildin...
9elements.com
Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod(). - 9elements
Combining finest craftsmanship with elegant design to ship innovative digital experiences.
0224
Nils Binder @ichimnetz.com · 14/11/2025
Build a multi-stage timetable for a conference — fully in modern CSS. Each hour grows automatically to fit all sessions. 🍾 heavy use of subgrid. 🍾 round() and mod() to place sessions accurately 🍾 scroll-driven animations for sticky stage headings
1190
Reposted by Nils Binder
Mia [data-css=poetic] @miriam.codes · 27/10/2025
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout. - Since it uses many of the grid-* properties, `grid` will be in the name somewhere - We don't use metaphors in CSS names, so `masonry` is not listed here docs.google.com/forms/d/e/1F...
docs.google.com
Ex-Masonry Display Type Keyword Poll
See https://github.com/w3c/csswg-drafts/issues/12022 for context. This poll intentionally leaves out `masonry` as an option, see https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-34172962...
158444
Nils Binder @ichimnetz.com · 28/10/2025
Just bc we got used to it doesn’t mean it’s a good name. IMHO something like grid lanes is more intuitive for future developers to grasp than masonry.
320
Nils Binder @ichimnetz.com · 26/10/2025
Got it! Let’s see if I can finally understand where and why I can — and should — use them. Thanks, @sarasoueidan.com, for the second shout-out — your recommendation tipped me over the edge to give it a try.
140
Nils Binder @ichimnetz.com · 26/10/2025
Absolutely love this. 🥰
010
Nils Binder @ichimnetz.com · 01/10/2025
Quite useful when writing repetitive stuff in css. Like variable definition for dark light themes or nth-child delay things. When writing js I found it to be horrible.
110
Nils Binder @ichimnetz.com · 23/09/2025
Once it even did a full “slide out of view.” Could be a nice effect — but I’d like to control when that happens, not have Safari decide by accident. @jensimmons.bsky.social maybe you can tell me if this is a bug or a feature that I can opt out of.
020
Nils Binder @ichimnetz.com · 23/09/2025
Has anyone else seen this in iOS 26? Sticky and fixed elements shift slightly out of view when scrolling down, then snap back when scrolling up. I made a demo to test it: cdpn.io/pen/debug/Qw... Curious if others can reproduce.
120
Nils Binder @ichimnetz.com · 10/09/2025
Visiting Seattle… I was NOT prepared for this. 🤣🤣 Breakfast was delicious though! #tailwind
Green awning of a café with the name “TAILWIND café | bar” printed in pink and white.
160
Nils Binder @ichimnetz.com · 18/08/2025
000
Nils Binder @ichimnetz.com · 18/08/2025
My colleague @dhoelzgen.dev asked me to build a website for the (re)founded Elixir Ruhr Meetup. Had lots of fun experimenting with scroll-driven animations, border images… And if you’re brave enough, you can brew up some magic 🧙‍♂️✨ elixir-ruhr.dev
elixir-ruhr.dev
Elixir Ruhr Meetup
Join Elixir enthusiasts from the Ruhr Area for inspiring talks, lively discussions, and great company!
151
Nils Binder @ichimnetz.com · 12/08/2025
If you want to trigger some animation at a fixed point and just have it run that would not bee possible with animation timeline. At least to my knowledge. It always does scrubbing
210
Reposted by Nils Binder
Ben Schwarz @benschwarz.bsky.social · 23/07/2025
“I don’t like CSS” is coded speech for “I never learned CSS”
923231