Lawrence 'Art' Goble, the underappreciated Hanna-Barbera background designer behind 'The Flintstones,' 'Yogi Bear,' and 'Quick Draw McGraw,' solved a real engineering problem: how to communicate character, mood, and story in a single static frame on a small TV screen. His answer was typography integrated directly into the artwork, flat silhouettes, and hard graphic shapes. This article uses those title cards as the source material for a practical CSS and SVG tutorial.
The technical core covers three CSS properties in combination: 'text-shadow' with layered offsets and blur values, '-webkit-text-stroke' for bold outlines now supported across modern browsers without the prefix, and 'paint-order' to control whether stroke renders above or below fill, a detail that breaks thin letterforms at thick stroke widths. Code examples are specific, showing exact pixel values and hex colors pulled directly from the original Hanna-Barbera cards. The author also built a working Toon Text Title Generator at stuffandnonsense.co.uk that outputs clipboard-ready CSS.
The reason to read the full article is not the conclusion. It is the section on layering multiple 'text-shadow' values to replicate the 'Let's Duck Out' glow effect, and the 'paint-order' fix that prevents strokes from eating into letterforms. Those two techniques alone will change how you approach CSS typography. The broader series on CSS and SVG animation runs to at least seven parts and is worth treating as a reference curriculum.
[READ ORIGINAL →]