Neumorphic Rocker Switch.@CodePen #CSS #JS

Calendar Widget.@CodePen #React #CSS

Spinner Cube.@CodePen #SVG #CSS

World clocks with a slider for peeking ahead or behind the current time.@CodePen #React #CSS

RT @bramus: Ooh, my Chrome DevTools extension for debugging Scroll-Driven Animations is approaching 3000 users …. 🔗 .

LEGO Stacking Preloader.@CodePen #CSS

Pricing Plans.@CodePen #React #CSS

More info:.

#CSS is slowly turning into Sass. Now we have custom functions!. While calc() is powerful, it doesn’t always promise clean or scalable code. Some use cases:. - Fluid design calculations.- Math utility functions.- New way to do theming. ⚠️Chrome Canary 136+, soon in Chrome 139

Thin Bar Graph Widget.@CodePen #React #CSS

Financial Score Widgets.@CodePen #React #CSS

A fluid card grid that’s fair and square!.@CodePen #CSS #React

Also works in Chrome Canary 136 and later if you still can’t download Chrome 138.

🚨 sibling-index() & sibling-count() shipped in Chrome 138!. Style elements by position without :nth-child()!. ✅ Alternate styles.✅ Adjust to sibling count.✅ Delayed animations. No more :nth-child(1), :nth-child(2), and so on. Another step towards DRYer and cleaner #CSS!

Hypnotic Spinners.@CodePen #React #SVG

RT @jonkantner: SaaS Landing Page.@CodePen #React #CSS

SaaS Landing Page.@CodePen #React #CSS

RT @jonkantner: Box Preloader.@CodePen #CSS

Box Preloader.@CodePen #CSS

More fun with `react-flip-toolkit`. Rows in this file browser will slide into place when choosing a sorting option!. @CodePen #React #CSS

A great addition to DevTools!.