GitHubBackgrounds, Effects & CSS Oddities · Modern CSS demos
Visual editor for previewing every CSS position-area value against an anchor, exporting the matching declaration.
Why it’s a gem
position-area has thirty odd values nobody memorises; this makes them visual
Self-positioning popovers built entirely on native CSS anchor positioning with no JavaScript positioning library.
Pure-CSS technique deriving a responsive grid's column count, row count and per-item coordinates using round(), sibling-count() and sibling-index().
Showcases of popular CSS animations reimplemented without any animation library, each with annotated source.
Gallery of classic 3D demos — cloth simulation, Menger sponge, black hole, chaotic attractors — rendered entirely with retained HTML and CSS.
Archive of three hundred plus short, demo-backed tips on modern CSS including masks, gradients, has() and scroll timelines.
One hundred seventy front-end challenges solved with pure CSS, covering art, effects, loaders and layout tricks.