CSS

Adam knows better than anyone, CSS knows about the user, device, variables, layout and more. But there is a little bit of information that CSS doesn’t have. Like what’s the current value of a range input exactly? What are the exact coordinates of the mouse? It’s not hard to pass over that information to CSS […]

View Transitions are of unique help in applying an animation to an element even when you are literally removing it from the DOM.

There are some real advantages to variable scope and evaluation scope that you get with @function in CSS.

Using our 3, 2, 1 state system, we can make popovers animate on “the way in” and “the way out” just like we did with dialogs in Part 1.

Each pseudo element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting though, which makes it a little hard to see what’s actually happening under the hood.

Aaron T. Grogg has a nice page chock full of examples of UI, which used to be the sort of thing that we’d use JavaScript for, but can now be done in HTML & CSS. No hate: I have nothing against JS, but it has better things to do The examples are very modern, like […]

Here’s a brand new approach to creating staggered animations in CSS using a single progress value, allowing for smooth linkage to various inputs like scrolling. By utilizing a mathematical formula, it enhances control over animated elements without isolating their timelines, making animations more versatile and scrubbable.

Using @counter-style for tricky visual effects like word rotation and obfuscation.

@counter-style is useful for replacing the ::marker of lists easily, but it controls any markers-of-counters, so we can use it for more.

Personally, I wouldn’t blame you if you were asked what CSS needs these days and you were like uhm, I think it’s good, actually. These days CSS probably has more in it than you even know about or have tried, making it feel not particularly lacking. But if you really dig into the specifics, you’ll […]