Breaking Blank

on YouTube ↗28m

" summary

Shows concrete CSS techniques that go beyond templates: using shape-outside with PNG and polygon fallbacks (plus an Adobe Chrome extension to place points), practical clip-path for animated masks to avoid text jank, and mask-image combined with -webkit-background-clip for image-filled type. Also demonstrates SVG filters and CSS filter chains, per-background blend modes, hyphenation/overflow-wrap fixes, links to brutaliswebsites and typetest.org, and notes responsive caveats and where animations break.

AI-written summary · about

" chapters (11)

1. 0:00Blank page syndrome
2. 3:14Print vs web design
3. 6:57Flash limits
4. 10:29Breaking web rules
5. 10:51CSS Shapes image wrap
6. 14:08Advanced borders clip-path
7. 17:44Image masks for punch
8. 21:04SVG blend modes filters
9. 23:15Advanced CSS text
10. 26:07SVG path text layouts
11. 27:30Layout innovation

" related talks

• 42mBreaking the norm with creative CSSAgnieszka Naplocha · Codemotion Milan 2017
• 17mBreaking the norm with creative CSSAga Naplocha · dotCSS 2018
• 24mBreaking the norm with creative CSSAga Naplocha · Frontend United 2018
• 36martistic.cssAga Naplocha · JSConf.Asia 2019
• 01h 09mEven More CSS SecretsLea verou · FrontMania 2018
• 26mCSS animation Today (2021 Edition)Julia Miocene · CSSCamp 2021
• 30mCutting-edge CSS features: Gaining control of Web DesignRazvan Caliman · CSSConf EU 2013
• 01h 14mKeynote. Even More CSS SecretsLea verou · You Gotta Love Frontend Conference 2018