"Andy Clarke with a brand-new resource. It generates the sort of fun typography that Andy commonly uses in his own work that's geared towards cartoon headings. There are a number of configurable options for font, color, stroke, letter spacing, and shadows. And it spits out the CSS for you to copy-paste. What if you want to individually style each letter? Well, there's no such thing as :nth-letter in CSS at the moment."
"There are, however, tools that will wrap each character in a separate <span>, the most tradition one being SplitText.js. But Andy decided to make a tool for that - called Splinter.js - as well because he saw opportunities to enhance the accessibility of the generated markup to help prevent some assistive tech from choking on the spans. ( GSAP's version also does a good job of this.) Som instead of: ...we get ARIA-spiced markup: And it supports line breaks! Direct Link →"
A brand-new resource generates playful, cartoon-style typography geared toward cartoon headings. The tool offers configurable font, color, stroke, letter-spacing, and shadow options and outputs ready-to-copy CSS. When individual letter styling is needed, there is no :nth-letter selector in CSS, so character-wrapping tools are used. Splinter.js wraps each character in spans while enhancing accessibility to prevent assistive technologies from choking on the markup. Splinter.js supports line breaks and provides ARIA-friendly output. GSAP's SplitText.js is noted as a traditional alternative that also addresses accessibility concerns.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]