Chris’ Corner: Liquid Ass

First a quick heads up about… me. I have a weird itch to do “streaming”, so I’m letting myself just be a hardcore beginner and giving it a shot. The plan is just hang out with whoever shows up and make stuff and talk about front end web development and design. So:

• Me on Twitch
• CodePen on YouTube

Seems like those two platforms make the most sense for that, so here we go.

I made this super sick banner for Twitch, which you can’t even see because it’s covered by UI stuff lol.

Welp.

I suppose you knew that there’s no way I’m letting “liquid glass” slide by this week. Or should I say:

Amazing.

Marie actually beat me to it doing a whole Spark issue on it last week. Obviously CodePen users are all over this design trend, as it’s an absolutely magnetic challenge in CSS. Kevin Powell did a video which happened to drop at the perfect time. Kevin is so good at these things I’m like sick with jealousy about it. Maybe my stream will level up my video teaching skills.

It’s not like CodePen is only now starting to have these glass-like effects. People have been doing it for ages. It had a particular boon when backdrop-filter: blur(2px); became a thing — that’s more like “frosted” glass — but still, Apple is doing that, too. Maybe -webkit-box-reflect will get new life on the web also? Feels related.

Sebastiaan de With fortold it nearly perfectly well. 👏👏👏. Little touches like the reflective progress bar are so cool.

Apple is actually quite serious about this, and released a video of the whole idea. Honestly I think it’s kinda awesome looking.

But I did kinda 😬 about the accessibility of it.

No chance the text “Nao” above is passing any contrast test. Nao way amiright?

Feels like text/background contrast has taken a hit. I haven’t seen a full throated takedown of it yet (there are some mentions though), but I imagine that’s coming. There are already settings in there to tone the effects down, I hear.

I thought out loud the other month: literally everything ships inaccessibly. And since having that thought I’ve seen a half dozen things ship that way. Certainly we’re not immune to it, but it’s good motivation to get some more accessibility testing done (we’ve done a good bit already!) on our new editor before it goes out.

Random thing before I sign off. The Oatmeal on Erasers is lovely.