Web Development

Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS

Browser makers didn’t take long to add the movement capabilities to CSS. The simple :hover pseudo-class came first, and a bit later, the transitions between two states. Then came the ability to change states across a set of @keyframes and, most recently, scroll-driven animations that link keyframes to the scroll position. Even with these added […]

Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS Read More »

GSAP is Now Completely Free, Even for Commercial Use!

Back in October, the folks behind the GreenSock Animation Platform (GSAP) joined forces with Webflow, the visual website builder. Now, the team’s back with another announcement: Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone. Thanks to Webflow GSAP is now 100% free including all of the bonus plugins like SplitText, MorphSVG,

GSAP is Now Completely Free, Even for Commercial Use! Read More »

Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?

You’ve got a Pinterest-style layout to build, but you’re tired of JavaScript. Could CSS finally have the answer? Well, for a beginner, taking a look at the pins on your Pinterest page, you might be convinced that the CSS grid layout is enough, but not until you begin to build do you realise display: grid

Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? Read More »

Modern Scroll Shadows Using Scroll-Driven Animations

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before (indeed, it’s one of his all-time favorite CSS tricks), by layering background gradients with different attachments, we can get shadows that are covered up when you’ve scrolled to the limits of the element. Geoff covered a newer approach that uses

Modern Scroll Shadows Using Scroll-Driven Animations Read More »

CSS shape() Commands

The CSS shape() function recently gained support in both Chromium and WebKit browsers. It’s a way of drawing complex shapes when clipping elements with the clip-path property. We’ve had the ability to draw basic shapes for years — think circle, ellipse(), and polygon() — but no “easy” way to draw more complex shapes. Well, that’s

CSS shape() Commands Read More »

WCAG 3.0’s Proposed Scoring Model: A Shift In Accessibility Evaluation

Since their introduction in 1999, the Web Content Accessibility Guidelines (WCAG) have shaped how we design and develop inclusive digital products. The WCAG 2.x series, released in 2008, introduced clear technical criteria judged in a binary way: either a success criterion is met or not. While this model has supported regulatory clarity and auditability, its

WCAG 3.0’s Proposed Scoring Model: A Shift In Accessibility Evaluation Read More »