Nakon završetka projekta koji je zahtijevao da naučim sve što mogu o CSS i SVG animacijama, počeo sam pisati ovu seriju o razbijajućim animacijama i „Kako klasični crtani filmovi inspiriraju moderni CSS“. Da zaokružim ovu godinu, želim da vam pokažem kako da koristite moderni CSS da kreirate element koji Toon Titles čini tako upečatljivim: njihovu tipografiju. Naslov Artwork Design U tihoj eri 1920-ih i ranih 30-ih, tipografija naslovne karte filma stvarala je raspoloženje, postavljala scenu i podsjetila publiku na vrstu filma koju su platili da pogleda.
Naslovne kartice crtanog filma su takođe bile brendiranje, raspoloženje i scenografija, sve to spojeno u jedno. U ranim godinama, kada su budžeti velikih studija bili veći, ove naslovne karte su često bile ilustrativne i slikovite.
Ali kada je televizija procvjetala tokom 1950-ih, budžeti su pali, a kartice koje su dizajnirali umjetnici poput Lawrencea “Art” Goblea usvojili su novi vizuelni jezik, postajući više grafički, stilizovani i manje zamršeni. Napomena: Lawrence “Art” Goble jedan je od često zanemarenih heroja američke animacije iz sredine stoljeća. On je prvenstveno radio za Hanna-Barbera tokom njenih najuticajnijih godina 1950-ih i 1960-ih. Goble nije bio animator likova. Njegova uloga je bila stvaranje atmosfere, pa je dizajnirao okruženja za The Flintstones, Huckleberry Hound, Quick Draw McGraw i Yogi Bear, kao i uvodne naslovne karte koje su dale ton. Njegove naslovne karte, sa slikama sa prekrivenim logom, pomogle su u definiranju kultnog izgleda Hanne-Barbere. Gobleova umjetnička djela za likove kao što su Quick Draw McGraw i Yogi Bear bila su učinkovita na manjim TV ekranima. Umjesto da reproducira kadar iz crtanog filma, on se fokusirao na predstavljanje jedne, snažne ideje - često u silueti - koja je uhvatila njegovu suštinu. U "The Buzzin' Bear" Yogi prolazi u helikopteru. On odskače, s korpom za pik-a-nik u ruci, u "Medvedu na pikniku", a za svoj "Strah nad nagradnom borbom" Yogi stavlja u kutije tekst naslova.
Uz malo ili nimalo pokreta na koje se može osloniti, Gobleovi pojedinačni kadri morali su stvoriti raspoloženje, postaviti scenu i opisati priču. To su učinili koristeći ravne boje, grafičke oblike i tipografiju koja je često bila integrirana u umjetničko djelo.
Kao dizajneri koji rade na webu, toon naslovi nas mogu 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 da kreiramo efektne banere, zaglavlja odredišnih stranica, pa čak i dobre stare splash screenove. Toon Tipografija naslova Naslovne kartice crtanog filma pokazuju kako spajanje tipa sa slikama daje udarac koji je potreban zaglavlju ili heroju. Uz pregršt trikova za sjenu teksta, potez teksta i transformaciju, moderni CSS vam omogućava da iskoristite tu istu energiju.
Generator naslova Toon teksta Tokom pisanja ovog članka, shvatio sam da bi bilo korisno imati alat za generiranje teksta stiliziranog poput naslova crtanih filmova koje toliko volim. Pa sam napravio jedan. My Toon Text Title Generator vam omogućava da eksperimentišete sa bojama, potezima i višestrukim senkama teksta. Možete prilagoditi redoslijed slikanja, primijeniti razmak između slova, pregledati svoj tekst u odabiru uzoraka fontova, a zatim kopirati generirani CSS direktno u međuspremnik da biste ga koristili u projektu. Toon Title CSS Možete jednostavno kopirati i zalijepiti CSS koji vam pruža Toon Text Title Generator. Ali pogledajmo bliže šta radi. Sjena teksta Pogledajte tip u ovom naslovu iz epizode "Yuk-Yuk Duck" Augie Doggieja, sa svojim blijedožutim slovima i tamnom, tvrdom, pomaknutom sjenom koja ga izdiže s pozadine i stvara iluziju dubine.
Verovatno već znate da senka teksta prihvata četiri vrednosti: (1) horizontalno i (2) vertikalno pomeranje, (3) zamućenje i (4) boju koja može biti čvrsta ili poluprozirna. Te vrijednosti pomaka mogu biti pozitivne ili negativne, tako da mogu replicirati "Yuk-Yuk Duck" koristeći tvrdu sjenku povučenu dolje i udesno: boja: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
S druge strane, ovaj naslov “Pint Giant” ima drugačiji osjećaj sa svojom negativnom polu-mekom sjenom: boja: #c2a872; sjena teksta: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Da bih dodao dodatnu dubinu i stvorio zanimljivije efekte, mogu slojem više sjenki. Za “Let’s Duck Out” kombinujem četiri senke: prvu čvrstu senku sa negativnim horizontalnim pomakom da podignem tekst sa pozadine, a zatim progresivno mekše senke da se stvori zamućenje oko njega: boja: #6F4D80; sjena teksta: -5px5px 0 #260e1e, /* Sjena 1 */ 0 0 15px #e9ce96, /* Sjena 2 */ 0 0 30px #e9ce96, /* Sjena 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Ove sjene pokazuju da korištenje sjene teksta nije samo stvaranje svjetlosnih efekata, jer mogu biti i dekorativne i dodati osobnost. Text Stroke Mnoge naslovne kartice crtanog filma sadrže slova sa podebljanim obrisima koji ih izdvajaju iz pozadine. Mogu ponovo kreirati ovaj efekat koristeći tekstualni potez. Dugo vremena je ovo svojstvo bilo dostupno samo preko -webkit- prefiksa, ali to također znači da je sada podržano u modernim pretraživačima.
text-stroke je skraćenica za dva svojstva. Prva, širina poteza teksta, iscrtava konturu oko pojedinačnih slova, dok druga, boja teksta-stroka, kontrolira njegovu boju. Za "Whatever Goes Pup," dodao sam plavi potez od 4px na žuti tekst: boja: #eff0cd; -webkit-text-stroke: 4px #7890b5; potez teksta: 4px #7890b5;
Potezi mogu biti posebno korisni kada se kombinuju sa senkama, pa sam za "Raste, raste, nestao" dodao tanak potez od 3px na jedva zamućenu senku od 1px da stvorim ovaj trodimenzionalni efekt teksta: boja: #fbb999; sjena teksta: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; potez teksta: 3px #984336;
Paint Order Korištenje poteza teksta ne daje uvijek očekivani rezultat, posebno sa tanjim slovima i debljim potezima, jer pretraživač prema zadanim postavkama crta potez preko ispune. Nažalost, CSS mi još uvijek ne dozvoljava da prilagodim položaj poteza kao što to često radim u Sketchu. Međutim, svojstvo reda slikanja ima vrijednosti koje mi omogućavaju da postavim potez iza, a ne ispred ispune.
paint-order: stroke slika prvo potez, zatim ispunu, dok red paint-order: fill čini suprotno: boja: #fbb999; red boja: ispuna; sjena teksta: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Efikasan potez čini slova čitljivima, dodaje težinu i — u kombinaciji sa senkama i redosledom boje — daje ravnom tekstu stvarno prisustvo. Pozadine unutar teksta Mnoge naslovne kartice crtića nadilaze ravne boje dodavanjem teksture, preliva ili ilustrovanih detalja u natpise. Ponekad je to tekstura, drugi put može biti gradijent sa suptilnim pomakom tonova. Na webu mogu ponovo kreirati ovaj efekat koristeći pozadinsku sliku ili gradijent iza teksta, a zatim ga izrezati u oblik slova. Ovo se oslanja na dva svojstva koja rade zajedno: background-clip: text i text-fill-color: transparent.
Prvo, nanosim pozadinu iza teksta. Ovo može biti bitmap ili vektorska slika ili CSS gradijent. Za ovaj primjer iz Quick Draw McGraw epizode "Baba Bait", tekst naslova uključuje suptilni gradijent od vrha do dna od tamnog prema svijetlom: pozadina: linearni gradijent (0deg, #667b6a, #1d271a);
Zatim, isečem tu pozadinu na glifove i učinim tekst transparentnim tako da se pozadina vidi kroz: -webkit-background-clip: tekst; -webkit-text-fill-color: transparentan;
Sa samo te dvije linije, pozadina više nije oslikana iza teksta; umjesto toga, naslikan je unutar njega. Ova tehnika djeluje posebno dobro u kombinaciji s potezima i sjenama. Isječeni gradijent daje natpisu boju i teksturu, potez drži njegove rubove oštrim, a sjena ga izdiže iz pozadine. Zajedno, oni rekreiraju slojevit izgled ručno oslikanih naslovnih kartica koristeći samo malo CSS-a. Kao i uvijek, pažljivo testirajte isječeni tekst, jer nedoumice pretraživača ponekad mogu uticati na senke i renderovanje. Podjela teksta na pojedinačne znakove Ponekad ne želim stilizirati cijelu riječ ili naslov. Želim stilizirati pojedinačna slova — da gurnem lik na mjesto, dam jednom znaku dodatnu težinu ili animiram nekoliko slova nezavisno. U običnom HTML-u i CSS-u postoji samo jedan pouzdan način da se to učini: umotati svaki znak u vlastiti element span. Mogao bih to učiniti ručno, ali to bi bilo krhko, teško za održavanje i brzo bi se raspalo kada se kopiranje promijeni. Umjesto toga, kada mi treba kontrola po slovu, koristim biblioteku za podjelu teksta kao što je splt.js (iako su druga rješenja dostupna). Ovo uzima tekstualni čvor i automatski prelama riječi ili znakove, dajući mi dodatne kuke za animaciju i stil bez zabrljanja moje oznake. To je pristup koji moj HTML održava čitljivim i semantičnim, dok mi daje finu kontrolu koja mi je potrebna da ponovo kreiram neujednačenu, karakternu tipografiju koju vidite na naslovnim karticama klasičnih crtanih filmova. Međutim, ovaj pristup dolazi saograničenja pristupačnosti, jer većina čitača ekrana čita tekstualne čvorove po redu. pa ovo:
Hum Sweet Hum
…čita kako biste očekivali: Hum Sweet Hum
ali ovo:
H u m
…može se tumačiti različito u zavisnosti od pretraživača i čitača ekrana. 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 ovako: “H…” “U...” “M…”
Nažalost, neka rješenja za podjelu ne daju uvijek dostupan rezultat, pa sam napisao svoj vlastiti razdjelnik teksta, splinter.js, koji je trenutno u beta fazi. Transformacija pojedinačnih slova Da aktiviram svoj Toon Text Splitter, dodajem atribut data-a elementu koji želim podijeliti:
Hum Sweet Hum
Prvo, moja skripta razdvaja svaku riječ u pojedinačna slova i omota ih u element span s primijenjenim atributima klase i ARIA:
Skripta zatim uzima početni sadržaj split elementa i dodaje ga kao atribut atributa kako bi pomogao u održavanju pristupačnosti:
Sa primijenjenim atributima klase, mogu onda stilizirati pojedinačne znakove po želji.
Na primjer, za “Hum Sweet Hum” želim da ponovim kako se njegova slova pomiču od osnovne linije. Nakon što sam koristio svoj Toon Text Splitter, primijenio sam četiri različite vrijednosti prijevoda koristeći nekoliko :nth-child selektora da stvorim polu-slučajan izgled: /* 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 da transformišem svoj tekst u mutlu.
Također bih mogao rotirati te pojedinačne znakove za još haotičniji izgled: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
Ali translate je samo jedno svojstvo koje mogu koristiti da transformišem svoj tekst u mutlu. Također bih mogao rotirati te pojedinačne znakove za još haotič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: 8 stepeni; }
I, naravno, mogao bih da dodam animacije da pomeram te likove i da oživim naslove u stilu teksta. Prvo sam kreirao animaciju ključnog kadra koja rotira likove:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Prije nego što ga primijenite na elemente raspona koje je kreirao moj Toon Text Splitter: .toon-char { animacija: jiggle 3s beskonačna lakoća ulaska; transformacija porijekla: središnje dno; }
I konačno, postavljanje količine rotacije i kašnjenja prije nego što svaki znak počne da se trese: .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) { kašnjenje animacije: 0,3 s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
Jedan okvir za ostavljanje utiska Autori naslova crtanih filmova imali su jedan okvir da ostave utisak, a njihova tipografija je bila jednako važna kao i umjetničko djelo koje su slikali. Isto je i na webu. Dobro dizajnirano zaglavlje ili herojpodručju je potrebna jasnoća, karakter i samopouzdanje – ne samo izblijedjela pozadinska slika pune širine. Sa nekoliko pažljivo odabranih CSS svojstava – senke, potezi, isečene pozadine i neke suzdržane animacije – možemo ponovo stvoriti isti uticaj. Volim toon tekst ne zato što sam nostalgičan, već zato što je njegov dizajn namjeran. Napravite namjerne izbore i dopustite maloj tipografiji teksta u obliku toon-a da unese snagu vašem dizajnu.
