Nakon završetka projekta koji je od mene zahtijevao da naučim sve što sam mogao o CSS i SVG animacijama, počeo sam pisati ovu seriju o Smashing Animations i "Kako klasični crtani filmovi inspiriraju moderni CSS." Da zaokružim ovu godinu, želim vam pokazati kako koristiti moderni CSS za stvaranje elementa koji Toon naslove čini tako dojmljivima: njihovu tipografiju. Naslov Dizajn umjetničkog djela U nijemoj eri 1920-ih i ranih 30-ih, tipografija naslovne kartice filma stvorila je raspoloženje, postavila scenu i podsjetila publiku na vrstu filma koju su platili da pogledaju.
Naslovne kartice crtića također su bile brendiranje, raspoloženje i scenografija, sve u jednom. U prvim godinama, kada su proračuni velikih studija bili veći, te su naslovne kartice često bile ilustrativne i slikarske.
Ali kada je televizija procvala tijekom 1950-ih, budžeti su pali, a kartice koje su dizajnirali umjetnici poput Lawrencea "Arta" Goblea usvojile su novi vizualni jezik, postajući slikovitije, stiliziranije i manje zamršene. Napomena: Lawrence “Art” Goble jedan je od često zanemarenih heroja američke animacije sredinom stoljeća. Prvenstveno je radio za Hanna-Barberu tijekom njezinih najutjecajnijih godina 1950-ih i 1960-ih. Goble nije bio animator likova. Njegova je uloga bila stvoriti atmosferu, pa je dizajnirao okruženja za The Flintstones, Huckleberry Hound, Quick Draw McGraw i Yogi Bear, kao i uvodne naslovne kartice koje su dale ton. Njegove naslovne kartice, sa slikama s logotipom, pomogle su u definiranju ikoničnog izgleda Hanna-Barbere. Gobleova ilustracija za likove kao što su Quick Draw McGraw i Yogi Bear bila je učinkovita na manjim TV ekranima. Umjesto reproduciranja kadra iz crtića, usredotočio se na predstavljanje jedne, snažne ideje - često u silueti - koja je uhvatila njegovu bit. U "The Buzzin' Bear", Yogi prolazi u helikopteru. On odskače, s košaricom za pik-a-nic u ruci, u "Medvjedu na pikniku", a za svoj "Prize Fight Fright", Yogi uokviruje naslovni tekst.
S malo ili nimalo pokreta na koje se mogao osloniti, Gobleovi pojedinačni kadrovi morali su stvoriti raspoloženje, postaviti scenu i opisati priču. Učinili su to koristeći ravne boje, grafičke oblike i tipografiju koja je često bila integrirana u umjetničko djelo.
Kao dizajnere koji rade na webu, naslovi filmova mogu nas naučiti mnogo o tome kako prenijeti osobnost brenda, ostaviti prvi dojam i postaviti očekivanja za nečije iskustvo korištenja proizvoda ili web stranice. Možemo učiti od tehnika umjetnika za stvaranje učinkovitih bannera, zaglavlja odredišne stranice, pa čak i dobrih starih zaslona. Tipografija naslova Toona Naslovne kartice crtanih filmova pokazuju kako spajanje slova sa slikama daje dojam koji je potreban zaglavlju ili junaku. Uz pregršt trikova za sjenčanje teksta, crtanje teksta i transformaciju, moderni CSS omogućuje vam da iskoristite tu istu energiju.
Generator naslova teksta Toon Tijekom pisanja ovog članka shvatio sam da bi bilo korisno imati alat za generiranje teksta stiliziranog poput naslova crtića koje toliko volim. Pa sam napravio jedan. My Toon Text Title Generator omogućuje vam eksperimentiranje s bojama, potezima i višestrukim sjenkama teksta. Možete podesiti redoslijed bojanja, primijeniti razmak između slova, pregledati svoj tekst u izboru oglednih fontova, a zatim kopirati generirani CSS ravno u međuspremnik za korištenje u projektu. Toon Naslov CSS Možete jednostavno kopirati-zalijepiti CSS koji vam daje Toon Text Title Generator. Ali pogledajmo pobliže što radi. Sjena teksta Pogledajte tip u ovom naslovu iz epizode Augieja Doggieja "Yuk-Yuk Duck", sa svojim blijedožutim slovima i tamnom, tvrdom, pomaknutom sjenom koja ga podiže s pozadine i stvara iluziju dubine.
Vjerojatno već znate da sjena teksta prihvaća četiri vrijednosti: (1) vodoravne i (2) okomite pomake, (3) zamućenje i (4) boju koja može biti puna ili poluprozirna. Te vrijednosti pomaka mogu biti pozitivne ili negativne, tako da mogu replicirati "Yuk-Yuk Duck" koristeći čvrstu sjenu povučenu prema dolje i udesno: boja: #f7f76d; tekst-sjena: 5px 5px 0 #1e1904;
S druge strane, ovaj naslov "Pint Giant" ima drugačiji dojam sa svojom negativnom polumekom sjenom: boja: #c2a872; tekst-sjena: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Kako bih dodao dodatnu dubinu i stvorio zanimljivije efekte, mogu slojeviti više sjena. Za "Let's Duck Out" kombiniram četiri sjene: prva je čvrsta sjena s negativnim vodoravnim pomakom kako bi se tekst podigao s pozadine, a zatim postupno mekše sjene kako bi se stvorila zamućenost oko njega: boja: #6F4D80; tekst-sjena: -5px5px 0 #260e1e, /* Sjena 1 */ 0 0 15px #e9ce96, /* Sjena 2 */ 0 0 30px #e9ce96, /* Sjena 3 */ 0 0 30px #e9ce96; /* Sjena 4 */
Ove sjene pokazuju da korištenje tekstualne sjene nije samo stvaranje svjetlosnih efekata, jer mogu biti i dekorativne i dodati osobnost. Potez teksta Mnoge naslovne kartice crtanih filmova sadrže slova s podebljanim obrisima koji ih ističu u pozadini. Mogu rekreirati ovaj efekt pomoću poteza teksta. Dugo je vrijeme ovo svojstvo bilo dostupno samo putem prefiksa -webkit-, ali to također znači da je sada podržano u svim modernim preglednicima.
text-stroke je skraćenica za dva svojstva. Prvi, text-stroke-width, iscrtava konturu oko pojedinačnih slova, dok drugi, text-stroke-color, kontrolira njihovu boju. Za "Whatever Goes Pup", dodao sam plavi potez od 4 px žutom tekstu: boja: #eff0cd; -webkit-text-stroke: 4px #7890b5; potez teksta: 4px #7890b5;
Potezi mogu biti posebno korisni kada se kombiniraju sa sjenama, pa sam za "Growing, Growing, Gone" dodao tanki potez od 3 px jedva zamućenoj sjeni od 1 px kako bih stvorio ovaj efekt trodimenzionalnog teksta: boja: #fbb999; tekst-sjena: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; potez teksta: 3px #984336;
Narudžba boje Korištenje poteza teksta ne daje uvijek očekivani rezultat, osobito s tanjim slovima i debljim potezima, jer prema zadanim postavkama preglednik crta potez preko ispune. Nažalost, CSS mi još uvijek ne dopušta prilagođavanje položaja poteza kao što to često radim u Sketchu. Međutim, svojstvo redoslijeda slikanja ima vrijednosti koje mi omogućuju postavljanje poteza iza ispune, a ne ispred.
paint-order: stroke prvo boji potez, a zatim ispunu, dok paint-order: fill radi suprotno: boja: #fbb999; redoslijed boje: ispuna; tekst-sjena: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Učinkovit potez čini slova čitljivima, dodaje težinu i — u kombinaciji sa sjenama i redoslijedom boja — daje ravnom tekstu stvarnu prisutnost. Pozadine unutar teksta Mnoge naslovne kartice crtanih filmova nadilaze jednostavnu boju dodavanjem teksture, prijelaza ili ilustriranih detalja natpisima. Ponekad je to tekstura, a ponekad može biti gradijent sa suptilnim tonskim pomakom. Na webu mogu ponovno stvoriti ovaj efekt korištenjem pozadinske slike ili gradijenta iza teksta, a zatim ga izrezati u obliku slova. Ovo se oslanja na dva svojstva koja rade zajedno: background-clip: text i text-fill-color: transparent.
Prvo nanosim pozadinu iza teksta. To može biti bitmapa ili vektorska slika ili CSS gradijent. Za ovaj primjer iz epizode Quick Draw McGraw "Baba Bait", naslovni tekst uključuje suptilni gradijent od vrha do dna od tamnog prema svijetlom: pozadina: linearni gradijent(0deg, #667b6a, #1d271a);
Zatim prisječem tu pozadinu na glifove i činim tekst prozirnim tako da se pozadina vidi kroz: -webkit-background-clip: tekst; -webkit-text-fill-color: transparentan;
Sa samo ta dva retka pozadina više nije oslikana iza teksta; umjesto toga, naslikano je unutar njega. Ova tehnika posebno dobro funkcionira u kombinaciji s potezima i sjenama. Ošišani gradijent daje natpisu boju i teksturu, potez održava njegove rubove oštrima, a sjena ga izdiže od pozadine. Zajedno stvaraju slojeviti izgled ručno oslikanih naslovnih kartica koristeći samo malo CSS-a. Kao i uvijek, pažljivo testirajte izrezani tekst jer nepravilnosti preglednika ponekad mogu utjecati na sjene i renderiranje. Dijeljenje teksta na pojedinačne znakove Ponekad ne želim stilizirati cijelu riječ ili naslov. Želim stilizirati pojedinačna slova — gurnuti znak na mjesto, dati jednom glifu dodatnu težinu ili animirati nekoliko neovisnih slova. U običnom HTML-u i CSS-u postoji samo jedan pouzdan način da to učinite: zamotajte svaki znak u svoj vlastiti span element. Mogao bih to učiniti ručno, ali to bi bilo krhko, teško za održavanje i brzo bi se raspalo kad se kopija promijeni. Umjesto toga, kada trebam kontrolu po slovu, koristim biblioteku za dijeljenje teksta kao što je splt.js (iako su dostupna i druga rješenja). Ovo uzima tekstualni čvor i automatski prelama riječi ili znakove, dajući mi dodatne kuke za animiranje i stiliziranje bez zabrljanja u označavanju. To je pristup koji održava moj HTML čitljivim i semantičnim, a istovremeno mi daje finu kontrolu koja mi je potrebna za rekreaciju neujednačene, karakterne tipografije koju vidite na naslovnim karticama klasičnih crtanih filmova. Međutim, ovaj pristup dolazi sograničenja pristupačnosti, jer većina čitača zaslona čita tekstualne čvorove redom. Dakle ovo:
Hum Sweet Hum
...čita se kako biste očekivali: Hum Slatki Hum
Ali ovo:
H u m
...mogu se različito tumačiti ovisno o pregledniku i čitaču zaslona. Neki će spojiti slova i pravilno pročitati riječi. Drugi mogu pauzirati između slova, što bi u najgorem slučaju moglo zvučati kao: "H..." "U..." "M..."
Nažalost, neka rješenja za dijeljenje ne daju uvijek dostupan rezultat, pa sam napisao vlastiti razdjelnik teksta, splinter.js, koji je trenutno u beta verziji. Transformacija pojedinačnih slova Da aktiviram svoj Toon Text Splitter, dodajem data- atribut elementu koji želim podijeliti:
Pjevuši slatko pjevuši
Prvo, moja skripta razdvaja svaku riječ u pojedinačna slova i umata ih u span element s primijenjenim atributima class i ARIA:
Skripta tada uzima početni sadržaj podijeljenog elementa i dodaje ga kao atribut aria kako bi se održala pristupačnost:
S tim primijenjenim atributima klase mogu stilizirati pojedinačne znakove po svom izboru.
Na primjer, za "Hum Sweet Hum," želim replicirati kako se slova pomiču od osnovne linije. Nakon što sam upotrijebio svoj Toon Text Splitter, primijenio sam četiri različite vrijednosti prijevoda pomoću nekoliko selektora :nth-child za stvaranje polu-slučajnog izgleda: /* 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; }
Ali translate je samo jedno svojstvo koje mogu koristiti za transformaciju svog toon teksta.
Također bih mogao rotirati te pojedinačne znakove za još kaotičniji izgled: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotirati: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotirati: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { rotirati: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { rotirati: 8deg; }
Ali translate je samo jedno svojstvo koje mogu koristiti za transformaciju svog toon teksta. Također bih mogao rotirati te pojedinačne znakove za još kaotičniji izgled: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotirati: -4deg; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotirati: -8deg; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { rotirati: 4 stupnja; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { rotirati: 8deg; }
I, naravno, mogao bih dodati animacije za pomicanje tih likova i oživjeti moje naslove u stilu toon teksta. Prvo sam stvorio animaciju ključnih kadrova koja rotira likove:
@keyframes jiggle { 0%, 100% { transform: rotiraj(var(--base-rotate, 0deg)); } 25% { transform: rotiraj(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotiraj(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotiraj(calc(var(--base-rotate, 0deg) + 1deg)); } }
Prije nego što ga primijenite na elemente raspona koje je izradio moj Toon Text Splitter: .toon-char { animacija: jiggle 3s beskonačno lako upuštanje; transform-origin: središte dno; }
I na kraju, postavljanje količine rotacije i odgode prije nego što se svaki znak počne tresti: .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) { animation-delay: 0.3s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
Jedan okvir za ostavljanje dojma Autori naslova crtanih filmova imali su jedan okvir da ostave dojam, a njihova je tipografija bila jednako važna kao i umjetničko djelo koje su slikali. Isto je i na webu. Dobro osmišljeno zaglavlje ili herojpodručje treba jasnoću, karakter i povjerenje - ne samo izblijedjelu pozadinsku sliku pune širine. Uz nekoliko pomno odabranih CSS svojstava - sjene, potezi, izrezane pozadine i neke suzdržane animacije - možemo ponovno stvoriti isti učinak. Volim toon tekst ne zato što sam nostalgičan, već zato što je njegov dizajn namjeran. Napravite promišljene izbore i dopustite maloj tipografiji toon teksta da doprinese vašem dizajnu.
