New Pen
User Avatar of Noah Blon

Noah Blon

Minneapolis, MN PRO

9 Pens - What Can a Frontend Dev do with 3 Seconds, 5 Colors, and 250x250px?

Although my job title -- “client-side software engineer” -- doesn’t typically make people think of design, I do design work every single day. On a typical project, I...

A Practical Guide to Flexbox: Don't Forget about flex-shrink

As I learned flexbox, I was captivated by the way items grow to fit their container. But, recently I've realized its just as important to think about the way items shrink....

A Practical Guide to Flexbox: Understanding space-between, Flexbox's Unsung Hero

The more I use flexbox, the more one rule comes up over and over again: justify-content: space-between. In this post, I'll demonstrate how I approach a layout problem with...

Coloring SVGs in CSS Background Images

I love using SVG in CSS background images but it sucks that you can't alter the fill color easily within your CSS. Here are a few ways around that.

SVG in CSS backgrounds


An Intro to SVG Animation with SMIL

Sitepoint recently posed a challenge to recreate this fun gif animation in code:

It looks deceptively simple, but it's hard to do without a lot of keyframes. My mind jumped...