A bunch of demos and tools to show off Scroll-driven Animations

I'm Brad Frost, an independent creator, web designer & developer, teacher, speaker, writer, musician, and artist based in Pittsburgh, PA.

Sometimes, it's more important to be good than it is to be nice.

I thought about dropping an addendum into my last post to say just how overwhelmed I am, in the best possible way, by the way all of you in the front-end community have shown up to show support, both for me and for CSS-Tricks. I started to do that but then felt a new post...

In 2015 I started my CSS Layout News newsletter mostly to have my own venue to go on about CSS grid, at the time unavailable in any stable browser. I got to 2023 and 343 issues and it fizzled out. Partly because I got busy, but mostly because the newsletter signup form on the platform...

The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a c...

Every element I use for the basic structure of a HTML document, with explanations why.

When implementing Dark Mode and ways to toggle it, developers currently need to duplicate code and roll their own toggle implementation. What if, instead, browsers would take care of all that?

No web standard should require you to agree to an advertising company’s “terms of use.”

An up-to-date repository of interface components based on examples from the world of design systems, designed to be a reference for anyone building user interfaces.

There is a lil’ UI detail on this blog. Most people don’t even notice it, but the ones who do often reach out, asking how on earth it works. It feels like it defies the rules of CSS! In this blog post...

YouTube video by Syntax

Build any web layout with confidence. Learn practical CSS layout through visual lessons, interactive demos, and a proven layout mindset.

The Ultimate CSS Tournament. Brought to you by Syntax

In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web. Which is a shame, because we can do some pretty cool stuff with sprites! In this...

The CustomStateSet interface of the Document Object Model stores a list of states for an autonomous custom element, and allows states to be added and removed from the set.

Morphing overlay elements from dynamic places

Progressive Web Apps, or PWAs, can turn app-like websites into website-like apps. Browsers are beefing up support for these useful hybrid apps, and we show you how to install and use them.

Keyboard shortcuts occupy a strange area for web design.

YouTube video by Cassidy Williams

The errors included getting dialogue wrong and incorrectly claiming a scene was set 100 years earlier than it was.