Create a visually balanced logo strip by adjusting logo heights based on aspect ratios using CSS. By scaling logos dynamically, you can display a harmonious row of diverse logos without manual tweaking.
Learn how to solve the CSS animation challenge of varying speeds across different screen sizes. This post introduces a technique using atan2() and tan() for unitless viewport width calculations and provides practical examples.
Explore a customizable CSS auto-grid layout in our latest post. Adjust column widths, gaps, and max column count for flexible web designs. Ideal for any web project.
Exploring the fusion of AI and traditional digital art to design a unique movie poster.
I had to build a card component that looked a little different than the usual cards you find on most websites. Now we got the chance to refactor the code, and I took another look at the component to see if I better solution with modern CSS.
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...
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...
Learn how to build an algorithmic layout that switches from two centered elements to a spaced-out flex layout.
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...
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.
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...
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.
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...
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...
