cool demos I've created june 2023

List of Codepens from June 2023

• 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.

  See the Pen Ferris wheel : Using sibling-count web component and CSS Trig by Andrew Hudson (@bigandy) on CodePen.

• 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).

  See the Pen CSS Subgrid Book Cards by Andrew Hudson (@bigandy) on CodePen.

• Relative Color Syntax. Supported in Safari but not currently in Firefox/Chrome/Edge.

  See the Pen relative color syntax + cos() - Works in Safari/Chrome/Edge by Andrew Hudson (@bigandy) on CodePen.

• Scroll driven animations. Works currently in Chrome Canary. Scroll the page, see the circular text rotate.

  See the Pen css scroll animation + css trig by Andrew Hudson (@bigandy) on CodePen.