CSS

When you nest elements with border-radius, the inner element needs less radius than the outer element.

This is some classic advice on this, and a future-looking fix.

A scroll progress indicator is a pretty straightforward thing to build with a scroll()-style scroll-driven animation. But here, we’ll build indicators for each section of a page using the view() style.

What is sheet music if not icons placed in particular vertical and horizontal positions? Stephen Band turned the system of sheet music into a CSS grid system where you control the placement of everything with classes and data-attributes.

https://cruncher.ch/blog/printing-music-with-css-grid/

Really clever trick via Temani Afif.

https://codepen.io/t_afif/pen/vYbdVjb

Fill the entire element with a gradient overlay on top of any existing background, which can make it easier to read text set on top.

We can *mostly* use HTML alone for this API. But here, we’ll use CSS to style the “links” within paragraphs and a JS library to position them, in lieu of CSS anchoring.

I wrote in my masonry proposal feedback: Are there any more fleshed out alternative proposals? I thought Jen presented strongly that CSS grid is a great place to put masonry layout, but also that it wasn’t arguing against anything else. Rachel Andrew has that “anything else”, which is display: masonry; with more explanation. What’s nice […]

This API, which you can use entirely in HTML, allows you to open an element on top of *everything* despite where it lives in the DOM and without any particular styling.

Nikita Prokopov with a pretty humorous article about centering things in web design. This is my claim: we, as a civilization, forgot how to center things. Centering things is almost trivial in CSS at this point. There are different approaches, because there are different situations. The knowledge to do so is pretty easy to find. […]

Let’s build a search form that looks like this: That feels like the absolute bowl-it-down-the-middle search form right now. Looks good but nothing fancy. And yet, coding it in HTML and CSS I don’t think is perfectly intuitive and makes use of a handful of decently modern and slightly lesser used features. The Label-Wrapping HTML […]

Jen Simmons posted Help us invent CSS Grid Level 3, aka “Masonry” layout over on the WebKit blog the other day and is actively soliciting feedback. Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take. Don’t mind if I do. Do […]