Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed ancho
Anchor Positioning is transform-aware in Chrome 144+
Tag Archives: demo
Combining Scroll-Driven Animations with @starting-style
How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …
Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.
Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up.
By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value.
CSS-only Custom Range Slider with Motion
CSS color-contrast() – Target Contrast Ratio Demo
Nice demo by Daniel Yuschick, showing how color-contrast() does its thing. Using the controls you can change the target contrast using a keyword or a custom value. Good use of Custom Properties there as well! 👨🔬 To check this demo you’ll need Safari Technology Preview 122+ with the CSS color-contrast() Experimental Feature enabled.
Synchronized Scrolling Tickers
These Scrolling Tickers by Fabrizio Calderan are quite nice. By calculating the rendered width (via JS, passed to CSS using a Custom Property) and taking that into account to calculate the animation-duration he’s able to synchronise their speeds. What I like most though is how the repetition of the ticker’s content is achieved. Where I’ve …
Generative Gooey Flow Fields
I very much like this demo by Adam Kuhn: This demo is quite heave on your system. As it relies on altering the CSS d property to animate the SVGs, it’ll only work in Chromium based browsers for now.
Magic PostCSS Custom Combinators using :has()
Similar to how you can (ab)use :nth-child() to create “new” CSS selectors, you can leverage :has() to create some typical combinators. Brandon McConnell did just that: y:has(+ x) selects the first preceding y sibling of x: y:has(~ x) selects all preceding y sibling of x: x + y, y:has(+ x) selects the first preceding and …
Continue reading “Magic PostCSS Custom Combinators using :has()“
Reverse-Scrolling Columns with CSS Scroll-Timeline
