Despois de rematar un proxecto que me esixía aprender todo o que podía sobre as animacións CSS e SVG, comecei a escribir esta serie sobre Smashing Animations e "Como os debuxos animados clásicos inspiran CSS modernos". Para rematar este ano, quero amosarche como usar CSS moderno para crear ese elemento que fai que os títulos de Toon teñan un impacto: a súa tipografía. Título Deseño de obras de arte Na época do mudo dos anos 20 e principios dos 30, a tipografía da tarxeta de título dunha película creou un ambiente, fixo o escenario e recordou ao público o tipo de película que pagaran por ver.
As tarxetas de título de debuxos animados tamén tiñan marca, estado de ánimo e escenario, todo nun só. Nos primeiros anos, cando os orzamentos dos grandes estudos eran maiores, estas tarxetas de título eran moitas veces ilustrativas e pictóricas.
Pero cando a televisión creceu durante a década de 1950, os orzamentos baixaron e as tarxetas deseñadas por artistas como Lawrence "Art" Goble adoptaron unha nova linguaxe visual, facéndose máis gráficas, estilizadas e menos complicadas. Nota: Lawrence "Art" Goble é un dos heroes que moitas veces se pasa por alto da animación estadounidense de mediados de século. Traballou principalmente para Hanna-Barbera durante os anos máis influentes das décadas de 1950 e 1960. Goble non era un animador de personaxes. O seu papel era crear atmosfera, polo que deseñou ambientes para The Flintstones, Huckleberry Hound, Quick Draw McGraw e Yogi Bear, así como as tarxetas de título iniciais que marcaron o ton. As súas tarxetas de título, con pinturas cun logotipo superposto, axudaron a definir o aspecto icónico de Hanna-Barbera. As obras de arte de Goble para personaxes como Quick Draw McGraw e Yogi Bear foron eficaces en pantallas de televisión máis pequenas. En lugar de reproducir un fotograma do debuxo animado, centrouse en presentar unha única idea forte, moitas veces en silueta, que captaba a súa esencia. En "The Buzzin' Bear", Yogi pasa nun helicóptero. Rebota, co cesto de picnic na man, en "Bear on a Picnic" e para o seu "Prize Fight Fright", Yogi encaixa o texto do título.
Con pouco ou ningún movemento no que confiar, os fotogramas únicos de Goble tiñan que crear un ambiente, establecer o escenario e describir unha historia. Fixérono usando cores planas, formas gráficas e tipografía que se integraba frecuentemente na obra de arte.
Como deseñadores que traballan na web, os títulos de toon poden ensinarnos moito sobre como transmitir a personalidade dunha marca, causar unha primeira impresión e establecer expectativas para a experiencia de alguén usando un produto ou sitio web. Podemos aprender das técnicas dos artistas para crear banners eficaces, encabezados de páxinas de destino e incluso pantallas de presentación de boas antigas. Tipografía de título de Toon As tarxetas de título de debuxos animados mostran como a combinación de tipos con imaxes dá o golpe que necesita un encabezado ou un heroe. Cun puñado de trucos de sombra de texto, trazo de texto e transformación, o CSS moderno permíteche aproveitar esa mesma enerxía.
O xerador de títulos de texto Toon Durante a redacción deste artigo, decateime de que sería útil ter unha ferramenta para xerar texto con estilo como os títulos de debuxos animados que tanto me gustan. Entón fixen un. My Toon Text Title Generator permíteche experimentar con cores, trazos e varias sombras de texto. Podes axustar a orde de pintura, aplicar o espazo entre letras, previsualizar o teu texto nunha selección de fontes de mostra e, a continuación, copiar o CSS xerado directamente no portapapeis para utilizalo nun proxecto. Toon Título CSS Podes simplemente copiar e pegar o CSS que che proporciona o xerador de títulos de texto Toon. Pero vexamos máis de cerca o que fai. Sombra de texto Mira o tipo deste título do episodio de Augie Doggie "Yuk-Yuk Duck", coas súas letras amarelas pálidas e a sombra escura, dura e compensada que o levanta do fondo e crea a ilusión de profundidade.
Probablemente xa saibas que text-shadow acepta catro valores: (1) compensacións horizontais e (2) verticais, (3) desenfoque e (4) unha cor que pode ser sólida ou semitransparente. Eses valores de compensación poden ser positivos ou negativos, polo que podo replicar "Yuk-Yuk Duck" usando unha sombra dura tirada cara abaixo e cara á dereita: cor: #f7f76d; sombra de texto: 5px 5px 0 #1e1904;
Por outra banda, este título de "Pint Giant" ten unha sensación diferente coa súa sombra semisuave negativa: cor: #c2a872; sombra de texto: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Para engadir máis profundidade e crear efectos máis interesantes, podo poñer varias capas de sombras. Para "Let's Duck Out", combino catro sombras: a primeira unha sombra sólida cunha compensación horizontal negativa para sacar o texto do fondo, seguida de sombras progresivamente máis suaves para crear un desenfoque ao seu redor: cor: #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 mostran que o uso de sombra de texto non se trata só de crear efectos de iluminación, xa que tamén poden ser decorativos e engadir personalidade. Trazo de texto Moitas tarxetas de título de debuxos animados presentan letras cun contorno atrevido que as fai destacar do fondo. Podo recrear este efecto usando o trazo de texto. Durante moito tempo, esta propiedade só estivo dispoñible mediante un prefixo -webkit-, pero iso tamén significa que agora é compatible cos navegadores modernos.
text-stroke é unha abreviatura de dúas propiedades. O primeiro, ancho de trazo de texto, debuxa un contorno arredor de letras individuais, mentres que o segundo, cor de trazo de texto, controla a súa cor. Para "Whatever Goes Pup", engadín un trazo azul de 4 píxeles ao texto amarelo: cor: #eff0cd; -webkit-text-stroke: 4px #7890b5; trazo de texto: 4px #7890b5;
Os trazos poden ser especialmente útiles cando se combinan con sombras, polo que para "Crecer, crecer, desaparecer", engadín un trazo fino de 3 px a unha sombra de 1 px apenas borrosa para crear este efecto de texto tridimensional: cor: #fbb999; sombra de texto: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; trazo de texto: 3px #984336;
Orde de pintura Usar trazo de texto non sempre produce o resultado esperado, especialmente con letras máis finas e trazos máis grosos, porque por defecto o navegador debuxa un trazo sobre o recheo. Por desgraza, CSS aínda non me permite axustar a colocación do trazo como fago a miúdo en Sketch. Non obstante, a propiedade de orde de pintura ten valores que me permiten colocar o trazo detrás, en lugar de diante do recheo.
paint-order: trazo pinta primeiro o trazo, despois o recheo, mentres que paint-order: recheo fai o contrario: cor: #fbb999; orde de pintura: recheo; sombra de texto: 3px 5px 1px #5160b1; cor-trazo de texto:#984336; ancho de trazo de texto: 3px;
Un trazo eficaz mantén as letras lexibles, engade peso e, cando se combina con sombras e orde de pintura, dá presenza real ao texto plano. Fondos dentro do texto Moitas tarxetas de título de debuxos animados van máis alá da cor plana engadindo textura, degradados ou detalles ilustrados ás letras. Ás veces é unha textura, outras pode ser un degradado cun sutil cambio de ton. Na web, podo recrear este efecto usando unha imaxe de fondo ou un degradado detrás do texto e logo recortándoo coa forma das letras. Isto depende de dúas propiedades que traballan xuntas: background-clip: text e text-fill-color: transparent.
En primeiro lugar, aplico un fondo detrás do texto. Pode ser un mapa de bits ou unha imaxe vectorial ou un gradiente CSS. Para este exemplo do episodio "Baba Bait" de Quick Draw McGraw, o texto do título inclúe un sutil degradado superior e inferior de escuro a claro: fondo: gradiente lineal (0deg, #667b6a, #1d271a);
A continuación, recorto ese fondo aos glifos e fago o texto transparente para que o fondo se vexa: -webkit-background-clip: texto; -webkit-text-fill-color: transparente;
Con só esas dúas liñas, o fondo xa non se pinta detrás do texto; en cambio, está pintado dentro del. Esta técnica funciona especialmente ben cando se combina con trazos e sombras. Un degradado recortado proporciona cor e textura ás letras, un trazo mantén os seus bordos nítidos e unha sombra elévaa do fondo. Xuntos, recrean o aspecto en capas das tarxetas de título pintadas a man usando nada máis que un pouco de CSS. Coma sempre, proba o texto recortado con coidado, xa que as peculiaridades do navegador ás veces poden afectar as sombras e a representación. Dividir o texto en caracteres individuais Ás veces non quero estilizar unha palabra ou título enteiro. Quero darlle estilo a letras individuais: colocar un personaxe no seu lugar, darlle un peso extra a un glifo ou animar algunhas letras de forma independente. En HTML e CSS simples, só hai unha forma fiable de facelo: envolver cada carácter no seu propio elemento span. Podería facelo manualmente, pero sería fráxil, difícil de manter e desmoronaríase rapidamente cando se cambia a copia. Pola contra, cando necesito control por letra, uso unha biblioteca de división de texto como splt.js (aínda que hai outras solucións dispoñibles). Isto leva un nodo de texto e envolve automaticamente palabras ou caracteres, dándome ganchos adicionais para animar e estilizar sen estropear o meu marcado. É un enfoque que mantén o meu HTML lexible e semántico, ao tempo que me dá o control detallado que necesito para recrear a tipografía irregular e con carácter que ves nas tarxetas de título clásicas de debuxos animados. Non obstante, este enfoque vén conadvertencias de accesibilidade, xa que a maioría dos lectores de pantalla len os nós de texto en orde. Entón isto:
Zum doce zumbido
... le como esperarías: Hum Doce Hum
Pero isto:
H u m
...pódese interpretar de forma diferente dependendo do navegador e do lector de pantalla. Algúns concatenarán as letras e lerán as palabras correctamente. Outros poden facer unha pausa entre letras, o que no peor dos casos pode parecer: "H..." "U..." "M..."
Por desgraza, algunhas solucións de división non ofrecen un resultado sempre accesible, polo que escribín o meu propio divisor de texto, splinter.js, que está actualmente en versión beta. Transformando letras individuais Para activar o meu Toon Text Splitter, engado un atributo de datos ao elemento que quero dividir:
Hum Sweet Hum
En primeiro lugar, o meu script separa cada palabra en letras individuais e envólvese nun elemento span con atributos class e ARIA aplicados:
A continuación, o script toma o contido inicial do elemento dividido e engádeo como un atributo de aria para axudar a manter a accesibilidade:
Con eses atributos de clase aplicados, entón podo estilizar caracteres individuais como elixa.
Por exemplo, para "Hum Sweet Hum", quero replicar como as súas letras se afastan da liña base. Despois de usar o meu Toon Text Splitter, apliquei catro valores de tradución diferentes usando varios selectores :nth-child para crear un aspecto semi-aleatorio: /* 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 é só unha propiedade que podo usar para transformar o texto do meu debuxo.
Tamén podería rotar eses personaxes individuais para un aspecto aínda máis caótico: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { xirar: -4deg; } /* 1º, 5º, 9º... */ .toon-char:nth-child (4n+1) { xirar: -8deg; } /* 2º, 6º, 10º... */ .toon-char:nth-child (4n+2) { xirar: 4deg; } /* 3º, 7º, 11º... */ .toon-char:nth-child (4n+3) { xirar: 8deg; }
Pero traducir é só unha propiedade que podo usar para transformar o texto do meu debuxo. Tamén podería rotar eses personaxes individuais para un aspecto aínda máis caótico: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { xirar: -4º; }
/* 1º, 5º, 9º... */ .toon-char:nth-child (4n+1) { xirar: -8º; }
/* 2º, 6º, 10º... */ .toon-char:nth-child (4n+2) { xirar: 4º; }
/* 3º, 7º, 11º... */ .toon-char:nth-child (4n+3) { xirar: 8 graos; }
E, por suposto, podería engadir animacións para mover eses personaxes e darlle vida aos meus títulos de estilo de texto. En primeiro lugar, creei unha animación de fotogramas clave que xira os personaxes:
@keyframes jiggle { 0%, 100% { transformar: xirar(var(--base-rotar, 0deg)); } 25% { transformar: xirar(calc(var(--base-rotar, 0deg) + 3deg)); } 50% { transformar: rotar(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transformar: xirar(calc(var(--base-rotar, 0deg) + 1deg)); } }
Antes de aplicalo aos elementos span creados polo meu Toon Text Splitter: .toon-char { animación: jiggle 3s infinita facilidade de entrada e saída; transformar-orixe: fondo central; }
E, finalmente, establece a cantidade de rotación e un atraso antes de que cada personaxe comece 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) { animación-retraso: 0,1 s; } .toon-char:nth-child (4n+1) { animación-delay: 0,3s; } .toon-char:nth-child (4n+2) { animación-retraso: 0,5 s; } .toon-char:nth-child (4n+3) { animación-retraso: 0,7 s; }
Un cadro para facer unha impresión Os artistas dos títulos dos debuxos animados tiñan un cadro para impresionar, e a súa tipografía era tan importante como a obra de arte que pintaban. O mesmo ocorre na web. Un encabezado ou heroe ben deseñadosA área necesita claridade, carácter e confianza, non só unha imaxe de fondo esvaída de ancho completo. Con algunhas propiedades CSS coidadosamente escollidas (sombras, trazos, fondos recortados e algunha animación restrinxida) podemos recrear ese mesmo impacto. Encántame o texto de toon non porque sexa nostálxico, senón porque o seu deseño é intencionado. Fai opcións deliberadas e deixa que unha pequena tipografía de texto debuxante engada aos teus deseños.
