Després d'acabar un projecte que em va obligar a aprendre tot el que podia sobre les animacions CSS i SVG, vaig començar a escriure aquesta sèrie sobre Smashing Animations i "Com els dibuixos animats clàssics inspiren el CSS modern". Per acabar aquest any, vull mostrar-vos com utilitzar CSS modern per crear aquell element que fa que els títols de dibuixos siguin tan impactants: la seva tipografia. Títol Disseny d'obres d'art A l'era del silenci dels anys 20 i principis dels 30, la tipografia de la targeta de títol d'una pel·lícula va crear un ambient, va crear l'escenari i va recordar al públic el tipus de pel·lícula que havien pagat per veure.
Les targetes de títol de dibuixos animats també eren la marca, l'estat d'ànim i l'escenari, tot plegat en un. En els primers anys, quan els pressupostos dels estudis importants eren més grans, aquestes targetes de títol sovint eren il·lustratives i pictòriques.
Però quan la televisió va créixer durant la dècada de 1950, els pressupostos van baixar i les cartes dissenyades per artistes com Lawrence "Art" Goble van adoptar un nou llenguatge visual, esdevenint més gràfic, estilitzat i menys complex. Nota: Lawrence "Art" Goble és un dels herois sovint passats per alt de l'animació nord-americana de mitjans de segle. Va treballar principalment per a Hanna-Barbera durant els anys més influents dels anys 50 i 60. Goble no era un animador de personatges. El seu paper era crear atmosfera, de manera que va dissenyar entorns per a The Flintstones, Huckleberry Hound, Quick Draw McGraw i Yogi Bear, així com les cartes de títol inicials que van marcar el to. Les seves targetes de títol, amb pintures amb un logotip superposat, van ajudar a definir l'aspecte icònic de Hanna-Barbera. Les obres d'art de Goble per a personatges com Quick Draw McGraw i Yogi Bear van ser eficaços en pantalles de televisió més petites. En lloc de reproduir un fotograma de la caricatura, es va centrar a presentar una única idea forta, sovint en silueta, que captava la seva essència. A "The Buzzin' Bear", Yogi passa en un helicòpter. Rebota, amb una cistella de pic-nic a la mà, a "Bear on a Picnic" i per al seu "Prize Fight Fright", Yogi encaixa el text del títol.
Amb poc o cap moviment en què confiar, els fotogrames individuals de Goble havien de crear un estat d'ànim, configurar l'escenari i descriure una història. Ho van fer utilitzant colors plans, formes gràfiques i tipografia que sovint s'integrava a l'obra d'art.
Com a dissenyadors que treballem al web, els títols de toon ens poden ensenyar molt sobre com transmetre la personalitat d'una marca, fer una primera impressió i establir expectatives per a l'experiència d'algú utilitzant un producte o lloc web. Podem aprendre de les tècniques dels artistes per crear bàners efectius, capçaleres de pàgines de destinació i, fins i tot, pantalles d'esbarjo antigues. Tipografia del títol de Toon Les targetes de títol de dibuixos animats mostren com la combinació de tipus amb imatges dóna el cop de puny que necessita una capçalera o un heroi. Amb un grapat de trucs d'ombra de text, traç de text i transformació, el CSS modern us permet aprofitar aquesta mateixa energia.
El generador de títols de text Toon A l'hora d'escriure aquest article, em vaig adonar que seria útil tenir una eina per generar text amb un estil com els títols de dibuixos animats que tant m'agraden. Així que en vaig fer un. My Toon Text Title Generator us permet experimentar amb colors, traços i diverses ombres de text. Podeu ajustar l'ordre de la pintura, aplicar l'espaiat entre lletres, previsualitzar el vostre text en una selecció de tipus de lletra de mostra i després copiar el CSS generat directament al porta-retalls per utilitzar-lo en un projecte. Toon Títol CSS Simplement podeu copiar i enganxar el CSS que us proporciona el generador de títols de text Toon. Però mirem més de prop què fa. Ombra del text Mireu el tipus d'aquest títol de l'episodi d'Augie Doggie "Yuk-Yuk Duck", amb les seves lletres grogues pàl·lides i una ombra fosca, dura i compensada que l'aixeca del fons i crea la il·lusió de profunditat.
Probablement ja sabeu que text-shadow accepta quatre valors: (1) desplaçaments horitzontals i (2) verticals, (3) desenfocament i (4) un color que pot ser sòlid o semitransparent. Aquests valors de compensació poden ser positius o negatius, de manera que puc replicar "Yuk-Yuk Duck" amb una ombra dura tirada cap avall i cap a la dreta: color: #f7f76d; ombra de text: 5px 5px 0 #1e1904;
D'altra banda, aquest títol de "Pint Giant" té una sensació diferent amb la seva ombra negativa semisuau: color: #c2a872; ombra de text: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Per afegir més profunditat i crear efectes més interessants, puc posar diverses ombres en capes. Per a "Let's Duck Out", combino quatre ombres: la primera una ombra sòlida amb un desplaçament horitzontal negatiu per aixecar el text del fons, seguida d'ombres progressivament més suaus per crear un desenfocament al seu voltant: color: #6F4D80; ombra de text: -5px5px 0 #260e1e, /* Ombra 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Aquestes ombres mostren que l'ús de text-shadow no només es tracta de crear efectes d'il·luminació, ja que també poden ser decoratius i afegir personalitat. Traç de text Moltes targetes de títol de dibuixos animats presenten lletres amb un contorn en negreta que les fa destacar del fons. Puc recrear aquest efecte fent servir el traç de text. Durant molt de temps, aquesta propietat només estava disponible mitjançant un prefix -webkit-, però això també vol dir que ara és compatible amb els navegadors moderns.
text-stroke és una abreviatura de dues propietats. El primer, ample de traç de text, dibuixa un contorn al voltant de lletres individuals, mentre que el segon, color de traç de text, en controla el color. Per a "Whatever Goes Pup", he afegit un traç blau de 4 píxels al text groc: color: #eff0cd; -webkit-text-stroke: 4px #7890b5; traç de text: 4px #7890b5;
Els traços poden ser especialment útils quan es combinen amb ombres, així que per a "Creixent, creixent, desaparegut", he afegit un traç prim de 3 píxels a una ombra d'1 px amb prou feines difuminada per crear aquest efecte de text tridimensional: color: #fbb999; ombra de text: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; traç de text: 3px #984336;
Ordre de pintura L'ús de traç de text no sempre produeix el resultat esperat, especialment amb lletres més fines i traços més gruixuts, perquè de manera predeterminada el navegador dibuixa un traç sobre el farciment. Malauradament, CSS encara no em permet ajustar la col·locació del traç com ho faig sovint a Sketch. Tanmateix, la propietat d'ordre de pintura té valors que em permeten col·locar el traç darrere, en lloc de davant, del farciment.
paint-order: traç pinta primer el traç, després el farciment, mentre que paint-order: farciment fa el contrari: color: #fbb999; ordre de pintura: farcir; ombra de text: 3px 5px 1px #5160b1; text-stroke-color:#984336; amplada del traç del text: 3px;
Un traç efectiu manté les lletres llegibles, afegeix pes i, quan es combina amb ombres i ordre de pintura, dóna presència real al text pla. Fons dins del text Moltes targetes de títol de dibuixos animats van més enllà del color pla afegint textura, degradats o detalls il·lustrats a les lletres. De vegades és una textura, altres vegades pot ser un degradat amb un subtil canvi de to. Al web, puc recrear aquest efecte fent servir una imatge de fons o un degradat darrere del text i després retallar-lo a la forma de les lletres. Això es basa en dues propietats que treballen juntes: background-clip: text i text-fill-color: transparent.
Primer, aplico un fons darrere del text. Pot ser un mapa de bits o una imatge vectorial o un gradient CSS. Per a aquest exemple de l'episodi "Baba Bait" de Quick Draw McGraw, el text del títol inclou un degradat subtil de dalt a baix de fosc a clar: fons: gradient lineal (0deg, #667b6a, #1d271a);
A continuació, retallo aquest fons als glifs i faig que el text sigui transparent perquè el fons es mostri: -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Amb només aquestes dues línies, el fons ja no es pinta darrere del text; en canvi, està pintat dins. Aquesta tècnica funciona especialment bé quan es combina amb traços i ombres. Un degradat retallat proporciona color i textura a les lletres, un traç manté les vores nítides i una ombra l'eleva del fons. Junts, recreen l'aspecte en capes de les targetes de títol pintades a mà amb res més que una mica de CSS. Com sempre, proveu el text retallat amb cura, ja que les peculiaritats del navegador de vegades poden afectar les ombres i la representació. Divisió del text en caràcters individuals De vegades no vull estilitzar una paraula sencera o un encapçalament. Vull estilitzar lletres individuals: per posar un personatge al seu lloc, donar un pes addicional a un glif o animar unes quantes lletres de manera independent. En HTML i CSS senzills, només hi ha una manera fiable de fer-ho: embolicar cada caràcter en el seu propi element span. Podria fer-ho manualment, però seria fràgil, difícil de mantenir i es desintegraria ràpidament quan canviessin la còpia. En canvi, quan necessito un control per lletra, faig servir una biblioteca de divisió de text com splt.js (tot i que hi ha altres solucions disponibles). Això pren un node de text i embolcalla automàticament paraules o caràcters, donant-me ganxos addicionals per animar i estilitzar sense malmetre el meu marcatge. És un enfocament que manté el meu HTML llegible i semàntic, alhora que em dóna el control detallat que necessito per recrear la tipografia desigual i de caràcter que veieu a les targetes de títol clàssiques de dibuixos animats. Tanmateix, aquest enfocament ve ambadvertències d'accessibilitat, ja que la majoria de lectors de pantalla llegeixen els nodes de text per ordre. Així que això:
Hum Sweet Hum
... es llegeix com esperaries: Hum Dolç Hum
Però això:
H u m
...es pot interpretar de manera diferent segons el navegador i el lector de pantalla. Alguns concatenaran les lletres i llegiran les paraules correctament. Altres poden fer una pausa entre lletres, cosa que en el pitjor dels casos podria semblar: "H..." "U..." "M..."
Malauradament, algunes solucions de divisió no ofereixen un resultat sempre accessible, així que he escrit el meu propi divisor de text, splinter.js, que actualment es troba en versió beta. Transformant lletres individuals Per activar el meu Toon Text Splitter, afegeixo un atribut de dades a l'element que vull dividir:
Hum Sweet Hum
En primer lloc, el meu script separa cada paraula en lletres individuals i les embolcalla en un element span amb atributs de classe i ARIA aplicats:
Aleshores, l'script pren el contingut inicial de l'element dividit i l'afegeix com a atribut d'aria per ajudar a mantenir l'accessibilitat:
Amb aquests atributs de classe aplicats, puc dissenyar caràcters individuals segons el que trii.
Per exemple, per a "Hum Sweet Hum", vull replicar com les seves lletres s'allunyen de la línia de base. Després d'utilitzar el meu Toon Text Splitter, vaig aplicar quatre valors de traducció diferents mitjançant diversos selectors :nth-child per crear un aspecte semi-aleatori: /* 4t, 8è, 12è... */ .toon-char:nth-child(4n) { tradueix: 0 -8px; } /* 1r, 5è, 9è... */ .toon-char:nth-child(4n+1) { tradueix: 0 -4px; } /* 2n, 6è, 10è... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3r, 7è, 11è... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Però traduir és només una propietat que puc utilitzar per transformar el meu text de dibuixos.
També podria girar aquests personatges individuals per obtenir un aspecte encara més caòtic: /* 4t, 8è, 12è... */ .toon-line .toon-char:nth-child (4n) { rotació: -4deg; } /* 1r, 5è, 9è... */ .toon-char:nth-child (4n+1) { rotació: -8deg; } /* 2n, 6è, 10è... */ .toon-char:nth-child (4n+2) { rotació: 4deg; } /* 3r, 7è, 11è... */ .toon-char:nth-child (4n+3) { rotació: 8deg; }
Però traduir és només una propietat que puc utilitzar per transformar el meu text de dibuixos. També podria girar aquests personatges individuals per obtenir un aspecte encara més caòtic: /* 4t, 8è, 12è... */ .toon-line .toon-char:nth-child(4n) { girar: -4 graus; }
/* 1r, 5è, 9è... */ .toon-char:nth-child (4n+1) { girar: -8 graus; }
/* 2n, 6è, 10è... */ .toon-char:nth-child (4n+2) { girar: 4 graus; }
/* 3r, 7è, 11è... */ .toon-char:nth-child (4n+3) { girar: 8 graus; }
I, per descomptat, podria afegir animacions per agitar aquests personatges i donar vida als meus títols de text. Primer, vaig crear una animació de fotograma clau que gira els personatges:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transformar: rotar(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transformar: rotar(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Abans d'aplicar-lo als elements span creats pel meu Toon Text Splitter: .toon-char { animació: jiggle 3s infinita facilitat d'entrada i sortida; origen-transformació: fons central; }
I, finalment, establiu la quantitat de rotació i un retard abans que cada personatge comenci a moure's: .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ó-retard: 0,1 s; } .toon-char:nth-child (4n+1) { animació-retard: 0,3 s; } .toon-char:nth-child (4n+2) { animació-retard: 0,5 s; } .toon-char:nth-child (4n+3) { animació-retard: 0,7 s; }
Un fotograma per fer una impressió Els artistes de títols de dibuixos animats tenien un marc per impressionar i la seva tipografia era tan important com l'obra d'art que pintaven. El mateix passa a la xarxa. Una capçalera o un heroi ben dissenyatL'àrea necessita claredat, caràcter i confiança, no només una imatge de fons d'amplada completa esvaïda. Amb algunes propietats CSS escollides amb cura (ombres, traços, fons retallats i una mica d'animació restringida), podem recrear el mateix impacte. M'encanta el text toon no perquè sigui nostàlgic, sinó perquè el seu disseny és intencionat. Feu eleccions deliberades i deixeu que una mica de tipografia de text amb dibuixos afegeixi punxada als vostres dissenys.
