CodePen

New Pen
User Avatar of Noah Blon

Noah Blon

Minneapolis, MN PRO

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...