Category Added in a WPeMatico Campaign
Sometimes designers have silly ideas that eventually grow on you. That happened to me with this concept where I had to build columns of items moving in opposite directions when a user scrolls the page. CodePen Embed Fallback Note: This demo respects reduced motion settings, so you’ll need to enable Read more…
Chrome has shipped scroll-triggered animations, and is the first browser to do so. If you update to Chrome 146, you can view the demo below, where the background of a square fades in over the duration of 300ms, but only once the whole element is within the viewport. CodePen Embed Read more…
I need you all to promise me you’ll be cool about this. I‘m here to tell you about an upcoming web platform feature that has been a long time coming; a feature that not only fulfills a use case sorely overdue for a better solution, but does so by way Read more…
No secret that Adam’s all about props. Dude gave us Open Props a good while back for a slew of preconfigured variables for color, shadows, sizing, typography, among much much more. Now he’s back with Prop For That, a similar sorta idea, but mind-blowing in the sense that it creates Read more…
Mark Underhill: And now to the reason I wrote this post: including the word “navigation” in your <nav> labels. There’s no need. If we did, we’d hear something like “Navigation, Primary navigation”. Not the end of the world, but unnecessarily repetitive for screen reader users. One of those nuances to keep in Read more…
I love the fact that CSS is finally reclaiming control over visual interactions, taking charge of the styling, the animation, and the accessibility exactly as it should. Today, native browser capabilities allow us to move the heavy lifting away from the JavaScript main thread and closer to the GPU. By Read more…
I’ve said one and meant another, and I’ve used one when I needed another. Please bear with me as I note the high-level similarities and differences between scroll-driven animations, scroll-triggered animations, container query scroll states, and view transitions for my future self. Scroll-Driven Animations A scroll-driven animation is an animation Read more…
In the previous article, I spoke about the why and how to use a Markdown component in Astro. Here, we’re going to expand on that and help you use Markdown everywhere — regardless of the framework you use. So, this works for React, Vue, and Svelte. The entire process hinges Read more…
Some text effects are relatively hard to pull in CSS, the main reason being we are unable to target individual characters (something many of us want in the form of ::nth-letter(), although we have basis for it with ::first-letter that gives us access to a box element’s first glyph. But Read more…
What’s !important #12 talks about the old (testing in Safari when you don’t have Safari), the new (::checkmark), the in-between (anchor positioning but with HTML), and more. Buckle up! Testing in Safari when you don’t have Safari Source: Frontend Masters Safari is the second most popular web browser, but is Read more…
