CSS-Tricks·1yFluid Everything Else
The post discusses modern approaches to responsive design, focusing on the limitations of traditional methods like media queries. It introduces fluid typography and layout techniques using container queries and CSS's clamp() function to create more seamless and adaptive designs. Examples and code snippets are provided to illustrate these concepts.
CSS-Tricks·1yPopping Comments With CSS Anchor Positioning and View-Driven Animations
CSS Anchor Positioning and Scroll-Driven Animations enable new possibilities in web development, previously possible only with JavaScript. This post demonstrates how to use these CSS features to pop footnotes as comments on the sides of text in a blog post. It covers the foundation, positioning the footnotes using anchors, and animating them as they come into view. The post also addresses how to handle footnotes for mobile screens, making them display as regular notes when screen space is limited.
CSS-Tricks·1yWeb-Slinger.css: Like Wow.js But With CSS-y Scroll Animations
Web-Slinger.css is a library that allows you to create scroll-triggered animations using pure CSS without JavaScript. It introduces a set of class names and custom properties that enable one-off animations triggered by scroll events. The technique leverages new CSS features like the `animation-timeline` property and style queries, offering more flexibility compared to JavaScript-based libraries like Wow.js. The post details how to create a basic example and a more advanced sticky element using Web-Slinger.css.