css-irl.info css-irl.info

All the CSS Colours

I recently made a demo where I needed to list all the CSS named colours as options in a select input. I didn’t want to write them all out by hand, but the trouble was I couldn’t find just a list of all 148 colours anywhere as plain text. What I ended up doing was copying the HTML from this handy CSS Tricks article(which also includes the corresponding hex codes, and is very useful), then replacing the surrounding table markup with...

css-irl.info css-irl.info

Variable Font Animation with CSS and Splitting JS

A little while ago I made an animated variable font demo on Codepen. In this article I’ll explain what variable fonts are, how they can be animated with CSS, and how I created a breathing effect with CSS and a little bit of Javascript. See the Pen Variable font animation by Michelle Barker (@michellebarker) on CodePen. Introducing variable fonts Variable fonts are exciting new development in web typography. Instead of multiple font...