Después de terminar un proyecto que requería que aprendiera todo lo que pudiera sobre animaciones CSS y SVG, comencé a escribir esta serie sobre Smashing Animations y "Cómo los dibujos animados clásicos inspiran CSS moderno". Para finalizar este año, quiero mostrarles cómo usar CSS moderno para crear ese elemento que hace que los títulos de dibujos animados sean tan impactantes: su tipografía. Diseño de ilustraciones del título En la era del cine mudo de la década de 1920 y principios de la de 1930, la tipografía del título de una película creaba un ambiente, preparaba el escenario y recordaba al público el tipo de película que habían pagado por ver.
Las tarjetas de título de dibujos animados también eran marca, estado de ánimo y ambientación, todo en uno. En los primeros años, cuando los presupuestos de los grandes estudios eran mayores, estas tarjetas de presentación eran a menudo ilustrativas y pictóricas.
Pero cuando la televisión floreció durante la década de 1950, los presupuestos cayeron y las tarjetas diseñadas por artistas como Lawrence “Art” Goble adoptaron un nuevo lenguaje visual, volviéndose más gráfico, estilizado y menos complejo. Nota: Lawrence “Art” Goble es uno de los héroes de la animación estadounidense de mediados de siglo que a menudo se pasa por alto. Trabajó principalmente para Hanna-Barbera durante sus años más influyentes de los años 1950 y 1960. Goble no era un animador de personajes. Su función era crear atmósfera, por lo que diseñó entornos para Los Picapiedra, Huckleberry Hound, Quick Draw McGraw y Yogi Bear, así como las tarjetas de título iniciales que marcaron la pauta. Sus tarjetas de presentación, que presentaban pinturas con un logotipo superpuesto, ayudaron a definir el aspecto icónico de Hanna-Barbera. Las ilustraciones de Goble para personajes como Quick Draw McGraw y Yogi Bear fueron efectivas en pantallas de televisión más pequeñas. En lugar de reproducir una imagen fija de la caricatura, se centró en presentar una idea única y fuerte, a menudo en silueta, que capturaba su esencia. En “The Buzzin’ Bear”, Yogi pasa zumbando en un helicóptero. Se aleja rebotando, con una canasta de picnic en la mano, en “Bear on a Picnic”, y en “Prize Fight Fright”, Yogi encuadra el texto del título.
Con poco o ningún movimiento en el que confiar, los fotogramas individuales de Goble tenían que crear un ambiente, preparar la escena y describir una historia. Lo hicieron utilizando colores planos, formas gráficas y tipografía que frecuentemente se integraba en la obra de arte.
Como diseñadores que trabajamos en la web, los títulos de dibujos animados pueden enseñarnos mucho sobre cómo transmitir la personalidad de una marca, dar una primera impresión y establecer expectativas sobre la experiencia de alguien al utilizar un producto o sitio web. Podemos aprender de las técnicas de los artistas para crear banners efectivos, encabezados de páginas de destino e incluso pantallas de presentación a la antigua usanza. Tipografía de título de dibujos animados Las tarjetas de título de dibujos animados muestran cómo la combinación de tipografía con imágenes brinda el impacto que un encabezado o un héroe necesita. Con un puñado de trucos de sombra de texto, trazo de texto y transformación, el CSS moderno te permite aprovechar esa misma energía.
El generador de títulos de texto de dibujos animados Mientras escribía este artículo, me di cuenta de que sería útil tener una herramienta para generar texto con el estilo de los títulos de dibujos animados que tanto amo. Entonces hice uno. My Toon Text Title Generator te permite experimentar con colores, trazos y múltiples sombras de texto. Puede ajustar el orden de pintura, aplicar espaciado entre letras, obtener una vista previa del texto en una selección de fuentes de muestra y luego copiar el CSS generado directamente a su portapapeles para usarlo en un proyecto. Título del dibujo animado CSS Simplemente puede copiar y pegar el CSS que le proporciona el Generador de títulos de texto de Toon. Pero veamos más de cerca lo que hace. Sombra de texto Mire el tipo de letra de este título del episodio de Augie Doggie "Yuk-Yuk Duck", con sus letras de color amarillo pálido y una sombra oscura, dura y desplazada que lo levanta del fondo y crea la ilusión de profundidad.
Probablemente ya sepa que text-shadow acepta cuatro valores: (1) desplazamientos horizontales y (2) verticales, (3) desenfoque y (4) un color que puede ser sólido o semitransparente. Esos valores de compensación pueden ser positivos o negativos, por lo que puedo replicar “Yuk-Yuk Duck” usando una sombra dura hacia abajo y hacia la derecha: color: #f7f76d; sombra de texto: 5px 5px 0 #1e1904;
Por otro lado, este título de “Pint Giant” tiene una sensación diferente con su sombra negativa semisuave: color: #c2a872; sombra de texto: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Para agregar profundidad adicional y crear efectos más interesantes, puedo superponer varias sombras. Para "Let's Duck Out", combino cuatro sombras: la primera, una sombra sólida con un desplazamiento horizontal negativo para levantar el texto del fondo, seguida de sombras progresivamente más suaves para crear un desenfoque a su alrededor: color: #6F4D80; sombra de texto: -5px5px 0 #260e1e, /* Sombra 1 */ 0 0 15px #e9ce96, /* Sombra 2 */ 0 0 30px #e9ce96, /* Sombra 3 */ 0 0 30px #e9ce96; /* Sombra 4 */
Estas sombras demuestran que utilizar texto-sombra no se trata sólo de crear efectos de iluminación, sino que también pueden ser decorativos y aportar personalidad. Trazo de texto Muchas tarjetas de título de dibujos animados presentan letras con un contorno en negrita que las hace destacar del fondo. Puedo recrear este efecto usando trazo de texto. Durante mucho tiempo, esta propiedad solo estuvo disponible a través del prefijo -webkit-, pero eso también significa que ahora es compatible con todos los navegadores modernos.
trazo de texto es una abreviatura de dos propiedades. El primero, ancho de trazo de texto, dibuja un contorno alrededor de letras individuales, mientras que el segundo, color de trazo de texto, controla su color. Para "Whatever Goes Pup", agregué un trazo azul de 4 píxeles al texto amarillo: color: #eff0cd; -webkit-text-stroke: 4px #7890b5; trazo de texto: 4px #7890b5;
Los trazos pueden ser especialmente útiles cuando se combinan con sombras, por lo que para "Creciendo, creciendo, desapareciendo", agregué un trazo delgado de 3 píxeles a una sombra de 1 píxeles apenas borrosa para crear este efecto de texto tridimensional: color: #fbb999; sombra de texto: 3px 5px 1px #5160b1; -webkit-texto-trazo: 3px #984336; trazo de texto: 3px #984336;
Orden de pintura El uso de trazo de texto no siempre produce el resultado esperado, especialmente con letras más delgadas y trazos más gruesos, porque de forma predeterminada el navegador dibuja un trazo sobre el relleno. Lamentablemente, CSS todavía no me permite ajustar la ubicación de los trazos como hago a menudo en Sketch. Sin embargo, la propiedad de orden de pintura tiene valores que me permiten colocar el trazo detrás, en lugar de delante, del relleno.
paint-order: trazo pinta primero el trazo, luego el relleno, mientras que paint-order: fill hace lo contrario: color: #fbb999; orden de pintura: relleno; sombra de texto: 3px 5px 1px #5160b1; color-trazo-texto:#984336; ancho de trazo de texto: 3px;
Un trazo eficaz mantiene las letras legibles, añade peso y, cuando se combina con sombras y orden de pintura, proporciona una presencia real al texto plano. Fondos dentro del texto Muchas tarjetas de título de dibujos animados van más allá del color plano y agregan textura, degradados o detalles ilustrados a las letras. A veces es una textura, otras veces puede ser un degradado con un cambio tonal sutil. En la web, puedo recrear este efecto usando una imagen de fondo o un degradado detrás del texto y luego recortándolo a la forma de las letras. Esto se basa en dos propiedades que funcionan juntas: clip de fondo: texto y color de relleno de texto: transparente.
Primero, aplico un fondo detrás del texto. Puede ser un mapa de bits, una imagen vectorial o un degradado CSS. Para este ejemplo del episodio "Baba Bait" de Quick Draw McGraw, el texto del título incluye un sutil gradiente superior-inferior de oscuro a claro: fondo: gradiente lineal (0 grados, #667b6a, #1d271a);
A continuación, recorto ese fondo a los glifos y hago que el texto sea transparente para que se vea el fondo: -webkit-fondo-clip: texto; -webkit-text-fill-color: transparente;
Con sólo esas dos líneas, el fondo ya no está pintado detrás del texto; en cambio, está pintado dentro de él. Esta técnica funciona especialmente bien cuando se combina con trazos y sombras. Un degradado recortado proporciona color y textura a las letras, un trazo mantiene sus bordes nítidos y una sombra las eleva del fondo. Juntos, recrean el aspecto en capas de las tarjetas de título pintadas a mano utilizando nada más que un poco de CSS. Como siempre, pruebe cuidadosamente el texto recortado, ya que las peculiaridades del navegador a veces pueden afectar las sombras y la representación. Dividir texto en caracteres individuales A veces no quiero diseñar una palabra o un título completo. Quiero diseñar letras individuales: colocar un carácter en su lugar, darle peso adicional a un glifo o animar algunas letras de forma independiente. En HTML y CSS simples, sólo hay una forma confiable de hacerlo: envolver cada carácter en su propio elemento span. Podría hacerlo manualmente, pero sería frágil, difícil de mantener y se desmoronaría rápidamente cuando se cambiara la copia. En cambio, cuando necesito control por letra, uso una biblioteca de división de texto como splt.js (aunque hay otras soluciones disponibles). Esto toma un nodo de texto y envuelve automáticamente palabras o caracteres, lo que me brinda ganchos adicionales para animar y diseñar sin estropear mi marcado. Es un enfoque que mantiene mi HTML legible y semántico, al mismo tiempo que me brinda el control detallado que necesito para recrear la tipografía irregular y llena de carácter que se ve en las tarjetas de título de dibujos animados clásicos. Sin embargo, este enfoque viene conAdvertencias de accesibilidad, ya que la mayoría de los lectores de pantalla leen los nodos de texto en orden. Entonces esto:
Hum, dulce hum
…se lee como era de esperar: Hum dulce hum
Pero esto:
H tú m
…puede interpretarse de forma diferente según el navegador y el lector de pantalla. Algunos concatenarán las letras y leerán las palabras correctamente. Otros pueden hacer pausas entre letras, lo que en el peor de los casos podría sonar como: “H…” “U…” “M…”
Lamentablemente, algunas soluciones de división no ofrecen un resultado siempre accesible, por lo que escribí mi propio divisor de texto, splinter.js, que actualmente se encuentra en versión beta. Transformando letras individuales Para activar mi Toon Text Splitter, agrego un atributo de datos al elemento que quiero dividir:
Hum, dulce hum
Primero, mi script separa cada palabra en letras individuales y las envuelve en un elemento span con atributos de clase y ARIA aplicados:
Luego, el script toma el contenido inicial del elemento dividido y lo agrega como un atributo aria para ayudar a mantener la accesibilidad:
Con esos atributos de clase aplicados, puedo diseñar personajes individuales como quiera.
Por ejemplo, para "Hum Sweet Hum", quiero replicar cómo sus letras se alejan de la línea de base. Después de usar mi Toon Text Splitter, apliqué cuatro valores de traducción diferentes usando varios selectores :nth-child para crear una apariencia semialeatoria: /* 4, 8, 12... */ .toon-char:nth-child(4n) { traducir: 0 -8px; } /* 1º, 5º, 9º... */ .toon-char:nth-child(4n+1) { traducir: 0 -4px; } /* 2º, 6º, 10º... */ .toon-char:nth-child(4n+2) { traducir: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { traducir: 0 8px; }
Pero traducir es sólo una propiedad que puedo usar para transformar el texto de mi caricatura.
También podría rotar esos personajes individuales para una apariencia aún más caótica: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotar: -4deg; } /* 1º, 5º, 9º... */ .toon-char:nth-child(4n+1) { rotar: -8deg; } /* 2º, 6º, 10º... */ .toon-char:nth-child(4n+2) { rotar: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotar: 8deg; }
Pero traducir es sólo una propiedad que puedo usar para transformar el texto de mi caricatura. También podría rotar esos personajes individuales para una apariencia aún más caótica: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { girar: -4 grados; }
/* 1º, 5º, 9º... */ .toon-char:nth-child(4n+1) { girar: -8 grados; }
/* 2º, 6º, 10º... */ .toon-char:nth-child(4n+2) { rotar: 4 grados; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotar: 8 grados; }
Y, por supuesto, podría agregar animaciones para mover esos personajes y darle vida a mis títulos de estilo de texto de dibujos animados. Primero, creé una animación de fotogramas clave que rota los personajes:
@keyframes se mueven { 0%, 100% { transformar: rotar(var(--base-rotate, 0deg)); } 25% { transformar: rotar(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transformar: rotar(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transformar: rotar(calc(var(--base-rotate, 0deg) + 1deg)); } }
Antes de aplicarlo a los elementos de extensión creados por mi Toon Text Splitter: .toon-char { animación: jiggle 3s infinitamente fácil de entrar y salir; origen de transformación: centro inferior; }
Y finalmente, establecer la cantidad de rotación y un retraso antes de que cada personaje comience a moverse: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { retardo de animación: 0,1 s; } .toon-char:nth-child(4n+1) { retardo de animación: 0,3 s; } .toon-char:nth-child(4n+2) { retardo de animación: 0,5 s; } .toon-char:nth-child(4n+3) { retardo de animación: 0,7 s; }
Un cuadro para causar una impresión Los artistas de títulos de dibujos animados tenían un marco para causar una buena impresión, y su tipografía era tan importante como la obra de arte que pintaban. Lo mismo ocurre en la web. Un encabezado o héroe bien diseñadoEl área necesita claridad, carácter y confianza, no simplemente una imagen de fondo descolorida de ancho completo. Con algunas propiedades CSS cuidadosamente elegidas (sombras, trazos, fondos recortados y algunas animaciones restringidas) podemos recrear el mismo impacto. Me encanta el texto de dibujos animados no porque sea nostálgico, sino porque su diseño es intencional. Tome decisiones deliberadas y deje que una pequeña tipografía de texto de dibujos animados agregue fuerza a sus diseños.
