| Frontend Designer | https://9elements.com |
| Co Host | https://www.css.cafe |
| Website | https://ichimnetz.com |
| Writing | https://9elements.com/blog/author/nils |
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
If you want the full breakdown of how this is done, here’s the write-up 👇
There was a time when anyone could be an artist 👨🎨 — if they loved the work enough.
Then came the professionals.
Then came the camera.
Today, it’s not paint that’s being replaced. It’s code.
https://9elements.com/blog/when-skill-became-obsolete-art-code-and-the-end-of-the-amateur/
Big thanks to @kizu for suggesting another technique to adjust logo sizes in a logo strip. I've updated my blog post to include his clever suggestion.
We've all been there: you're working on a website and need to display a row of logos—clients, partners, sponsors—you name it. However, logos come in all shapes and sizes, and making them look good together can be quite challenging. How do you get...
Displaying a row of logos can be tricky due to their varying shapes and sizes. In my latest post, I share how I approach building the perfect logo strip by adjusting logo heights based on aspect ratios.
We've all been there: you're working on a website and need to display a row of logos—clients, partners, sponsors—you name it. However, logos come in all shapes and sizes, and making them look good together can be quite challenging. How do you get...
@eleventy I'm struggling with the async shortcode issue when using the image plugin. The asyncEach and ifAsync Nunjucks syntax works, but breaks every code formatter I've tried. 😞
My current solution, using statsSync, kind of works but will soon be deprecated.
Moving the entire project to webC doesn't seem feasible for me.
The docs mention I can use <eleventyImage> with the Render Plugin. Is there an example of how this would look?
We're back next week with another Winging It Live(stream) to talk about #CSS #Grids with our first guest, @5t3ph! We'll talk about some of the most common grid patterns, showing you how (and why) you can get started working grids into your CSS toolkit.
Tuesday, July 23 at 1pm ET
(select "Notify Me" on YT to get an alert for the event.)
I've written about bar charts in HTML & CSS Grid and how they make responsive design, internationalization and accessibility easier than SVG & JS layouting.
https://9elements.com/blog/responsive-bar-charts-in-html-and-css/
Collaboration with @nilsbinder and @sphinxc0re.
Ever since I watched @matthiasott talk at CSS Day, I've been eager to experiment with the clever tan(atan2()) technique.
So, I played around with animation durations relative to the viewport.
https://9elements.com/blog/speed-vs-duration-a-use-case-for-mixed-unit-division/
Animating elements in CSS can be challenging, especially when you want to ensure smooth transitions across different screen sizes. One issue that I stumble upon quite often is the inability to divide two length values in CSS. For example, calc(100vw...
Mia (web luddite)
molily
