Super Hero Layouts
summary
Recreates comic-page layouts with concrete CSS techniques: a measured 16-column grid for Golden Age staggered panels, multirow spans to show Bronze Age bridging, precise row math (9985 ÷ 9 → 109 base unit) for Modern overlapping panels, and layered clipping via clip-path and shape-outside to produce irregular shapes and text wrap. Uses CSS Grid, writing-mode, subgrid (Firefox 2019, Safari 16, Chrome behind flag in 116 so subgrid now shipping), clip-path, and live CodePen examples; techniques work with caveats for masks and international text flow.
AI-written summary · about
chapters (13)
- 0:00Superhero layouts intro
- 5:25Comic book ages overview
- 10:21Golden Age layouts with CSS Grid
- 11:25Bronze Age complex panels
- 13:12Modern Age nine-panel grids
- 19:59Layering panels for depth
- 24:34Accessibility in layered layouts
- 26:21Breaking free from boxy web designs with creative shapes
- 30:55Clip-path for comic layouts
- 33:24Text wrapping with shape-outside
- 35:52International reading directions
- 38:37Comic techniques for modern web
- 41:53Q&A
