Toon Title Textual content Generator | CSS-Tips

Andy Clarke with a brand-new useful resource. It generates the kind of enjoyable typography that Andy generally makes use of in his personal work that’s geared in direction of cartoon headings.

There are a selection of configurable choices for font, colour, stroke, letter spacing, and shadows.

And it spits out the CSS so that you can copy-paste.

What if you wish to individually type every letter? Nicely, there’s no such factor as :nth-letter in CSS in the meanwhile. There are, nonetheless, instruments that may wrap every character in a separate , probably the most custom one being SplitText.js. However Andy determined to make a instrument for that — referred to as Splinter.js — as nicely as a result of he noticed alternatives to boost the accessibility of the generated markup to assist forestall some assistive tech from choking on the spans. (GSAP’s model additionally does job of this.)

Som as a substitute of:

  H
  u
  m
  

…we get ARIA-spiced markup:

  H
  u
  m

And it helps line breaks!

Direct Hyperlink →