Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension Andy Clarke 2025-05-14T13:00:00+00:00 2025-05-20T14:32:36+00:00 Despite keyframes and scroll-driven events, CSS animations have remained relatively rudimentary. As I wrote in Part 1, they remind me of the 1960s Hanna-Barbera animated series I…
Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS Andy Clarke 2025-05-07T08:00:00+00:00 2025-05-20T14:32:36+00:00 Browser makers didn’t take long to add the movement capabilities to CSS. The simple :hover pseudo-class came first, and a bit later, the transitions between two states. Then came the ability…
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? Gabriel Shoyombo 2025-05-06T13:00:00+00:00 2025-05-20T14:32:36+00:00 You’ve got a Pinterest-style layout to build, but you’re tired of JavaScript. Could CSS finally have the answer? Well, for a beginner, taking a look at the pins on your Pinterest page, you…
Transitioning Top-Layer Entries And The Display Property In CSS Transitioning Top-Layer Entries And The Display Property In CSS Brecht De Ruyte 2025-01-29T10:00:00+00:00 2025-05-20T14:32:36+00:00 Animating from and to display: none; was something we could only achieve with JavaScript to change classes or create other hacks. The reason why we couldn’t do this in CSS is explained…
New Front-End Features For Designers In 2025 New Front-End Features For Designers In 2025 Cosima Mielke 2024-12-31T12:00:00+00:00 2025-05-20T14:32:36+00:00 Component-specific styling, styling parents based on their children, relative colors — the web platform is going through exciting times, and many things that required JavaScript in the past can today be achieved with one simple line of…
An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines Mariana Beldi 2024-12-11T15:00:00+00:00 2025-05-20T14:32:36+00:00 You can safely use scroll-driven animations in Chrome as of December 2024. Firefox supports them, too, though you’ll need to enable a flag. Safari? Not yet, but don’t worry — you can still offer a…
CSS min() All The Things CSS min() All The Things Victor Ayomipo 2024-10-17T10:00:00+00:00 2025-05-20T14:32:36+00:00 Did you see this post that Chris Coyier published back in August? He experimented with CSS container query units, going all in and using them for every single numeric value in a demo he put together. And the result was… not…
Sticky Headers And Full-Height Elements: A Tricky Combination Sticky Headers And Full-Height Elements: A Tricky Combination Philip Braunen 2024-09-05T09:00:00+00:00 2025-05-20T14:32:36+00:00 I was recently asked by a student to help with a seemingly simple problem. She’d been working on a website for a coffee shop that sports a sticky header, and she wanted the hero section…
It’s Time To Talk About “CSS5” It’s Time To Talk About “CSS5” Brecht De Ruyte 2024-08-05T10:00:00+00:00 2025-05-20T14:32:36+00:00 We have been talking about CSS3 for a long time. Call me a fossil, but I still remember the new border-radius property feeling like the most incredible CSS3 feature. We have moved on since we got border-radius and…
What Are CSS Container Style Queries Good For? What Are CSS Container Style Queries Good For? Juan Diego Rodríguez 2024-06-14T11:00:00+00:00 2025-05-20T14:32:36+00:00 We’ve relied on media queries for a long time in the responsive world of CSS but they have their share of limitations and have shifted focus more towards accessibility than responsiveness alone. This is…