Design

Common animation transitions

A while back when reviewing common animation transitions for pages & elements I compiled a massive list of web-based motion and how I recommend you use them. Remember, using a ‘prefers-reduced-motion’ fallback doesn’t mean you must remove all animation. Reduce X or Y pixel movement and keep transition speeds gentle. Crossfades, color shifts, and blurs […]

Cross-platform Dynamic Wallpapers

This week snuck up on me, so I’ll be taking a break this from the Accessibility Jumpstart series to make sure I provide a quality resource for week 4. Dynamic wallpapers Dynamic wallpapers were first introduced in MacOS Mojave, and the time-lapse library Apple provides has been growing. Some clever people have reverse engineered the […]

Color Input Compared Cross-Browser

As you may know, many of the HTML5 input types have been defined, but do not have a recommended or consistent experience across operating systems, nor browsers. Recently, the team at work and I discussed whether we should use the default HTML5 input type of ‘color’ or roll our own. As of December 2020, here’s […]

Comparing CSS Width Units

Ever wanted to know what every CSS unit looked like when compared to one another? Yeah, me too. See the Pen Various sizing units compared by Chris LaChance (@chrislachance) on CodePen. Looks like ‘Inches’ is naturally the widest fixed unit. Beyond the ‘Pixel’ value for fixed widths, none of the others seem that practical as […]