Nils Binder

UI/UX designer and part-time coder @9elements. Also, I'm an origami enthusiast spending hours folding paper.

11 Posts by Nils Binder

My Thoughts on CSS Day 2023

Last week, I had the incredible opportunity to attend my first CSS Day in Amsterdam. It was an exceptional experience that left me brimming with newfound knowledge. While I felt confident about certain topics, such as the has-selector and container...

Read more about My Thoughts on CSS Day 2023

Building a combined CSS-aspect-ratio-grid

Recently I was faced with the following problem: I had to build a layout that consists of several rows. In each row are two images with a fixed aspect ratio. The two images should have the same height and fill the entire row. The images' aspect...

Read more about Building a combined CSS-aspect-ratio-grid

The Devil's Albatross

Learn how to build an algorithmic layout that switches from two centered elements to a spaced-out flex layout.

Read more about The Devil's Albatross

Gradient angles in CSS, Figma & Sketch

Do you know the feeling when a subject never lets you go? In the last years, I have worked with different graphics programs and have written many lines of CSS. Even though it is now easy to copy CSS code for gradients directly from e.g. Figma, I...

Read more about Gradient angles in CSS, Figma & Sketch

Create Diagonal Layouts Like It's 2020

Layouts with diagonal sections are quite popular for several years now. You will probably not find it in the articles titled "Design trends for 2020". But I think it is here to stay.

Read more about Create Diagonal Layouts Like It's 2020

Sizing Blocks or Areas using CSS Custom-Properties

One of the many challenges when it comes to writing CSS is choosing the right unit. Over the years there has been a lot of controversies whether to use px, em or rem to size text. So I thought, why not add some custom properties to this mixture and...

Read more about Sizing Blocks or Areas using CSS Custom-Properties

CSS Border-Radius Can Do That?

How to create very cool effects with a rarely used feature.TL/DR: When you use eight values specifying border-radius in CSS, you can create organic looking shapes. WOW.

Read more about CSS Border-Radius Can Do That?

Creating an animated SVG Neon light effect

We at 9elements organize an annual JavaScript conference called RuhrJS. The key visual shows a shaft tower and the conference name executed with a neon light effect. The main page features the full visual with flickering lights. This effect is...

Read more about Creating an animated SVG Neon light effect

Building a responsive image

How to create a logo that responds to its own aspect ratio There are quite a few articles on the web that deal with responsive logos. The most popular example might be the Responsive Logos website that shows some very well known logos in different...

Read more about Building a responsive image