📝 This Week in Web Design and Development

View this newsletter on the web.

First up, Chris and Dave redesigned the site for their mighty fine podcast, The ShopTalk Show and I can’t remember the last website where I ooo’d and aaa’d over it as much as this one. The design is inspired by old ASCII art so that typographic elements like equals signs or stars make up the borders between things.

Not only that but it uses a pixel font called Unibody 8 that I love the look of, especially at smaller sizes. There’s also some nifty stuff going on with those headers if you take a look under the hood…

📝 This Week in Web Design and Development

View this newsletter on the web.

To kick things off this week, here’s a great post about how to add a gradient overlay to text with CSS. Sarah L. Fossheim walks through it all and I think it’s worth adding this technique to our toolbox since I don’t see this effect enough on the web:

Here’s a particularly nifty use of it in an animation for a button hover effect that Sarah shows off at the end of the post:

As I was looking through Sarah’s work I found another great post about how to recreate a Polaroid camera with CSS gradients. In this post, Sarah shows how that project got started and looks at each bonkers step along the way of making this absolute gem:

📝 This Week in Web Design and Development

View this newsletter on the web.

Ever heard of the scroll-margin-top CSS property?

Neither had I! Perhaps its most useful ability is for when you have a fixed header on a website and want to use jump links. This way you can nudge the content so that it’s always visible, like this:

There’s been a bunch of times in the past when I’ve clicked on a link on a website and the fixed header has messed with the new scroll position so thankfully this solves that problem entirely!

Also, there’s an interesting new feature coming in Chrome called Text fragments that let you link to any highlighted text on a page. (Note how it scrolls you to the middle of the page… interesting eh?)

📝 This Week in Web Design and Development

View this newsletter on the web.

It was fun watching a bunch of back and forth blogging between a bunch of smart people quoting a bunch of smart people last week. If you missed it, you might wanna start at the end and work backward. It started with some broad and interesting classifications for design systems and sorta branched out a little bit from there, while not losing that core idea.