Multi-State Buttons
Typically, buttons are either pressed or they aren’t. But as long as you handle it accessibly, you can make a group of radio inputs look like a multi-state button with some CSS trickery.
Typically, buttons are either pressed or they aren’t. But as long as you handle it accessibly, you can make a group of radio inputs look like a multi-state button with some CSS trickery.
A halftone is a pattern of dots that vary in size and spacing. It’s a printing technique that you normally don’t see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!
I find this hard to remember and it’s come up for me a few times lately so I’m writing it down gosh darn it! The individual corner border-radius values, like border-top-right-radius (which is hard enough to remember on its own) have logical property versions, meaning that should the flow of the document change, the border […]
A CSS Custom Property can be used to tweak colors darker when shown on light and lighter when shown on dark, making them pop in both cases.
TanStack Query, or react-query, simplifies client-side data fetching with features like caching, automatic re-fetching, and error handling. It integrates smoothly with TanStack Router, allowing efficient prefetching and loading states using hooks like useSuspenseQuery.
TanStack Router is one of the most exciting projects in the web development ecosystem right now, and it doesn’t get nearly enough attention. It’s a fully fledged client-side application framework that supports advanced routing, nested layouts, and hooks for loading data. Best of all, it does all of this with deep type safety. This post […]
One approach to color modes it to do it all in CSS with prefers-color-scheme media queries and/or the light-dark() function. A user toggle can be a future improvement.
Baseline now has a baseline-status web component widget that can be used anywhere to show of general browser support. This post gets into what else there is to think about there.
A single HTML `progress` element can have quite an elaborate design with custom colors, a tooltip showing the active %, and even an entrance animation.
You can give a name (“custom ident”) to any scrolling element’s “timeline”, have a parent element pick it up, then have any other element use it for their own animation timeline. It’s a trip!
Frontend Masters Donates to open source projects. $363,806 contributed to date.