A Progressive Enhancement Challenge
You want to hide an interactive element that you don’t need anymore after JavaScript loads/runs. Can you do it without a “flash” or layout shift?
You want to hide an interactive element that you don’t need anymore after JavaScript loads/runs. Can you do it without a “flash” or layout shift?
Inset `box-shadow` doesn’t work directly on image elements. There are work-arounds, but this SVG filter can do it directly.
Don’t run! There is powerful stuff to learn here through interactive demos.
There are a ton more @media queries than “width” and “prefers-reduced-motion”. Let’s have a long, along with use-cases.
A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn’t.
If you thought 2024 was packed with amazing new CSS, well, you’re right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.
The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.
You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!
There are usually multiple ways to do the same thing on the web. Sometimes… a lot of ways. Which is “better” can be a matter of taste or which abstraction buys the most value. Check out this CSS example and see which you prefer.
Cursor has an “auto” mode, “but if you care about cost or predictability, it’s worth picking models manually.” says Steve Kinney.
Cursor is an AI-focused VS Code fork. Here’s Steve Kinney with a nice overview of what it offers and how to start getting help out of it right away.
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.