Keynote. Even More CSS Secrets
summary
Ten concrete CSS techniques appear: use multiply/screen blending modes to get cut‑out text on black or white backgrounds; embed SVG data-URI emojis as animated backgrounds and style meter elements; animate SVG borders via stroke-dasharray for marching‑ants; compute variable‑font weight from size with linear/quadratic regression; enable keyboard menus with focus-within; build conic-gradient pie charts driven by CSS variables and animate them by registerProperty via Houdini; and use display:contents so descendants become grid/flex children.
AI-written summary · about
chapters (17)
- 0:00Start
- 3:29blending modes
- 13:06style meter elements
- 15:01a simple rectangle
- 15:37animate this with a keyframe
- 17:11apply it to an html element as a border
- 19:48turn it into a cool css border on an html element
- 21:02apply line cap
- 22:35creating headings with a flexible line
- 25:56css pop-up menus
- 34:54variable font
- 35:48tweak each line
- 49:38use linear or quadratic regression
- 50:55string the viewport
- 54:51display these items as two columns
- 57:11display them in a grid
- 1:03:26add the potential for a second color
