Skip to content

Let’s hang! An intro to CSS Anchor Positioning with basic examples

A boats anchor agains a futuristic background with rectangle patterns

The CSS anchoring API is something that I’ve been following for at least a year now, and I’m happy to see that the first level is fully specced. Even though there are still some shortcomings that I’ll cover in this article as well, the available things look pretty solid and will help us a lot in creating some complex layout structures. Besides that, they are very much needed for the future of the HTML Popover API and stylable selects.

Read moreabout Let’s hang! An intro to CSS Anchor Positioning with basic examples

Modern CSS Layouts: You Might Not Need A Framework For That

Smashing Magazine

It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. But amidst this abundance, the modern CSS features we have today offer simpler and more flexible approaches without the added dependencies or abstractions. In this article, I demonstrate four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.

Read more about Modern CSS Layouts: You Might Not Need A Framework For That (Smashing Magazine)

Invoking elements by using only HTML: A first look at invokers

Open UI logo with text invokers below it

Wouldn’t it be cool if we could click on a button to open a modal with just HTML? How about those file input elements? Imagine that creating a custom play button for video controls would be an easy thing to do. How about custom counter buttons for a number input? This is where the idea of invokers comes in. It’s currently available behind a flag to play around with and it’s definitely one of the most exciting advances in HTML to look out for.

Read moreabout Invoking elements by using only HTML: A first look at invokers

Animating clip paths on scroll with @property in CSS

A polaroid like frame holding an image, with a rotate and scroll icon next to it

While experimenting with CSS, you sometimes discover a technique you want to do more of. This is one of those discoveries for me... I love how we can now animate clip paths on scroll with CSS. From animating an image into a star to creating Polaroid-like images on scroll. In this article, I’d like to demo some techniques we can use to create these interesting effects using clip paths, @property, and even container units to create visually pleasing scroll-driven animations.

Read moreabout Animating clip paths on scroll with @property in CSS

Going beyond pixels and (r)ems in CSS

iO tech_hub

There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. In this mini-series I will be going around all the current length units in CSS with practical examples.

Read more about Going beyond pixels and (r)ems in CSS (iO tech_hub)

Taking a closer look at @property in CSS

Browser support for @property nears completion, a great time to delve into some technical aspects of this CSS feature. While I've experimented with @property in demo settings before, I’ve never used it in a production environment. With the upcoming full browser support, let’s take a look at the inner workings and uncover some of the benefits.

Read moreabout Taking a closer look at @property in CSS

CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study

Smashing Magazine

Have you run into a situation where you need the padding of one element to align with the padding of another element? It’s a common debacle, especially when a page layout is set with global padding? In this article I demonstrate that issue with a full-width slider component that breaks out of the main page container using a couple of techniques to keep it visually aligned with other elements on the page.

Read more about CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study (Smashing Magazine)

Elevate your CSS debugging skills with these Chrome DevTools tricks in 2024

From layers and specificity to nesting, from HD color to (scroll) animations. If there is one thing that makes me keep using Chrome as my default browser while developing, it has to be the DevTools and the information we can find about them. As we’re slowly entering the last part of the year, I thought a cool roundup of new CSS debugging tools would be a great article. Let’s dive into it.

Read moreabout Elevate your CSS debugging skills with these Chrome DevTools tricks in 2024

Animations and transitions from and to display none with @starting-style

A todo list that is animated

One of the frustrating things when animating elements was not being able to transition to and from display none. Related to that, it also wasn’t an easy feat to use transitions for elements entering the DOM. In Chrome 117 we have the release of @starting-style, which will make animating or transitioning those cases a lot more convenient.

Read moreabout Animations and transitions from and to display none with @starting-style

Grid ideas: Creating a CSS subgrid utility class for rows

A CSS grid with subgrid alignment

A full evergreen browser support for CSS subgrid is just around the corner. Time to have a look on how we can create some interesting implementations in our design systems. This article will be focussing on grid-template-rows with subgrid.

Read moreabout Grid ideas: Creating a CSS subgrid utility class for rows

Scroll driven animations in CSS are a joy to play around with!

Scroll driven animations example of a timeline

Scroll Driven Animations are set to be released in Chrome 115, giving us the chance to animate elements based on a scroll instead of time, increasing our toolset to create some fun interactions. I’m sure many great tricks and articles will be found, as this feature opens a lot of possibilities.

Read moreabout Scroll driven animations in CSS are a joy to play around with!

Going beyond constants with custom properties

iO tech_hub

If you love CSS, you've probably heard of custom properties (a.k.a. CSS variables) before. Still, a lot of people seem to use them as constants for their CSS. In this article, I will try to give you some more insights on how you can use these custom properties to create some smart systems or even use them as booleans in CSS and create easy progressive enhancements.

Read more about Going beyond constants with custom properties (iO tech_hub)

This was CSS day 2023

Speakers on stage at css day

Another year, another CSS day. I'm not joking or exaggerating that this conference has and always will be one of my highlights of the year. Welcoming, top speakers accompanied with just totally geeking out with other CSS people around food and drinks. This was CSS day 2023 - a short summary.

Read moreabout This was CSS day 2023

The button case - Using custom properties for a smart button system

Layered buttons

Recently, I've created a presentation named “so, you're still not using custom properties?” In this article, I want to highlight a part of that presentation. Custom properties have been available to us for quite some time now. And creating a smart button design system is just one of the many things where they can shine.

Read moreabout The button case - Using custom properties for a smart button system

Chrome DevTools tricks that deserve a spotlight

Chrome Devtools logo

A lot of developers use Chrome as their main browser and I'm one of them. There are a few tricks in Chrome DevTools that don't seem to get enough attention. So for this article, I wanted to highlight some of the features that I love and actually use in DevTools, that some of you might not know about.

Read moreabout Chrome DevTools tricks that deserve a spotlight

Open UI and the Popover API

Open UI logo

If it pops, it belongs in HTML and CSS! Lately, I had a lot of fun playing around with this upcoming feature. The first version is being developed and it's starting to look pretty good. It's time to handle our basic popovers without the explicit need of JavaScript.

Read moreabout Open UI and the Popover API

For the love of scroll driven animations in CSS

An outlined heart

Animating elements while a user scrolls the page is a popular practice on the web. With scroll-timeline and the scroll function available in Chrome Canary, we get a nice preview on how these scrolling animations in pure CSS will work. The perfect time to create some demos and play around with it.

Read moreabout For the love of scroll driven animations in CSS

We've only scratched the surface with :has()

Swirly navigation

The :has() pseudo class is really a powerhouse. There are so many cool and amazing demos being released everyday showing how it can solve everyday problems and how it can replace actions we did in JS for years. In this short article: Some extra things I look forward to when playing around with it.

Read moreabout We've only scratched the surface with :has()

Creating A High-Contrast Design System With CSS Custom Properties

Smashing Magazine

Design should never be a trade-off when it comes to creating an accessible web. There are many features coming to the web that will make creating contrast a lot easier. But even though CSS functions such as color-contrast() are only available in Safari behind a flag, we can already do a lot to create contrast in an easy way by using custom properties.

Read more about Creating A High-Contrast Design System With CSS Custom Properties (Smashing Magazine)