Depois de terminar um projeto que exigia que eu aprendesse tudo o que pudesse sobre animações CSS e SVG, comecei a escrever esta série sobre Smashing Animations e “Como desenhos clássicos inspiram CSS moderno”. Para encerrar este ano, quero mostrar como usar CSS moderno para criar aquele elemento que torna os Toon Titles tão impactantes: sua tipografia. Design da arte do título Na era do cinema mudo da década de 1920 e início dos anos 30, a tipografia do título de um filme criava um clima, definia o cenário e lembrava ao público o tipo de filme que eles pagaram para ver.
Os cartões de título dos desenhos animados também continham marca, clima e cenário, tudo em um só. Nos primeiros anos, quando os orçamentos dos grandes estúdios eram maiores, esses cartões de título eram muitas vezes ilustrativos e pictóricos.
Mas quando a televisão cresceu durante a década de 1950, os orçamentos caíram e os cartões desenhados por artistas como Lawrence “Art” Goble adoptaram uma nova linguagem visual, tornando-se mais gráficos, estilizados e menos complexos. Nota: Lawrence “Art” Goble é um dos heróis frequentemente esquecidos da animação americana de meados do século. Ele trabalhou principalmente para a Hanna-Barbera durante os anos mais influentes das décadas de 1950 e 1960. Goble não era um animador de personagens. Seu papel era criar atmosfera, então ele projetou ambientes para The Flintstones, Huckleberry Hound, Quick Draw McGraw e Yogi Bear, bem como os cartões de título de abertura que deram o tom. Seus cartões de título, com pinturas com logotipo sobreposto, ajudaram a definir o visual icônico da Hanna-Barbera. A arte de Goble para personagens como Quick Draw McGraw e Yogi Bear foi eficaz em telas de TV menores. Em vez de reproduzir uma cena do desenho animado, ele se concentrou em apresentar uma ideia única e forte – muitas vezes em silhueta – que capturasse sua essência. Em “The Buzzin’ Bear”, Yogi passa voando em um helicóptero. Ele salta para longe, com a cesta de piquenique na mão, em “Bear on a Picnic”, e em seu “Prize Fight Fright”, Yogi coloca o texto do título na caixa.
Com pouco ou nenhum movimento para confiar, os quadros únicos de Goble tiveram que criar um clima, definir o cenário e descrever uma história. Eles fizeram isso usando cores planas, formas gráficas e tipografia que era frequentemente integrada à obra de arte.
Como designers que trabalham na web, os títulos de desenhos animados podem nos ensinar muito sobre como transmitir a personalidade de uma marca, causar uma primeira impressão e definir expectativas para a experiência de alguém ao usar um produto ou site. Podemos aprender com as técnicas dos artistas para criar banners eficazes, cabeçalhos de páginas de destino e até mesmo as boas e antigas telas iniciais. Tipografia do título Toon Os cartões de título dos desenhos animados mostram como a fusão do tipo com as imagens proporciona o impacto que um cabeçalho ou herói precisa. Com alguns truques de sombra de texto, traço de texto e transformação, o CSS moderno permite que você aproveite a mesma energia.
O Gerador de Título de Texto Toon No meio da escrita deste artigo, percebi que seria útil ter uma ferramenta para gerar texto com o estilo dos títulos de desenhos animados que tanto amo. Então eu fiz um. My Toon Text Title Generator permite experimentar cores, traços e múltiplas sombras de texto. Você pode ajustar a ordem de pintura, aplicar espaçamento entre letras, visualizar seu texto em uma seleção de fontes de amostra e, em seguida, copiar o CSS gerado diretamente para sua área de transferência para usar em um projeto. CSS do título do desenho animado Você pode simplesmente copiar e colar o CSS fornecido pelo Toon Text Title Generator. Mas vamos examinar mais de perto o que ele faz. Sombra de texto Veja o tipo neste título do episódio “Yuk-Yuk Duck” de Augie Doggie, com suas letras amarelo-claras e sombra escura, dura e deslocada que o destaca do fundo e cria a ilusão de profundidade.
Você provavelmente já sabe que a sombra do texto aceita quatro valores: (1) deslocamentos horizontais e (2) verticais, (3) desfoque e (4) uma cor que pode ser sólida ou semitransparente. Esses valores de deslocamento podem ser positivos ou negativos, então posso replicar “Yuk-Yuk Duck” usando uma sombra forte puxada para baixo e para a direita: cor: #f7f76d; sombra de texto: 5px 5px 0 #1e1904;
Por outro lado, este título “Pint Giant” tem uma sensação diferente com sua sombra negativa semi-suave: cor: #c2a872; sombra de texto: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Para adicionar profundidade extra e criar efeitos mais interessantes, posso colocar várias sombras em camadas. Para “Let’s Duck Out”, combino quatro sombras: a primeira, uma sombra sólida com um deslocamento horizontal negativo para tirar o texto do fundo, seguida por sombras progressivamente mais suaves para criar um desfoque ao 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 */
Essas sombras mostram que usar sombra de texto não se trata apenas de criar efeitos de iluminação, pois também podem ser decorativas e adicionar personalidade. Traço de texto Muitos cartões de título de desenhos animados apresentam letras com contornos em negrito que os destacam do fundo. Posso recriar esse efeito usando o traço de texto. Por muito tempo, essa propriedade só estava disponível por meio do prefixo -webkit-, mas isso também significa que agora é compatível com navegadores modernos.
text-stroke é uma abreviação para duas propriedades. O primeiro, text-stroke-width, desenha um contorno em torno de letras individuais, enquanto o segundo, text-stroke-color, controla sua cor. Para “Whatever Goes Pup”, adicionei um traço azul de 4px ao texto amarelo: cor: #eff0cd; -webkit-text-stroke: 4px #7890b5; traço de texto: 4px #7890b5;
Os traços podem ser especialmente úteis quando combinados com sombras, então, para “Growing, Growing, Gone”, adicionei um traço fino de 3px a uma sombra de 1px mal desfocada para criar este efeito de texto tridimensional: cor: #fbb999; sombra de texto: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; traço de texto: 3px #984336;
Ordem de pintura Usar o traço de texto nem sempre produz o resultado esperado, especialmente com letras mais finas e traços mais grossos, porque por padrão o navegador desenha um traço sobre o preenchimento. Infelizmente, o CSS ainda não me permite ajustar o posicionamento dos traços, como costumo fazer no Sketch. No entanto, a propriedade paint-order possui valores que me permitem colocar o traço atrás, e não na frente, do preenchimento.
paint-order: stroke pinta o traço primeiro, depois o preenchimento, enquanto paint-order: fill faz o oposto: cor: #fbb999; ordem de pintura: preencher; sombra de texto: 3px 5px 1px #5160b1; cor do traço do texto:#984336; largura do traço do texto: 3px;
Um traço eficaz mantém as letras legíveis, adiciona peso e – quando combinado com sombras e ordem de pintura – dá ao texto plano uma presença real. Planos de fundo dentro do texto Muitos cartões de título de desenho animado vão além da cor plana, adicionando textura, gradientes ou detalhes ilustrados às letras. Às vezes é uma textura, outras vezes pode ser um gradiente com uma mudança tonal sutil. Na web, posso recriar esse efeito usando uma imagem de fundo ou gradiente atrás do texto e, em seguida, recortando-o no formato das letras. Isso depende de duas propriedades trabalhando juntas: background-clip: text e text-fill-color: transparente.
Primeiro, aplico um fundo atrás do texto. Pode ser uma imagem bitmap ou vetorial ou um gradiente CSS. Para este exemplo do episódio “Baba Bait” do Quick Draw McGraw, o texto do título inclui um gradiente sutil de cima para baixo do escuro para o claro: plano de fundo: gradiente linear (0deg, #667b6a, #1d271a);
Em seguida, recolho o plano de fundo nos glifos e torno o texto transparente para que o plano de fundo seja exibido: -webkit-background-clip: texto; -webkit-text-fill-color: transparente;
Com apenas essas duas linhas, o fundo não é mais pintado atrás do texto; em vez disso, está pintado dentro dele. Essa técnica funciona especialmente bem quando combinada com pinceladas e sombras. Um gradiente recortado fornece cor e textura às letras, um traço mantém suas bordas nítidas e uma sombra as eleva do fundo. Juntos, eles recriam a aparência em camadas de cartões de título pintados à mão usando nada mais do que um pouco de CSS. Como sempre, teste o texto recortado com cuidado, pois às vezes as peculiaridades do navegador podem afetar as sombras e a renderização. Divisão de texto em caracteres individuais Às vezes não quero estilizar uma palavra ou título inteiro. Quero estilizar letras individuais - para posicionar um caractere no lugar, dar peso extra a um glifo ou animar algumas letras de forma independente. Em HTML e CSS simples, só há uma maneira confiável de fazer isso: agrupar cada caractere em seu próprio elemento span. Eu poderia fazer isso manualmente, mas seria frágil, difícil de manter e desmoronaria rapidamente quando a cópia fosse alterada. Em vez disso, quando preciso de controle por letra, uso uma biblioteca de divisão de texto como splt.js (embora outras soluções estejam disponíveis). Isso pega um nó de texto e agrupa palavras ou caracteres automaticamente, dando-me ganchos extras para animar e estilizar sem bagunçar minha marcação. É uma abordagem que mantém meu HTML legível e semântico, ao mesmo tempo que me dá o controle refinado de que preciso para recriar a tipografia irregular e cheia de personalidade que você vê nos cartões de título de desenhos animados clássicos. No entanto, esta abordagem vem comadvertências de acessibilidade, já que a maioria dos leitores de tela lê os nós de texto em ordem. Então isto:
Hum doce hum
… lê como você esperaria: Hum doce hum
Mas isto:
H você m
…pode ser interpretado de forma diferente dependendo do navegador e do leitor de tela. Alguns concatenarão as letras e lerão as palavras corretamente. Outros podem fazer uma pausa entre as letras, o que na pior das hipóteses pode soar como: “H...” “U...” “M...”
Infelizmente, algumas soluções de divisão não oferecem um resultado sempre acessível, por isso escrevi meu próprio divisor de texto, splinter.js, que está atualmente em versão beta. Transformando Cartas Individuais Para ativar meu Toon Text Splitter, adiciono um atributo data- ao elemento que desejo dividir:
Hum doce hum
Primeiro, meu script separa cada palavra em letras individuais e as envolve em um elemento span com atributos de classe e ARIA aplicados:
O script então pega o conteúdo inicial do elemento split e o adiciona como um atributo aria para ajudar a manter a acessibilidade:
Com esses atributos de classe aplicados, posso estilizar personagens individuais como quiser.
Por exemplo, para “Hum Sweet Hum”, quero replicar como suas letras se afastam da linha de base. Depois de usar meu Toon Text Splitter, apliquei quatro valores de tradução diferentes usando vários seletores :nth-child para criar uma aparência semi-aleatória: /* 4º, 8º, 12º... */ .toon-char:nth-child(4n) { traduzir: 0 -8px; } /* 1º, 5º, 9º... */ .toon-char:nth-child(4n+1) { traduzir: 0 -4px; } /* 2º, 6º, 10º... */ .toon-char:nth-child(4n+2) { traduzir: 0 4px; } /* 3º, 7º, 11º... */ .toon-char:nth-child(4n+3) { traduzir: 0 8px; }
Mas traduzir é apenas uma propriedade que posso usar para transformar meu texto de desenho animado.
Eu também poderia girar esses personagens individuais para uma aparência ainda mais caótica: /* 4º, 8º, 12º... */ .toon-line .toon-char:nth-child(4n) { girar: -4deg; } /* 1º, 5º, 9º... */ .toon-char:nth-child(4n+1) { girar: -8deg; } /* 2º, 6º, 10º... */ .toon-char:nth-child(4n+2) { girar: 4deg; } /* 3º, 7º, 11º... */ .toon-char:nth-child(4n+3) { girar: 8deg; }
Mas traduzir é apenas uma propriedade que posso usar para transformar meu texto de desenho animado. Eu também poderia girar esses personagens individuais para uma aparência ainda mais caótica: /* 4º, 8º, 12º... */ .toon-line .toon-char:nth-child(4n) { girar: -4 graus; }
/* 1º, 5º, 9º... */ .toon-char:nth-child(4n+1) { girar: -8 graus; }
/* 2º, 6º, 10º... */ .toon-char:nth-child(4n+2) { girar: 4 graus; }
/* 3º, 7º, 11º... */ .toon-char:nth-child(4n+3) { girar: 8 graus; }
E, claro, eu poderia adicionar animações para agitar esses personagens e dar vida aos meus títulos em estilo de texto. Primeiro, criei uma animação de quadro-chave que gira os personagens:
@keyframes balançar { 0%, 100% {transformação: girar(var(--base-rotate, 0deg)); } 25% {transformação: girar(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {transformação: girar(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {transformação: girar(calc(var(--base-rotate, 0deg) + 1deg)); } }
Antes de aplicá-lo aos elementos span criados pelo meu Toon Text Splitter: .toon-char{ animação: jiggle 3s infinita facilidade de entrada; origem da transformação: centro inferior; }
E, finalmente, definindo a quantidade de rotação e um atraso antes de cada personagem começar a balançar: .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) {atraso de animação: 0,1s; } .toon-char:nth-child(4n+1) {atraso de animação: 0,3s; } .toon-char:nth-child(4n+2) {atraso de animação: 0,5s; } .toon-char:nth-child(4n+3) {atraso de animação: 0,7s; }
Um quadro para causar uma boa impressão Os artistas de títulos de desenhos animados tinham uma moldura para causar uma boa impressão, e sua tipografia era tão importante quanto a obra de arte que pintavam. O mesmo acontece na web. Um cabeçalho ou herói bem projetadoa área precisa de clareza, caráter e confiança - não apenas uma imagem de fundo desbotada de largura total. Com algumas propriedades CSS cuidadosamente escolhidas – sombras, traços, fundos recortados e alguma animação restrita – podemos recriar o mesmo impacto. Adoro textos de desenho animado não porque seja nostálgico, mas porque seu design é intencional. Faça escolhas deliberadas e deixe um pouco de tipografia de texto adicionar impacto aos seus designs.
