Skip to content

Love at first slide! Creating a carousel purely out of CSS

It’s Valentine's Day! As usual, I want to write about something I love, and this time it’s still highly experimental but something I am extremely excited about. Something new is on the horizon named CSS scroll-markers and it allows you to create a fully functional slider without the need of any JavaScript. Don’t believe me? Let’s take a look, shall we? Here is my first impression of creating a carousel with only CSS and some accessibility concerns as well.

Read moreabout Love at first slide! Creating a carousel purely out of CSS

Transitioning Top-Layer Entries And The Display Property In CSS

Smashing Magazine

It’s not always the big features that make our everyday lives easier; sometimes, it’s those ease-of-life features that truly enhance our projects. In this article, I want to highlight two such features: @starting-style and transition-behavior — two properties that are absolutely welcome additions to your everyday work with CSS animations.

Read more about Transitioning Top-Layer Entries And The Display Property In CSS (Smashing Magazine)

Revisiting SVG filters - my forgotten powerhouse for duotones, noise, and other effects

The year was 2018, and we were still trying to cope with IE11 and had to find some ways for certain effects. Things that we take for granted with CSS nowadays were not possible and one of the solutions to create awesome effects on the web was using SVG Filters. Fast forward to 2025, SVG filters are still awesome, but I use them less. In this article, I wanted to revisit them, with some easy-to-use effects we can use today.

Read moreabout Revisiting SVG filters - my forgotten powerhouse for duotones, noise, and other effects

Reflecting on a year well spent! Looking forward to 2025

text 2025 with some fireworks behind it

Who publishes an article on the last day of the year? This guy! I felt like I should honor the tradition of at least recapping the past year by writing one final article in 2024. So this time, there will be no tutorials or hidden code gems. I already created my holiday CSS greeting card. This is just a little personal reflection and future plans for 2025.

Read moreabout Reflecting on a year well spent! Looking forward to 2025

Stylish holidays! Creating a scroll-driven Christmas tree in CSS

A christmas tree with text underneath it: stylish holidays

Every year, I create a little demo right before the holidays as a CSS greeting card. This year is no different. To celebrate the end of the year and all those new amazing features that came into CSS, I decided to let myself go a little with new CSS techniques. A sort of recap of things I learned and put them in one little CodePen. This time, I’m combining scroll-driven animations, anchoring, and @property in CSS.

Read moreabout Stylish holidays! Creating a scroll-driven Christmas tree in CSS

Added to my CSS reset: interpolate-size, the quality-of-life feature we all wanted at some point

How can I animate from 0 to auto? I have a fixed width and want it to transition to the width set by its children. How do I do that? These CSS questions have been asked many times on platforms such as Stackoverflow, and I’ve certainly done some searching for those exact questions. I can’t count the number of max-width hacks or JavaScript solutions I’ve used to transition from 0 to auto. No more! I’m done, and for now, I’m going full progressive enhancement. In this article, I’d like to cover some of the benefits you get from adding the new interpolate-size property in your CSS Reset.

Read moreabout Added to my CSS reset: interpolate-size, the quality-of-life feature we all wanted at some point

We should all invest more in smaller developer communities, or at least, try to

As a GDE, I recently traveled to the Isle of Man. It’s probably not the first place you would think of when talking about conferences, meetups, and developer communities in general. You’ll probably think about motor races in narrow streets and beautiful hills. This event was once again an eye-opener for me to realize we should probably try to do more for smaller community groups whether that is government sponsorships, or just doing that - maybe literally - extra mile as a speaker.

Read moreabout We should all invest more in smaller developer communities, or at least, try to

Is the sticky thing stuck? Is the snappy item snapped? A look at state queries in CSS

Three purple squares agains a pastel background, the middle square has some comic explosion lines on it and reads snap

Oh, how I wanted to write this title for some time! I have Googled these questions before when working with sticky positioning and scroll snapping. It looks like we are finally getting an answer to these questions in the form of CSS state queries and I have been eagerly waiting to play around with this since CSS Day 2023. In this article, I want to show a few first impressions and demos I created with state queries in CSS and Scroll Snap events in JavaScript.

Read moreabout Is the sticky thing stuck? Is the snappy item snapped? A look at state queries in CSS

A spec update on CSS anchor positioning

A boats anchor agains a futuristic background with rectangle patterns, with text updated on it

The CSS Working Group (CSSWG) has recently introduced changes to the anchor positioning spec in CSS. I've focused on anchoring in previous articles and to maintain accuracy, I will be updating an older article (just this once). This article will highlight the specific name changes and their corresponding Chrome release dates.

Read moreabout A spec update on CSS anchor positioning

It’s Time To Talk About “CSS5”

Smashing Magazine

Have you ever wondered what happened after CSS3? The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3 way back in 2009 — and you can help.

Read more about It’s Time To Talk About “CSS5” (Smashing Magazine)