Let’s Make a Rubber Button With HTML, CSS and SVG
While I wasn’t looking, an elastic hover/active effect I shared on CodePen was viewed more than 11,000 times. Here’s how it works!
Animation
Accessible Animated GIF Alternatives
Can our GIF-like embeds support playback controls, alternative text, and reduced motion?
Animating Slack reminders with the View Transitions API
Animation can help inform user about changes in your app. And the View Transitions API makes adding animations easier than ever.
Is there a viable animated GIF alternative yet or what?
Animated GIFs remain popular in spite of their beefy file sizes. But what are we supposed to use instead?
Our Surprisingly Simple Navigation Hover Effect
Fading adjacent menu items on hover is simpler than you might think.
Responsive Design Process that Works
Responsive design sprints are a significantly better way to design and build for today's web than the traditional web design process. We provide the receipts. Unfortunately, not every organization can adopt this responsive design sprints. Why is that and what can be done about it?
Generating SVG Solar Systems, Part 2: Filters, Gradients, and Clip Paths
Turning simple shapes into complex illustrations using some SVG magic.
Generating SVG Solar Systems, Part 1: Setting the Scene
Using JavaScript, SVGs, and CSS to procedurally generate unique solar systems.
Micro-interactions to incorporate for powerful emotional design
Micro-interactions are small, singular interactions that serve one purpose: communicate meaningful feedback to users in a positive and welcoming way. People like to constantly know what’s going to happen when an action is performed and…
CSS Animation Timelines: Building a Rube Goldberg Machine
Lately I've been using variables to plan out pure CSS timelines for complex animations. I built an SVG and CSS Rube Goldberg machine to put this technique to the test!