Dopo aver terminato un progetto che mi richiedeva di imparare tutto ciò che potevo sulle animazioni CSS e SVG, ho iniziato a scrivere questa serie su Smashing Animations e "How Classic Cartoons Inspire Modern CSS". Per concludere quest'anno, voglio mostrarti come utilizzare i moderni CSS per creare quell'elemento che rende i titoli Toon così di impatto: la loro tipografia. Progettazione dell'opera d'arte del titolo Nell'era del muto degli anni '20 e dei primi anni '30, la tipografia dell'intertitolo di un film creava un'atmosfera, creava la scena e ricordava al pubblico il tipo di film che aveva pagato per vedere.
Gli intertitoli dei cartoni animati erano anche branding, umore e ambientazione della scena, tutto in uno. Nei primi anni, quando i budget dei principali studi erano più grandi, questi intertitoli erano spesso illustrativi e pittorici.
Ma quando la televisione esplose negli anni ’50, i budget diminuirono e le carte disegnate da artisti come Lawrence “Art” Goble adottarono un nuovo linguaggio visivo, diventando più grafico, stilizzato e meno intricato. Nota: Lawrence "Art" Goble è uno degli eroi spesso trascurati dell'animazione americana della metà del secolo. Ha lavorato principalmente per Hanna-Barbera durante gli anni più influenti degli anni '50 e '60. Goble non era un animatore di personaggi. Il suo ruolo era quello di creare atmosfera, quindi ha progettato gli ambienti per I Flintstones, Huckleberry Hound, Quick Draw McGraw e Yogi Bear, oltre agli intertitoli di apertura che danno il tono. I suoi intertitoli, raffiguranti dipinti con un logo sovrapposto, hanno contribuito a definire l'aspetto iconico di Hanna-Barbera. Gli artwork di Goble per personaggi come Quick Draw McGraw e Yogi Bear erano efficaci sugli schermi TV più piccoli. Invece di riprodurre un'immagine del cartone animato, si è concentrato sulla presentazione di un'idea unica e forte, spesso in silhouette, che ne catturasse l'essenza. In "The Buzzin' Bear", Yogi ronza in un elicottero. Rimbalza via, con il cestino da picnic in mano, in "Bear on a Picnic" e per il suo "Prize Fight Fright", Yogi inscatola il testo del titolo.
Con poco o nessun movimento su cui fare affidamento, i singoli fotogrammi di Goble dovevano creare un’atmosfera, ambientare la scena e descrivere una storia. Lo hanno fatto utilizzando colori piatti, forme grafiche e tipografia che sono stati spesso integrati nell'opera d'arte.
Come designer che lavorano sul web, i titoli dei cartoni animati possono insegnarci molto su come trasmettere la personalità di un marchio, fare una prima impressione e stabilire aspettative per l'esperienza di qualcuno nell'utilizzo di un prodotto o di un sito web. Possiamo imparare dalle tecniche degli artisti per creare banner efficaci, intestazioni di pagine di destinazione e persino schermate iniziali vecchio stile. Tipografia del titolo Toon Gli intertitoli dei cartoni animati mostrano come l'unione del testo con le immagini offra la forza di cui un'intestazione o un eroe ha bisogno. Con una manciata di trucchi per l'ombra del testo, il tratto del testo e la trasformazione, i CSS moderni ti consentono di attingere a quella stessa energia.
Il generatore di titoli di testo Toon Durante la stesura di questo articolo, mi sono reso conto che sarebbe stato utile avere uno strumento per generare testo con lo stile dei titoli dei cartoni animati che amo così tanto. Quindi ne ho fatto uno. Il mio generatore di titoli di testo Toon ti consente di sperimentare colori, tratti e più ombre di testo. Puoi regolare l'ordine di verniciatura, applicare la spaziatura tra le lettere, visualizzare in anteprima il testo in una selezione di caratteri di esempio e quindi copiare il CSS generato direttamente negli appunti per utilizzarlo in un progetto. CSS del titolo del cartone animato Puoi semplicemente copiare e incollare il CSS fornito dal generatore di titoli di testo Toon. Ma vediamo più da vicino cosa fa. Ombra del testo Guarda i caratteri in questo titolo dell'episodio di Augie Doggie "Yuk-Yuk Duck", con le sue lettere giallo pallido e un'ombra scura, dura e sfalsata che lo solleva dallo sfondo e crea l'illusione della profondità.
Probabilmente già sai che text-shadow accetta quattro valori: (1) offset orizzontale e (2) verticale, (3) sfocatura e (4) un colore che può essere solido o semitrasparente. Questi valori di offset possono essere positivi o negativi, quindi posso replicare "Yuk-Yuk Duck" utilizzando un'ombra dura tirata verso il basso e verso destra: colore: #f7f76d; testo-ombra: 5px 5px 0 #1e1904;
D'altra parte, questo titolo "Pint Giant" ha un aspetto diverso con la sua ombra semi-morbida negativa: colore: #c2a872; ombra del testo: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Per aggiungere ulteriore profondità e creare effetti più interessanti, posso sovrapporre più ombre. Per "Let's Duck Out", combino quattro ombre: la prima un'ombra solida con un offset orizzontale negativo per sollevare il testo dallo sfondo, seguita da ombre progressivamente più morbide per creare una sfocatura attorno ad esso: colore: #6F4D80; ombra del testo: -5px5px 0 #260e1e, /* Ombra 1 */ 0 0 15px #e9ce96, /* Ombra 2 */ 0 0 30px #e9ce96, /* Ombra 3 */ 0 0 30px #e9ce96; /* Ombra 4 */
Queste ombre mostrano che usare l'ombra del testo non significa solo creare effetti di luce, poiché possono anche essere decorativi e aggiungere personalità. Tratto del testo Molti intertitoli dei cartoni animati presentano lettere con un contorno audace che le fa risaltare rispetto allo sfondo. Posso ricreare questo effetto usando il tratto di testo. Per molto tempo questa proprietà è stata disponibile solo tramite il prefisso -webkit-, ma ciò significa anche che ora è supportata su tutti i browser moderni.
text-stroke è una scorciatoia per due proprietà. Il primo, larghezza del tratto di testo, disegna un contorno attorno alle singole lettere, mentre il secondo, colore del tratto di testo, ne controlla il colore. Per "Whatever Goes Pup", ho aggiunto un tratto blu di 4px al testo giallo: colore: #eff0cd; -webkit-testo-tratto: 4px #7890b5; tratto di testo: 4px #7890b5;
I tratti possono essere particolarmente utili quando sono combinati con le ombre, quindi per "Crescere, crescere, sparire" ho aggiunto un tratto sottile di 3 pixel a un'ombra appena sfocata di 1 pixel per creare questo effetto di testo tridimensionale: colore: #fbb999; ombra testo: 3px 5px 1px #5160b1; -webkit-testo-tratto: 3px #984336; tratto di testo: 3px #984336;
Ordine di verniciatura L'uso del tratto di testo non sempre produce il risultato atteso, soprattutto con lettere più sottili e tratti più spessi, perché per impostazione predefinita il browser disegna un tratto sul riempimento. Purtroppo, i CSS non mi consentono ancora di regolare il posizionamento del tratto come faccio spesso in Sketch. Tuttavia, la proprietà paint-order ha valori che consentono di posizionare il tratto dietro, anziché davanti, al riempimento.
paint-order: ictus dipinge prima il tratto, poi il riempimento, mentre paint-order: fill fa il contrario: colore: #fbb999; ordine di verniciatura: riempimento; ombra testo: 3px 5px 1px #5160b1; colore-tratto-testo:#984336; larghezza del tratto di testo: 3px;
Un tratto efficace mantiene le lettere leggibili, aggiunge peso e, se combinato con le ombre e l'ordine di pittura, conferisce una presenza reale al testo piatto. Sfondi all'interno del testo Molti intertitoli dei cartoni animati vanno oltre il colore piatto aggiungendo texture, sfumature o dettagli illustrati ai caratteri. A volte si tratta di una texture, altre volte potrebbe essere una sfumatura con un sottile cambiamento tonale. Sul Web, posso ricreare questo effetto utilizzando un'immagine di sfondo o una sfumatura dietro il testo, quindi ritagliandola sulla forma delle lettere. Questo si basa su due proprietà che lavorano insieme: background-clip: testo e text-fill-color: trasparente.
Innanzitutto, applico uno sfondo dietro il testo. Può trattarsi di un'immagine bitmap o vettoriale o di un gradiente CSS. Per questo esempio tratto dall'episodio "Baba Bait" di Quick Draw McGraw, il testo del titolo include un sottile gradiente dall'alto verso il basso dallo scuro alla luce: sfondo: gradiente lineare(0deg, #667b6a, #1d271a);
Successivamente, ritaglio lo sfondo sui glifi e rendo il testo trasparente in modo che lo sfondo sia visibile: -webkit-sfondo-clip: testo; -webkit-text-fill-color: trasparente;
Con solo queste due righe lo sfondo non è più dipinto dietro il testo; invece, è dipinto al suo interno. Questa tecnica funziona particolarmente bene se combinata con tratti e ombre. Una sfumatura ritagliata fornisce al carattere colore e consistenza, un tratto ne mantiene i bordi nitidi e un'ombra lo eleva dallo sfondo. Insieme, ricreano l'aspetto a strati degli intertitoli dipinti a mano utilizzando nient'altro che un po' di CSS. Come sempre, prova attentamente il testo ritagliato, poiché le stranezze del browser a volte possono influenzare le ombre e il rendering. Suddivisione del testo in singoli caratteri A volte non voglio dare uno stile a un'intera parola o intestazione. Voglio dare uno stile alle singole lettere: spostare un carattere in posizione, dare un peso extra a un glifo o animare alcune lettere in modo indipendente. In HTML e CSS semplici, esiste un solo modo affidabile per farlo: racchiudere ogni carattere nel proprio elemento span. Potrei farlo manualmente, ma sarebbe fragile, difficile da mantenere e andrebbe rapidamente in pezzi quando la copia viene modificata. Invece, quando ho bisogno del controllo per lettera, utilizzo una libreria per la suddivisione del testo come splt.js (sebbene siano disponibili altre soluzioni). Questo richiede un nodo di testo e avvolge automaticamente parole o caratteri, dandomi extra ganci per animare e stilizzare senza rovinare il mio markup. È un approccio che mantiene il mio HTML leggibile e semantico, dandomi al tempo stesso il controllo capillare di cui ho bisogno per ricreare la tipografia irregolare e caratteristica che vedi nei classici intertitoli dei cartoni animati. Tuttavia, questo approccio viene fornitoavvertenze sull'accessibilità, poiché la maggior parte dei lettori di schermo legge i nodi di testo in ordine. Quindi questo:
Um dolce Hum
…si legge come ti aspetteresti: Hum Dolce Hum
Ma questo:
H u m
…può essere interpretato in modo diverso a seconda del browser e dello screen reader. Alcuni concateneranno le lettere e leggeranno le parole correttamente. Altri potrebbero fare una pausa tra le lettere, che nel peggiore dei casi potrebbe suonare come: “H…” “U…” “M…”
Purtroppo, alcune soluzioni di divisione non forniscono un risultato sempre accessibile, quindi ho scritto il mio divisore di testo, splinter.js, che è attualmente in versione beta. Trasformazione di singole lettere Per attivare il mio Toon Text Splitter, aggiungo un attributo data- all'elemento che voglio dividere:
Um dolce Hum
Innanzitutto, il mio script separa ogni parola in singole lettere e le racchiude in un elemento span con attributi class e ARIA applicati:
Lo script quindi prende il contenuto iniziale dell'elemento diviso e lo aggiunge come attributo aria per aiutare a mantenere l'accessibilità:
Con questi attributi di classe applicati, posso quindi modellare i singoli personaggi come preferisco.
Ad esempio, per "Hum Sweet Hum", voglio replicare il modo in cui le sue lettere si allontanano dalla linea di base. Dopo aver utilizzato il mio Toon Text Splitter, ho applicato quattro diversi valori di traduzione utilizzando diversi selettori :nth-child per creare un aspetto semi-casuale: /* 4, 8, 12... */ .toon-char:nth-child(4n) { traduci: 0 -8px; } /* 1°, 5°, 9°... */ .toon-char:nth-child(4n+1) {traduci: 0 -4px; } /* 2°, 6°, 10°... */ .toon-char:nth-child(4n+2) { traduci: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { traduci: 0 8px; }
Ma la traduzione è solo una delle proprietà che posso utilizzare per trasformare il mio testo toon.
Potrei anche ruotare quei singoli personaggi per un aspetto ancora più caotico: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { ruota: -4deg; } /* 1°, 5°, 9°... */ .toon-char:nth-child(4n+1) { ruota: -8deg; } /* 2°, 6°, 10°... */ .toon-char:nth-child(4n+2) { ruota: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { ruota: 8deg; }
Ma la traduzione è solo una delle proprietà che posso utilizzare per trasformare il mio testo toon. Potrei anche ruotare quei singoli personaggi per un aspetto ancora più caotico: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { ruotare: -4 gradi; }
/* 1°, 5°, 9°... */ .toon-char:n-esimo-bambino(4n+1) { ruotare: -8 gradi; }
/* 2°, 6°, 10°... */ .toon-char:nesimo-bambino(4n+2) { ruotare: 4 gradi; }
/* 3, 7, 11... */ .toon-char:nesimo-bambino(4n+3) { ruotare: 8 gradi; }
E, naturalmente, potrei aggiungere animazioni per far oscillare quei personaggi e dare vita ai miei titoli in stile testo cartone animato. Innanzitutto, ho creato un'animazione con fotogramma chiave che ruota i personaggi:
@keyframe oscillano { 0%, 100% { trasformazione: ruota(var(--base-rotate, 0deg)); } 25% { trasformazione: ruota(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { trasformazione: ruota(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { trasformazione: ruota(calc(var(--base-rotate, 0deg) + 1deg)); } }
Prima di applicarlo agli elementi span creati dal mio Toon Text Splitter: .toon-char { animazione: jiggle 3s infinita facilità di entrata e uscita; origine della trasformazione: centro in basso; }
E infine, impostando la quantità di rotazione e un ritardo prima che ogni personaggio inizi a oscillare: .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) { ritardo animazione: 0,1 s; } .toon-char:nth-child(4n+1) { ritardo animazione: 0,3 s; } .toon-char:nth-child(4n+2) { ritardo animazione: 0,5 s; } .toon-char:nth-child(4n+3) { ritardo animazione: 0,7s; }
Un fotogramma per fare colpo Gli artisti dei titoli dei cartoni animati avevano un fotogramma per impressionare e la loro tipografia era importante quanto l'opera d'arte che dipingevano. Lo stesso vale sul web. Un'intestazione o un eroe ben progettatoL'area ha bisogno di chiarezza, carattere e sicurezza, non semplicemente di un'immagine di sfondo sbiadita a tutta larghezza. Con alcune proprietà CSS scelte con cura (ombre, tratti, sfondi ritagliati e alcune animazioni sobrie) possiamo ricreare lo stesso impatto. Adoro i testi animati non perché sia nostalgico, ma perché il suo design è intenzionale. Fai delle scelte ponderate e lascia che un po' di tipografia di testo toon aggiunga forza ai tuoi progetti.
