Creative Text Effects with CSS
summary
Shows concrete recipes to make editable, selectable, searchable text effects using pure CSS: layer text via data- attributes and ::before/::after instead of duplicated markup, create splits and masks with background-clip: text and mix-blend-mode, carve shapes with clip-path, and fake 3D with long text-shadow stacks (examples up to ~60px). Demonstrates layered and variable fonts (animated via font-variation-settings), notes cross‑browser reality (split technique works back to IE8; variable fonts best in Chrome/Safari; some Chrome animation leaks), and publishes runnable examples on CodePen.
AI-written summary · about
chapters (14)
- 0:00Start
- 1:26DATA-ATTRIBUTES
- 2:48PSEUDO- ELEMENTS
- 7:20RAINBOWS
- 8:24BLEND MODES
- 12:01background-clip
- 12:12Vertical Split
- 14:39swoosh
- 15:52LAYERED FONTS
- 18:13LIMELIGHT
- 23:15variablefonts
- 28:32GRASS
- 31:16CLIP-PATH
- 35:58FRACTURE
