Chris’ Corner: CSS Powered Componentry

New CSS features help us in all sorts of different ways, but here we’re going to look at them when they power a specific type of component, or make a type of component newly possible with less or no JavaScript.

• A single element CSS donut timer/countdown timer by Ben Frain — The surely least-used gradient type, conic-gradient() is used here to make donut (I’d call them charts) which when animated behave like a timer. This kind of thing changes the web in that we don’t need to reach for weightier or more complex technology to do something like this, which is actually visually pretty simple.
• Sliding 3D Image Frames In CSS by Temani Afif — This one isn’t rife with new CSS features, but that almost makes it more mind blowing to me. In the HTML is only an <img> but the end result is a sliding-door on a 3D box that slides up to reveal the photo. This requires multiple backgrounds including a conic-gradient, a box-shadow and very exotic clip-path, not to mention a transition for the movement.
• ⭐️ Carousel Configurator by the Chrome Gang — This one is wild. It only works in Google Chrome Canary because of experimental features. Scrolling snapping is there of course, and that’s neat and fundamental to carousels, but the other three features are, as I said, wild. (1) a ::scroll-button which appends, apparently, a fully interactive button that advances scroll by one page. (2) a ::scroll-marker and group pseudo element which are apparently a replacement for a scrollbar and are instead fully interactive stated buttons that represent how many pages a scrolling container has. (3) an interactivity: inert; declaration which you can apply within an animation-timeline such that off-screen parts of the carousel are not interactive. All this seems extremely experimental but I’m here for it.
• Hide a header when scrolling down, show it again when scrolling up by Bramus Van Damme — With scroll-driven animations, you can “detect” if a page is being scrolled up or down, and in this case set the value of custom properties based on that information. Then with style() queries, set other styles, like hiding or showing a header. The big trick here is persisting the styles even when not scrolling, which involves an infinite transition-delay. This is the magic that keeps the header hidden until you scroll back up.
• Center Items in First Row with CSS Grid by Ryan Mulligan — When you’re using CSS Grid, for the most part, you set up grid lines and place items exactly along those grid lines. That’s why it’s weird to see “staggered” looking layouts, which is what it looks like when one row of items doesn’t line up exactly with the one below it. But if you just make twice as many columns as you need and offset by one when you need to, you’ve got this kind of control. The trick is figuring out when.