I'm trying to code an accessibile sortable list widget.

It works quite well using a keyboard and a screen reader, but some feedbacks would be really appreciated. #a11y

Demo: https://codepen.io/fcalderan/pen/KwPEwqK

With #CSS scroll-driven animations, custom properties and style queries we can realize a sticky header that disappears on scrolldown and shows again during and after a scrollup.

No JavaScript at all!

https://codepen.io/fcalderan/full/LYKwyyd

A #CSS-only version of minesweeper for Chrome (but made with sharks 🦈).

https://codepen.io/fcalderan/full/oNKxPME

You can arrange the sharks as you prefer, the other cells will update their numbers automa(g)ically (using custom properties and style queries creatively).

I like the scroll effects made in JS in the Alpenite homepage (http://alpenite.com/en) so I'm trying to code them using only #CSS scroll-animations and no JS at all.

This is the result so far. Is it quite good?

I tried to code a simple music player widget in #CSS (and learned some new stuff)

https://codepen.io/fcalderan/full/JjQeRzY

Just updated a demo I made some time ago that shows the remaining reading time on scroll. JavaScript not used at all! 🚀

Works on Chrome Canary 115+ with:
– #CSS scroll animations
– Counters
– @property (#Houdini)

https://codepen.io/fcalderan/pen/JjNKoLP

Have you checked if your website is low carbon?

Some simple strategies to limit emissions:
–📉reduce the total amount of requests;
–🖼️use modern image formats (AVIF and WebP);
–🗿prefer SSG over SSR when it's possible;
–🗺️serve assets from a CDN.

https://www.websitecarbon.com/

For absolutely no reason here is a hexagon made of responsive hexagons in #CSS, using #Grid layout, variables and trigonometry!

The magic is ✨
aspect-ratio: calc(1 / cos(30deg));

https://codepen.io/fcalderan/full/YzJVvBx