CSS Tricks

Unleash the Power of Scroll-Driven Animations

Geoff Graham |
I’m utterly behind in learning about scroll-driven animations apart from the “reading progress bar” experiments all over CodePen. Well, I’m not exactly “green” on the topic; we’ve published a handful of articles on it including this neat-o one by Lee … Unleash the Power of Scroll-Driven Animations... read more

Combining forces, GSAP & Webflow!

Ryan Trimble |
Change can certainly be scary whenever a beloved, independent software library becomes a part of a larger organization. I’m feeling a bit more excitement than concern this time around, though. If you haven’t heard, GSAP (GreenSock Animation Platform) is teaming … Combining forces, GSAP & Webfl... read more

Mastering theme.json: You might not need CSS

Geoff Graham |
I totally get the goal here: make CSS more modular and scalable in WordPress. Put all your global WordPress theme styles in a single file, including variations. JSON offers a nicely structured syntax that’s easily consumable by JavaScript, thereby allowing … Mastering theme.json: You might not nee... read more

Solving Background Overflow With Inherited Border Radii

Zell Liew |
One of the interesting (but annoying) things about CSS is the background of children’s elements can bleed out of the border radius of the parent element. Here’s an example of a card with an inner element. If the inner element … Solving Background Overflow With Inherited Border Radii originally pub... read more

Close, Exit, Cancel: How to End User Interactions Well

Preethi |
What’s in a word? Actions. In the realm of user interfaces, a word is construed as the telltale of a control’s action. Sometimes it points us in the correct direction, and sometimes it leads us astray. We talk a lot … Close, Exit, Cancel: How to End User Interactions Well originally published on C... read more

CSS Tricks That Use Only One Gradient

Temani Afif |
CSS gradients have been so long that there’s no need to rehash what they are and how to use them. You have surely encountered them at some point in your front-end journey, and if you follow me, you also … CSS Tricks That Use Only One Gradient originally published on CSS-Tricks, which is part of th... read more

WPGraphQL Becomes a Canonical Plugin: My Move to Automattic

Geoff Graham |
It’s always a gas when a good person doing good work gets a good deal. In this case, Jason’s viral WPGraphQL plugin has not only become a canonical WordPress plugin, but creator Jason Bahl is joining Automattic as well. I’m … WPGraphQL Becomes a Canonical Plugin: My Move to Automattic originally p... read more

2024: More CSS At-Rules Than the Past Decade Combined

Juan Diego Rodríguez |
More times than I can count, while writing, I get myself into random but interesting topics with little relation to the original post. In the end, I have to make the simple but painful choice of deleting or archiving hours … 2024: More CSS At-Rules Than the Past Decade Combined originally publishe... read more

Smashing Hour With Heydon Pickering

Geoff Graham |
I sat down with Heydon Pickering in the most recent episode of the Smashing Hour. Full transparency: I was nervous as heck. I’ve admired Heydon’s work for years, and even though we run in similar circles, this was our first … Smashing Hour With Heydon Pickering originally published on CSS-Tricks, ... read more

Recipes for Detecting Support for CSS At-Rules

Juan Diego Rodríguez |
The @supports at-rule has been extended several times since its initial release. Once only capable of checking support for property/value pairs, it can now check for a selector using the selector() wrapper function and different font formats and techs using … Recipes for Detecting Support for CSS ... read more