#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! `transition-delay: calc(sibling-index() * .1s);` or ```css --hue: calc(sibling-index() * 50); color: oklch(70% 70% var(--hue)); ``` more info and a Codepen to fork ⤷
nerdy.dev
Let the stagger experiments begin · March 11, 2025
Elements can now know which position they are in the DOM tree (index) and how many other elements there are in total (count).
want 3D perspective in your view transitions?
nerdy.dev
View Transitions 3d Perspective · February 27, 2025
To give View Transitions a perspective , either: ::view-transition-image-pair(--foo) { perspective : 500 px ; } /* or */ ::view-transition-new(--fo...
 image
Can emoji's save us from naming hell? ⤷
nerdy.dev
An Emoji Naming Convention · February 20, 2025
Prevent collisions and make it clear.
30 #CSS scroll driven animation examples which is your favorite? - z-stack and slither are mine
nerdy.dev
Scroll Driven Animations Notebook · February 6, 2025
For chill time I'm adding to this scroll driven animations notebook . Some pretty wild stuff in there already, gettin wierder each bedtime rout...
new <footer> nerdy.dev
#CSS advanced `attr()` Unlocking new ways to integrate with CSS from your HTML
nerdy.dev
Advanced Attr · January 17, 2025
Advanced attr() in Chrome 133 . Opening new ways to integrate with CSS from your HTML: &amp;#x3C; li scroll-snap = &quot;start&quot; &gt;&amp;#x3C;...
**Focus By Demotion** a use case for #CSS `:hover > :not(:hover)`
nerdy.dev
:hover > :not(:hover), sorry not sorry · January 6, 2025
Focus by demotion.
#CSS feature faceoff: scroll triggered stuck nav (left) vs scroll driven animation nav (right) which do you prefer? try it https://codepen.io/argyleink/pen/gbYGgrB (use Canary for the scroll-state() support)
Putting AI in your product? You're gonna need #CSS gradient text animations (if you want to be cool) So here, a recipe! https://codepen.io/argyleink/pen/vEBmZNw ↪
nerdy.dev
Animated Gradient Text · December 20, 2024
Animated gradient text is like the poster child of AI right now. Gotta have that animated gradient text sparkle button thingy to be cool. So here! ...
**CSS Wrapped 2024** one stop shop for the Chrome #CSS features launched in 2024!
nerdy.dev
CSS Wrapped 2024 · December 5, 2024
5 new CSS features for components, 4 for user interactions, and 8 for developer experience!