Super Hero Layouts
summary
Recreates comic layouts using concrete techniques: a 16‑column CSS Grid with 12px gaps and grid-auto-rows for Golden Age staggered panels; multi-row spanning to mimic the Spider‑Man bridge fall; a nine‑panel Watchmen grid that keeps one image intact using an overlap container and subgrid (Firefox 2019, Safari 16; Chrome pending) or display:contents fallback; layered panels with z-index, transform and clip-path polygon for irregular shapes; text wrapping via shape-outside and vertical text with writing-mode for manga. Codepens link to live examples.
AI-written summary · about
chapters (11)
- 0:00Comic book layouts on the web
- 5:46CSS grid for modern web
- 7:12Golden Age grids
- 10:47Bronze Age multi-row panels
- 13:13Modern Age subgrid layouts
- 21:16Layering panels in comics
- 26:41Breaking out of boxy layouts with clip-path
- 34:54CSS shapes for panels
- 39:48Manga text support
- 43:01Comic techniques for web
- 44:27Q&A
