WDW #421

🗞 Highlights

Mobile-first CSS: Is it time for a rethink?
Should we prioritize one particular device—any device—over others?
Patrick Clancey (Design)

The Dos and Don’ts of pairing typefaces
These typography guidelines will build your confidence in creating designs that maximize usability without sacrificing aesthetics.
Rachel Krause (Typography)

UI interactions & animations
Mary Lou shares a collection of the best and most creative animations from Dribbble from the past couple of weeks.
Codrops (Inspiration)

15 best new fonts, June 2022
In this month’s collection, Suzanne picks fonts that test the limits of weight, height, and gravity.
Suzanne Scacca (Typography)

Writing better CSS
We know CSS is evolving fast lately, but what could qualify as better CSS? Adam shares his point of view.
Adam Laki (CSS)

🗞 Tools / Resources

A complete guide to using CSS filters with SVGs
In this article you will learn to enhance images, as well as other graphical elements, with SVG filters, and perform distortion, color manipulation, blurring, color inversion, etc…

One line of CSS to add basic dark / light mode
The title says it all, a single line of CSS to enable dark / light form elements and backgrounds.

Single element loaders: the bars
CSS-Tricks brings us complex-looking loading animations to create loading bars.

A previous sibling selector
See how Jim Nielsen styled every “call to action” links with a specific color while leaving all other <a> links inheriting their color from the document.

Fun CSS-only scrolling effects
Lynn Fisher explores the idea of layers obscuring and revealing things to create different illusions and to experiment with scroll speeds.

⚡ Snippets