All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

September 19th: Color Fonts, Dynamic Island Doom, and Generative Growth

Generative Tree Animation

Watch "an endless cycle of growth and decay depicted as a tree" in this beautiful Pen grown from JavaScript planted by Jon Kantner.

Sliced Text Effect

Shireen Taj cuts clean through text with a crisp clip-path in this extra-sharp demo. Check out the gradient shadow between the cut edges that enhances the paper-like effect.

CSSimon (v2)

Alvaro Montoro revisits his original CSSimon from 2018 in this fully-updated v2. "Switch the on/off toggle and follow the sequence of colors. Good luck! And enjoy!"

CSS 2D Bricks

Lea Rosema generates an endless pile of Lego-like CSS bricks in this colorful Pen that combines CSS shape and color with a bit of randomization in JavaScript for placement.

Characters and Steps

Mustafa Enes creates an interactive pattern maker that takes the character of your choice and changes its placement in the pattern based on your slider choices. Try it out with the default dashes, or replace them with other characters to make your own design.

Nabla Color Font

Material Design Color Fonts are here, and typography champion Scott Kellum has a demo that shows off the gradient fun and animation possibilities with the typeface Nabla. See also Jhey Tompkins' Nabla Pen for more color font fun.

Dynamic Island Doom

Adam Kuhn takes full advantage of the space in iPhone "dynamic island" with a playable game of Doom, powered by Cornelius Diekmann's WASM Doom port.

CodePen Radio #385: Kristopher Van Sant

On the latest CodePen Radio, Chris is joined by CodePen community luminary Kristopher Van Sant to chat about Kristopher's work as a front-end developer and her favorite Pens.

PDF Download: Understanding Kubernetes

Updated due to popular demand! This comprehensive resource covers everything Kubernetes: concepts, cluster components and network model implementation. 2022 edition includes the Standard Kubernetes Dashboard, the high-availability control plane and autoscaling. Download instantly

Progress Button

Taylon, Chan pulls off the feat of making a lot of information elegant in this lovely Pen. This pleasing progress button includes a loading spinner and progress percentage along with an animated border and success state.

Fish Spinner

Chris Gannon shares a beautiful Lottie animation of quick-spinning dots whose trails make them look a bit like koi fish. Chris includes a link to the Lottie file in the Pen's description.

Portal (CSS)

Amit Sheen opens up a portal that shows an alternate cube reality for a set of spheres in this mind-bending CSS animation in Amit's signature style.

#CodePenChallenge: Oh No, Overflow!

In the second week of our Fixer Upper challenge, we worked on solving horizontal overflow issues. Check out the Pens from week two, featuring solutions by Josetxu, keith.geek, slowdan01, and Chris Smith.

imgix Video API

Stream videos with HLS, the most advanced protocol. Get the best video quality, bandwidth adaptability, and easy asset management.

Chris' Corner

I needed to apply border-radius to only some corners of an element the other day. I’ve worked with CSS long enough that I’ve memorized the slightly-strange syntax for individual corners. For example, border-top-right-radius. I’ve always found it weird how the placement instructions are in the middle. Like if I owned a Donut Shop and was opening another location on the North side of the city, it would be weird to call it Donut North Shop when Donut Shop North feels more natural.

In Jeremy Keith’s Let’s get logical, ultimately he’s putting a point again on logical properties and how they aren’t (yet) consistently available across all things in CSS that have to do with direction and size. But he started with some border-radius stuff that I appreciated, as like I said, I was just doing individual corner stuff the other day.

My brain went: oh! I know this! Let’s think about the term border-top-right-radius. We’re trying not to say top anymore as that’s not as friendly in situations where we’re flip directions. Instead it’s the block direction and in the English language I’m used to, top maps to start. So top == block-start. Likewise, right is the inline direction and maps to end. So right == inline-end. So if we replace those terms, we get: border-block-start-inline-end-radius. But alas, no.

The syntax border-block-start-inline-end-radius is not correct. Jeremy notes that you just “have to keep the order of properties in mind”. It’s actually in the format of border-[block direction]-[inline-direction]-radius. You skip the block or inline, as it is implied by the placement. OK! So what I think of in English as border-top-right-radius is border-start-end-radius.

It tripped me up for a second reason too. When I first failed, I just did was I always do: look it up. I maintained the border-radius entry on CSS-Tricks several times myself, but it doesn’t yet include the syntax for logical property usage (someone should update that entry for the writer program!). Even more surprisingly, the MDN article doesn’t have it either. At the moment, you just kinda need to know logical properties exist and reference what you need from the logical property listings. The never-ending dance of web platform evolution and documentation.

I’ve always loved “I needed to accomplish this design thing the other day” blog posts. They do double duty. For one, they lay out a situation and offer a solution, which is interesting for people who come across that situation, and make for interesting reading even if you haven’t come across it for the right audience. For another, they get people thinking about how they might solve the same thing, if they had to. (That’s all highly in the spirit of our Challenges, by the way.)

Here’s an example from Eric Meyer: Flexibly Centering an Element with Side-Aligned Content. The idea is there a block of text of variable width that needs to be centered. The whole thing needs centering, but not the text itself.

Centering blocks is usually pretty easy. Even outside of a flexbox or grid environment, where it’s a natural part of things, the trick is usually margin: 0 auto; which sets the left and right margins to auto as succinctly as possible, centering the block. But block-level elements typically stretch to fill their container, so those auto margins won’t do much. If you set a width, fine, but remember in Eric’s situation the width is unknown.

There’s a cool CSS trick that helps here. Not even a trick really, a natural part of CSS, it’s just not particularly well known. You can set the width of an element to max-content, meaning a block-level element still can stretch as wide as the context it is in, but if the content doesn’t push it that far, it just won’t go that far. Then we use the left/right auto margins trick to center it and… done!

.thing {
  max-width: max-content;
  margin: 0 auto;

But weren’t we just talking about logical properties? We’re failing to use them in both declarations here. Rather than width, we can think about the inlinedirection. Rather than using margin, which does not map to logical properties, we can reach for a property that is specifically inline, to begin with. So:

.thing {
  max-inline-size: max-content;
  margin-inline: auto;

CSS rules. If that looks strange to you, I get it — but try to embrace it. I think the strange look only comes from being indoctrinated with CSS before logical properties. If you learn CSS with logical properties, it won’t be strange at all. And in fact, it’s literally more logical.