SiteBackgrounds, Effects & CSS Oddities · Modern CSS demos
Pure-CSS technique deriving a responsive grid's column count, row count and per-item coordinates using round(), sibling-count() and sibling-index().
Why it’s a gem
Grid introspection with zero JavaScript, and it composes with the new CSS if().
Visual editor for previewing every CSS position-area value against an anchor, exporting the matching declaration.
Self-positioning popovers built entirely on native CSS anchor positioning with no JavaScript positioning library.
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.