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