Category: Css

Keyframes Tokens: Standardizing Animation Across Projects Keyframes Tokens: Standardizing Animation Across Projects Amit Sheen 2025-11-21T08:00:00+00:00 2025-11-27T20:33:09+00:00 Picture this: you join a new project, dive into the codebase, and within the first few hours, you discover something frustratingly familiar. Scattered throughout the stylesheets, you find multiple @keyframes definitions for the same basic animations. Three different fade-in…

CSS Gamepad API Visual Debugging With CSS Layers CSS Gamepad API Visual Debugging With CSS Layers Godstime Aburu 2025-11-14T13:00:00+00:00 2025-11-20T20:32:52+00:00 When you plug in a controller, you mash buttons, move the sticks, pull the triggers… and as a developer, you see none of it. The browser’s picking it up, sure, but unless you’re logging numbers…

Older Tech In The Browser Stack Older Tech In The Browser Stack Bryan Rasmussen 2025-11-13T08:00:00+00:00 2025-11-13T20:32:27+00:00 I’ve been in front-end development long enough to see a trend over the years: younger developers working with a new paradigm of programming without understanding the historical context of it. It is, of course, perfectly understandable to not know…

Smashing Animations Part 6: Magnificent SVGs With `<use>` And CSS Custom Properties Smashing Animations Part 6: Magnificent SVGs With `<use>` And CSS Custom Properties Andy Clarke 2025-11-07T15:00:00+00:00 2025-11-13T20:32:27+00:00 I explained recently how I use <symbol>, <use>, and CSS Media Queries to develop what I call adaptive SVGs. Symbols let us define an element once and then use it again…

Smashing Animations Part 5: Building Adaptive SVGs With `<symbol>`, `<use>`, And CSS Media Queries Smashing Animations Part 5: Building Adaptive SVGs With `<symbol>`, `<use>`, And CSS Media Queries Andy Clarke 2025-10-06T13:00:00+00:00 2025-10-09T20:32:45+00:00 I’ve written quite a lot recently about how I prepare and optimise SVG code to use as static graphics or in animations. I…

Ambient Animations In Web Design: Principles And Implementation (Part 1) Ambient Animations In Web Design: Principles And Implementation (Part 1) Andy Clarke 2025-09-22T13:00:00+00:00 2025-09-25T20:32:54+00:00 Unlike timeline-based animations, which tell stories across a sequence of events, or interaction animations that are triggered when someone touches something, ambient animations are the kind of passive movements you might not notice at first. But, they make a…

Integrating CSS Cascade Layers To An Existing Project Integrating CSS Cascade Layers To An Existing Project Victor Ayomipo 2025-09-10T10:00:00+00:00 2025-09-11T20:32:49+00:00 You can always get a fantastic overview of things in Stephenie Eckles’ article, “Getting Started With CSS Cascade Layers”. But let’s talk about the experience of integrating cascade layers into real-world code, the good, the…

CSS Intelligence: Speculating On The Future Of A Smarter Language CSS Intelligence: Speculating On The Future Of A Smarter Language Gabriel Shoyombo 2025-07-02T13:00:00+00:00 2025-07-03T20:33:03+00:00 Once upon a time, CSS was purely presentational. It imperatively handled the fonts, colors, backgrounds, spacing, and layouts, among other styles, for markup languages. It was a language for looks, doing…

Decoding The SVG <code>path</code> Element: Curve And Arc Commands Decoding The SVG <code>path</code> Element: Curve And Arc Commands Myriam Frisano 2025-06-23T10:00:00+00:00 2025-06-26T20:32:27+00:00 In the first part of decoding the SVG path pair, we mostly dealt with converting things from semantic tags (line, polyline, polygon) into the path command syntax, but the path element didn’t really…

CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control Victor Ayomipo 2025-06-19T15:00:00+00:00 2025-06-19T20:32:57+00:00 CSS is wild, really wild. And tricky. But let’s talk specifically about specificity. When writing CSS, it’s close to impossible that you haven’t faced the frustration of styles not applying as…