profile

Hi! I'm Kevin

Glassy UIs, CSS Battles, and more

Published 6 days ago • 4 min read

​View this email in your browser (or share it with a friend!)

Hello Reader,

Lots of content this week… meaning I was busier than usual and we’re skipping the general musings for this week!

🙋‍♂️ What I’ve been up to this week

Create this trendy blurry glass effect with CSS

video preview​

I didn’t plan for this to coincide with Apple’s new Liquid Glass UI, but I guess the timing was good! It’s not the exact same thing as what Apple’s Liquid Glass, but with the hot mess it is in terms of accessibility, that probably isn't a bad thing!

(If you’re after the full effect, check out this awesome CodePen by Mike Bespalov)

I challenged a CSS Magician to a CSS Battle!

video preview​

I challenged Julia Miocene to a CSS Battle, and was a little humbled by the experience 😅.

The State of CSS Survey (livestream replay)

video preview​

I had a fun livestream, taking most of the State of CSS survey and making quick demos of some features it mentions along the way.

If you haven’t done it yet, take it now!

⚡ Quick tips of the week

🎙️ Podcast

CSS features I wish we had right now

In this episode, I talk about CSS features I wish existed, or at least that they should hurry up with, like custom media queries, gap in block elements, and the color contrast function.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB​
​

📝 Quiz time!

Last week’s turned out to be harder than I expected it to be, with only 34% of people getting the correct answer… let’s see if this week’s goes any better!

Which of the following does NOT create a new stacking context?

  • An element with opacity less than 1
  • An element with position: relative
  • An element with position: sticky
  • An element with transform: scale(0.9)

As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer you'll see if you were right or not.

​

🔗 Other awesome stuff around from the web

And thanks to someone asking how to make a figure with a figcaption match the width of the image even if the text is long, I have a new trick up my sleeve to have the width of an element not impact its siblings!

That was a bit of a mouthful, but Temani Afif was the one to jump in the thread to mention using `contain: inline-size` on the figcaption, and Stephanie Eckles stepped it up a little, adding `inline-size: fit-content` on the figure itself.

🏁

Have a fantastic week!
Kevin

Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

Conquering Responsive Layout

A free course to help you approach responsive layouts with the right mindset.

​Enroll →​

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

​Enroll →​

Advanced

Beyond CSS

An advanced course that dives into project architecture, theming, design systems, and more.

​Enroll →​
​

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) PRE-S: The latest State of CSS survey is now open! I’ll be doing a live stream this upcoming Thursday or Friday, going through it myself, but you might as well jump in first! The more people who take this, the more representative it is, and the browsers use the data from these to know what features need improving and what is missing, so it is worth the time to take! Hello Reader, I’ve been getting a lot of comments lately asking...

13 days ago • 5 min read

View this email in your browser (or share it with a friend!) Hello Reader, Ethan Marcotte first coined the term Responsive Design in an article for A List Apart back in 2010. Yup, it’s been 15 years. As the name implies, Responsive Design involves writing CSS that allows the layout to respond to how a user is consuming the content, with “Fluid grids, flexible images, and media queries [being] the three technical ingredients for responsive web design.” For a long time, media queries (@media)...

20 days ago • 4 min read

View this email in your browser (or share it with a friend!) Hello Reader, I got this comment on a video that I posted this week: For such a fundamental concept, you'd think it would be something that's talked about more, but it really isn't talked about enough. Of course, that's why I made this video! I only really started thinking about this more recently, because for some reason, it was one of the things I sort of never thought too much about. It might seem strange, but for me, it was...

26 days ago • 7 min read