Generador de texto de título de dibujos animados | Consejos CSS
Andy Clark tiene recursos completamente nuevos. Produce el tipo de tipografía divertida que Andy usa a menudo en su propio trabajo, una que se adapta bien a títulos de dibujos animados.
Hay muchas opciones configurables para fuente, color, trazo, espaciado entre letras y sombreado.

Generará CSS para que lo copie y pegue.
¿Qué pasa si quieres diseñar cada letra individualmente? Bueno, no existe tal cosa :nth-letter Actualmente en CSS. Sin embargo, existen herramientas que envuelven cada personaje en un formato separado. <span>el más tradicional es Texto dividido.js. Pero Andy decidió crear una herramienta para eso, llamada astilla.js – y porque vio una oportunidad de mejorar la accesibilidad del marcado generado para ayudar a evitar que ciertas tecnologías de asistencia sean bloqueadas por span. (Versión GSAP Bien hecho en esto también. )
En cambio, som:
<h2>
<span>H</span>
<span>u</span>
<span>m</span>
<!-- etc. -->
</h2>
…y obtenemos marcado estilo ARIA:
<h2 data-split="toon" aria-label="Hum Sweet Hum">
<span class="toon-char" aria-hidden="true">H</span>
<span class="toon-char" aria-hidden="true">u</span>
<span class="toon-char" aria-hidden="true">m</span>
</h2>
¡Y admite saltos de línea!
Enlace directo→