După ce am terminat un proiect care mi-a cerut să învăț tot ce puteam despre animațiile CSS și SVG, am început să scriu această serie despre Smashing Animations și „How Classic Cartoons Inspire Modern CSS”. Pentru a încheia anul acesta, vreau să vă arăt cum să utilizați CSS modern pentru a crea acel element care face ca Titlurile Toon să aibă un impact atât de important: tipografia lor. Titlu Artwork Design În era tăcută a anilor 1920 și începutul anilor ’30, tipografia cărții de titlu a unui film a creat o stare de spirit, a creat scena și a reamintit publicului tipul de film pe care au plătit să-l vadă.
Cărțile de titlu din desene animate erau, de asemenea, branding, starea de spirit și decorul scenei, toate reunite într-una singură. În primii ani, când bugetele majore ale studiourilor erau mai mari, aceste cărți de titlu erau adesea ilustrative și picturale.
Dar când televiziunea a avut o expansiune în anii 1950, bugetele au scăzut, iar cardurile concepute de artiști precum Lawrence „Art” Goble au adoptat un nou limbaj vizual, devenind mai grafic, stilizat și mai puțin complicat. Notă: Lawrence „Art” Goble este unul dintre eroii adesea ignorați ai animației americane de la mijlocul secolului. El a lucrat în principal pentru Hanna-Barbera în cei mai influenți ani ai săi din anii 1950 și 1960. Goble nu a fost un animator de personaje. Rolul său a fost să creeze atmosferă, așa că a proiectat medii pentru The Flintstones, Huckleberry Hound, Quick Draw McGraw și Yogi Bear, precum și cărțile de titlu de deschidere care au dat tonul. Cărțile sale de titlu, prezentând picturi cu un logo suprapus, au ajutat la definirea aspectului iconic al Hannei-Barbera. Opera de artă a lui Goble pentru personaje precum Quick Draw McGraw și Yogi Bear a fost eficientă pe ecranele TV mai mici. În loc să reproducă un alambic din desene animate, el s-a concentrat pe prezentarea unei singure idei puternice - adesea în siluetă - care i-a surprins esența. În „The Buzzin’ Bear”, Yogi trece cu elicopterul. El se îndepărtează, cu coșul pic-a-nic în mână, în „Bear on a Picnic”, iar pentru „Prize Fight Fright”, Yogi încadează textul titlului.
Cu o mișcare mică sau deloc pe care să te bazezi, cadrele individuale ale lui Goble trebuiau să creeze o stare de spirit, să creeze scena și să descrie o poveste. Au făcut acest lucru folosind culori plate, forme grafice și tipografie care a fost frecvent integrată în opera de artă.
În calitate de designeri care lucrează pe web, titlurile de desene ne pot învăța multe despre cum să transmitem personalitatea unui brand, să facem o primă impresie și să stabilim așteptări pentru experiența cuiva folosind un produs sau un site web. Putem învăța din tehnicile artiștilor pentru a crea bannere eficiente, antete ale paginilor de destinație și chiar și ecrane de tip splash de modă veche. Tipografie pentru titluri Cărțile de titlu din desene animate arată cum îmbinarea tipului cu imaginile oferă puterea de care are nevoie un antet sau un erou. Cu o mână de trucuri de umbră de text, contur de text și transformare, CSS modern vă permite să profitați de aceeași energie.
Generatorul de titluri de text Toon La începutul scrierii acestui articol, mi-am dat seama că ar fi util să am un instrument de generare a textului în stil ca titlurile de desene animate pe care le iubesc atât de mult. Așa că am făcut unul. My Toon Text Title Generator vă permite să experimentați cu culori, linii și mai multe umbre de text. Puteți ajusta ordinea vopselei, aplica spațierea literelor, previzualiza textul într-o selecție de fonturi eșantion și apoi copiați CSS-ul generat direct în clipboard pentru a-l utiliza într-un proiect. Toon Title CSS Puteți pur și simplu să copiați și să lipiți CSS-ul pe care vi-l oferă Generatorul de titluri de text Toon. Dar să ne uităm mai atent la ceea ce face. Umbra textului Priviți tipul din acest titlu din episodul lui Augie Doggie „Yuk-Yuk Duck”, cu literele sale galben pal și umbra întunecată, dură, decalată, care îl ridică de pe fundal și creează iluzia de profunzime.
Probabil știți deja că text-shadow acceptă patru valori: (1) decalaje orizontale și (2) verticale, (3) estompare și (4) o culoare care poate fi solidă sau semi-transparentă. Aceste valori de compensare pot fi pozitive sau negative, așa că pot replica „Yuk-Yuk Duck” folosind o umbră dură trasă în jos și la dreapta: culoare: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Pe de altă parte, acest titlu „Pint Giant” are o senzație diferită cu umbra sa negativă semi-moale: culoare: #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Pentru a adăuga o adâncime suplimentară și a crea efecte mai interesante, pot stratifica mai multe umbre. Pentru „Let’s Duck Out”, combin patru umbre: prima o umbră solidă cu un offset orizontal negativ pentru a ridica textul de pe fundal, urmată de umbre progresiv mai moi pentru a crea o neclaritate în jurul lui: culoare: #6F4D80; text-shadow: -5px5px 0 #260e1e, /* Umbra 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Umbra 4 */
Aceste umbre arată că utilizarea text-shadow nu înseamnă doar crearea de efecte de lumină, deoarece pot fi și decorative și pot adăuga personalitate. Text Stroke Multe cărți de titlu din desene animate prezintă litere cu un contur îndrăzneț care le face să iasă în evidență din fundal. Pot recrea acest efect folosind text-stroke. Multă vreme, această proprietate a fost disponibilă doar printr-un prefix -webkit-, dar asta înseamnă și că acum este acceptată în browserele moderne.
text-stroke este o prescurtare pentru două proprietăți. Primul, text-stroke-width, desenează un contur în jurul literelor individuale, în timp ce al doilea, text-stroke-color, îi controlează culoarea. Pentru „Whatever Goes Pup”, am adăugat o contur albastru de 4px textului galben: culoare: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Conturile pot fi deosebit de utile atunci când sunt combinate cu umbre, așa că pentru „Crește, crește, dispare”, am adăugat o contur subțire de 3 px la o umbră de 1 px abia neclară pentru a crea acest efect de text tridimensional: culoare: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Comanda de vopsea Folosirea text-stroke nu produce întotdeauna rezultatul așteptat, în special cu litere mai subțiri și linii mai groase, deoarece în mod implicit browserul desenează un contur peste umplere. Din păcate, CSS încă nu-mi permite să ajustez plasarea conturului așa cum fac adesea în Sketch. Cu toate acestea, proprietatea de comandă a vopselei are valori care îmi permit să plasez conturul în spatele, mai degrabă decât în fața umplerii.
paint-order: stroke pictează mai întâi cursa, apoi umplerea, în timp ce paint-order: umplere face opusul: culoare: #fbb999; vopsea-comanda: umplere; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
O contur eficientă menține literele lizibile, adaugă greutate și, atunci când este combinată cu umbre și ordinea vopselei, oferă textului plat o prezență reală. Fundaluri în interiorul textului Multe cărți de titlu din desene animate depășesc culoarea netedă, adăugând texturi, degrade sau detalii ilustrate la litere. Uneori, aceasta este o textură, alteori poate fi un gradient cu o schimbare subtilă a tonului. Pe web, pot recrea acest efect utilizând o imagine de fundal sau un gradient în spatele textului, apoi decupându-l la forma literelor. Aceasta se bazează pe două proprietăți care lucrează împreună: background-clip: text și text-fill-color: transparent.
În primul rând, aplic un fundal în spatele textului. Aceasta poate fi o imagine bitmap sau vectorială sau un gradient CSS. Pentru acest exemplu din episodul Quick Draw McGraw „Baba Bait”, textul titlului include un gradient subtil de sus-jos de la întuneric la lumină: fundal: liniar-gradient(0deg, #667b6a, #1d271a);
Apoi, decupez acel fundal la glife și fac textul transparent, astfel încât fundalul să fie afișat prin: -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Cu doar acele două rânduri, fundalul nu mai este pictat în spatele textului; în schimb, este pictat în ea. Această tehnică funcționează mai ales bine atunci când este combinată cu lovituri și umbre. Un gradient tăiat oferă literelor culoare și textură, un contur își păstrează marginile ascuțite, iar o umbră îl ridică de fundal. Împreună, recreează aspectul stratificat al cărților de titlu pictate manual, folosind nimic mai mult decât puțin CSS. Ca întotdeauna, testați cu atenție textul tăiat, deoarece neplăcerile browserului pot afecta uneori umbrele și randarea. Împărțirea textului în caractere individuale Uneori nu vreau să stil un cuvânt sau un titlu întreg. Vreau să stilizez litere individuale — pentru a împinge un personaj în locul său, pentru a da o greutate suplimentară unui glif sau pentru a anima câteva litere independent. În HTML simplu și CSS, există o singură modalitate fiabilă de a face asta: includeți fiecare caracter în propriul său element span. Aș putea face asta manual, dar ar fi fragil, greu de întreținut și s-ar destrama rapid atunci când se schimbă copierea. În schimb, când am nevoie de control pe literă, folosesc o bibliotecă de divizare a textului precum splt.js (deși sunt disponibile alte soluții). Acest lucru ia un nod de text și înfășoară automat cuvinte sau caractere, oferindu-mi cârlige suplimentare pentru a anima și a stila fără a-mi distruge marcajul. Este o abordare care îmi menține HTML lizibil și semantic, oferindu-mi în același timp controlul fin de care am nevoie pentru a recrea tipografia neuniformă și plină de caracter pe care o vedeți în cărțile de titlu clasice din desene animate. Cu toate acestea, această abordare vine cuavertismente de accesibilitate, deoarece majoritatea cititorilor de ecran citesc nodurile de text în ordine. Deci asta:
Hum Sweet Hum
… citește așa cum te-ai aștepta: Hum Dulce Hum
Dar asta:
H u m
… poate fi interpretat diferit în funcție de browser și cititor de ecran. Unii vor concatena literele și vor citi cuvintele corect. Alții se pot opri între litere, ceea ce, în cel mai rău caz, ar putea suna ca: „H…” „U…” „M…”
Din păcate, unele soluții de împărțire nu oferă un rezultat întotdeauna accesibil, așa că am scris propriul meu divizor de text, splinter.js, care este în prezent în versiune beta. Transformarea scrisorilor individuale Pentru a-mi activa Toon Text Splitter, adaug un atribut de date elementului pe care vreau să-l împart:
Hum Sweet Hum
În primul rând, scriptul meu separă fiecare cuvânt în litere individuale și le împachetează într-un element span cu atribute de clasă și ARIA aplicate:
Scriptul preia apoi conținutul inițial al elementului divizat și îl adaugă ca atribut aria pentru a ajuta la menținerea accesibilității:
Cu aceste atribute de clasă aplicate, pot apoi stila caractere individuale după cum aleg.
De exemplu, pentru „Hum Sweet Hum”, vreau să reproduc modul în care literele sale se depărtează de linia de bază. După ce am folosit Toon Text Splitter, am aplicat patru valori de traducere diferite folosind mai multe selectoare :nth-child pentru a crea un aspect semi-aleatoriu: /* 4, 8, 12... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Dar traducerea este doar o proprietate pe care o pot folosi pentru a-mi transforma textul animat.
De asemenea, aș putea roti acele personaje individuale pentru un aspect și mai haotic: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotire: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { rotire: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { rotire: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotire: 8deg; }
Dar traducerea este doar o proprietate pe care o pot folosi pentru a-mi transforma textul animat. De asemenea, aș putea roti acele personaje individuale pentru un aspect și mai haotic: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotire: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { rotire: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { rotire: 4 grade; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotire: 8 grade; }
Și, desigur, aș putea adăuga animații pentru a zgudui acele personaje și pentru a da viață titlurilor mele în stilul desenului. Mai întâi, am creat o animație cadru cheie care rotește personajele:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotire(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotire(calc(var(--base-rotate, 0deg) + 1deg)); } }
Înainte de a-l aplica elementelor span create de Toon Text Splitter: .toon-char { animație: jiggle 3s infinit ease-in-out; transformare-origine: centru jos; }
Și, în sfârșit, setați cantitatea de rotație și o întârziere înainte ca fiecare personaj să înceapă să tremure: .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) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animație-întârziere: 0,3s; } .toon-char:nth-child(4n+2) { animație-întârziere: 0,5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
Un cadru pentru a face o impresie Artiștii cu titluri de desene animate aveau un cadru pentru a face impresie, iar tipografia lor era la fel de importantă ca și opera de artă pe care o pictau. Același lucru este valabil și pe web. Un antet sau un erou bine conceputzona are nevoie de claritate, caracter și încredere – nu doar o imagine de fundal decolorată la lățime completă. Cu câteva proprietăți CSS alese cu grijă - umbre, linii, fundal decupat și o animație restrânsă - putem recrea același impact. Îmi place textul toon nu pentru că sunt nostalgic, ci pentru că designul său este intenționat. Faceți alegeri intenționate și lăsați un pic de tipografie cu text animat să adauge design-ului dvs.
