Even More CSS Secrets
summary
Demonstrates concrete recipes: use multiply/screen blend modes to make cut‑out text on black or white, embed SVG data URI (no base64) to turn glyphs and emojis into animated images and styled meters, animate marching‑ants with stroke‑dasharray/offset, fake rich borders with SVG stroke gradients, treat pseudo‑elements and text nodes as flex/grid children, enable keyboard menus with focus‑within, build conic‑gradient pie charts driven by CSS variables (animation needs CSS.registerProperty/Houdini), and auto‑tune variable fonts + regression from font‑size to weight.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:46Cut out text with blending
- 14:04SVG data URIs for text
- 27:14Advanced SVG borders
- 31:21Accessible CSS pop-up menus
- 35:58Variable fonts and stroke equalization
- 49:08Flexbox hacks and container queries
- 53:12CSS Grid sorting techniques
- 58:42Conic gradients and pie charts
- 1:02:22Display contents for alignment
- 1:05:14Q&A
