Introvert. Inclusive Frontend Developer at AKQA Venice. (CSS❤️/A11y/JS/React/NextJS/GraphQL)
Also: INTJ, dad of two kids, trees funder, lonely bass player.
| Personal | https://fabrizio.dev/ |
| Codepen | https://codepen.io/fcalderan |
| https://www.linkedin.com/in/fabriziocalderan/ |
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
@bramus I think I've solved that issue you noticed: I set an higher transition delay for the scroll-delayed property so it's longer just a bit more than the transition duration of the header (probably I updated the demo after your article).
Anyway I commented all the CSS code and now it works fine for what I tested so far. 🙂
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!
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).
Here is the codepen link:
https://codepen.io/fcalderan/pen/PorLqrE
(however It can also be used on browsers that do not support scrolling animations, where a basic version is provided)
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)
