Saltar enlaces

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→

Home
Account
Cart
Search
¡Hola! ¡Pregúntame lo que quieras!
Explore
Drag