Cool demos I created in june 2023

338

Ferris Wheel with CSS Trig and sibling-count web-component. I wanted to try out CSS Trigonometric functions (cos() and sin()) and I wanted a better way of knowing how many siblings a parent had and what the index of each sibling was. So I created a web-component `sibling-count` to do the dark magic for me.
Subgrid with CSS Nesting collection of books. Turns out subgrid is coming to Chrome (currently in Chrome Canary), and I guess Edge; it already is in both Safari and Firefox. CSS Nesting is in Chrome/Safari/Edge and is coming to Firefox (currently in Nightly behind a flag).
Relative Color Syntax. Supported in Safari but not currently in Firefox/Chrome/Edge.
Scroll driven animations. Works currently in Chrome Canary. Scroll the page, see the circular text rotate.