Etter å ha fullført et prosjekt som krevde at jeg lærte alt jeg kunne om CSS- og SVG-animasjoner, begynte jeg å skrive denne serien om Smashing Animations og "How Classic Cartoons Inspire Modern CSS." For å avrunde dette året, vil jeg vise deg hvordan du bruker moderne CSS for å lage det elementet som gjør Toon Titles så virkningsfulle: typografien deres. Tittel Artwork Design I den stille epoken på 1920- og tidlig 30-tallet skapte typografien til en films tittelkort en stemning, satte scenen og minnet publikum om hvilken type film de hadde betalt for å se.
Tegneserie-tittelkort var også merkevarebygging, stemning og scenesetting, alt sammen i ett. I de første årene, da store studiobudsjetter var større, var disse tittelkortene ofte illustrative og malende.
Men da fjernsynet blomstret på 1950-tallet, falt budsjettene, og kort designet av kunstnere som Lawrence "Art" Goble tok i bruk et nytt visuelt språk, som ble mer grafisk, stilisert og mindre intrikat. Merk: Lawrence "Art" Goble er en av de ofte oversett heltene i amerikansk animasjon fra midten av århundret. Han jobbet først og fremst for Hanna-Barbera i løpet av de mest innflytelsesrike årene på 1950- og 1960-tallet. Goble var ikke en karakteranimator. Hans rolle var å skape atmosfære, så han designet miljøer for The Flintstones, Huckleberry Hound, Quick Draw McGraw og Yogi Bear, samt åpningstittelkortene som satte tonen. Tittelkortene hans, med malerier med en logo overlagt, bidro til å definere det ikoniske utseendet til Hanna-Barbera. Gobles kunstverk for karakterer som Quick Draw McGraw og Yogi Bear var effektivt på mindre TV-skjermer. I stedet for å gjengi et stillbilde fra tegneserien, fokuserte han på å presentere en enkelt, sterk idé - ofte i silhuett - som fanget dens essens. I «The Buzzin’ Bear» surrer Yogi forbi i et helikopter. Han spretter avgårde, med pic-a-nic-kurven i hånden, i «Bear on a Picnic», og for sin «Prize Fight Fright» setter Yogi inn tittelteksten.
Med liten eller ingen bevegelse å stole på, måtte Gobles enkeltbilder skape en stemning, sette scenen og beskrive en historie. De gjorde dette ved å bruke flate farger, grafiske former og typografi som ofte ble integrert i kunstverket.
Som designere som jobber på nettet, kan visningstitler lære oss mye om hvordan vi formidler en merkevares personlighet, gjør et førsteinntrykk og setter forventninger til noens opplevelse av å bruke et produkt eller en nettside. Vi kan lære av artistenes teknikker for å lage effektive bannere, landingssideoverskrifter og til og med gammeldagse splash-skjermer. Toon Tittel Typografi Tittelkort for tegneserier viser hvordan sammenslåing av type med bilder gir det slaget en header eller helt trenger. Med en håndfull tekstskygge-, tekststrek- og transformertriks lar moderne CSS deg utnytte den samme energien.
The Toon Text Title Generator Halvveis i å skrive denne artikkelen innså jeg at det ville være nyttig å ha et verktøy for å generere tekst som er stilt som tegneserietitlene jeg elsker så mye. Så jeg laget en. My Toon Text Title Generator lar deg eksperimentere med farger, streker og flere tekstskygger. Du kan justere malingsrekkefølgen, bruke bokstavavstand, forhåndsvise teksten i et utvalg av eksempelfonter og deretter kopiere den genererte CSS-en rett til utklippstavlen for å bruke i et prosjekt. Toon Tittel CSS Du kan ganske enkelt kopiere og lime inn CSS-en som Toon Text Title Generator gir deg. Men la oss se nærmere på hva det gjør. Tekstskygge Se på typen i denne tittelen fra Augie Doggies episode «Yuk-Yuk Duck», med sine blekgule bokstaver og mørke, harde, offset skygge som løfter den opp fra bakgrunnen og skaper en illusjon av dybde.
Du vet sikkert allerede at tekstskygge godtar fire verdier: (1) horisontale og (2) vertikale forskyvninger, (3) uskarphet og (4) en farge som kan være hel eller halvgjennomsiktig. Disse forskyvningsverdiene kan være positive eller negative, så jeg kan replikere "Yuk-Yuk Duck" ved å bruke en hard skygge trukket ned og til høyre: farge: #f7f76d; tekst-skygge: 5px 5px 0 #1e1904;
På den annen side har denne "Pint Giant"-tittelen en annen følelse med sin negative halvmyke skygge: farge: #c2a872; tekst-skygge: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
For å legge til ekstra dybde og skape mer interessante effekter, kan jeg legge flere skygger i lag. For «Let's Duck Out» kombinerer jeg fire skygger: den første en solid skygge med en negativ horisontal forskyvning for å løfte teksten fra bakgrunnen, etterfulgt av gradvis mykere skygger for å skape en uskarphet rundt den: farge: #6F4D80; tekst-skygge: -5 px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Skygge 4 */
Disse skyggene viser at bruk av tekstskygge ikke bare handler om å skape lyseffekter, da de også kan være dekorative og legge til personlighet. Tekst Stroke Mange tegneserietittelkort har bokstaver med en fet kontur som gjør at de skiller seg ut fra bakgrunnen. Jeg kan gjenskape denne effekten ved å bruke tekststrek. I lang tid var denne egenskapen bare tilgjengelig via et -webkit- prefiks, men det betyr også at den nå støttes på tvers av moderne nettlesere.
text-stroke er en forkortelse for to egenskaper. Den første, tekst-strøk-bredde, tegner en kontur rundt individuelle bokstaver, mens den andre, tekst-strøk-farge, kontrollerer fargen. For «Whatever Goes Pup» la jeg til en 4px blå strek til den gule teksten: farge: #eff0cd; -webkit-text-stroke: 4px #7890b5; tekststrek: 4px #7890b5;
Streker kan være spesielt nyttige når de er kombinert med skygger, så for «Growing, Growing, Gone» la jeg til et tynt 3px-strøk til en knapt uskarp 1px-skygge for å lage denne tredimensjonale teksteffekten: farge: #fbb999; tekst-skygge: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; tekststrek: 3px #984336;
Malingsbestilling Bruk av tekststrek gir ikke alltid det forventede resultatet, spesielt med tynnere bokstaver og tykkere streker, fordi nettleseren som standard tegner en strek over fyllet. Dessverre tillater CSS meg fortsatt ikke å justere slagplasseringen slik jeg ofte gjør i Sketch. Imidlertid har paint-order-egenskapen verdier som lar meg plassere streken bak, i stedet for foran, fyllingen.
paint-order: stroke maler streken først, deretter fillen, mens paint-order: fill gjør det motsatte: farge: #fbb999; paint-order: fylle; tekst-skygge: 3px 5px 1px #5160b1; tekst-strøk-farge:#984336; tekst-strek-bredde: 3px;
Et effektivt strøk holder bokstavene lesbare, legger til vekt og – kombinert med skygger og malingsrekkefølge – gir flat tekst reell tilstedeværelse. Bakgrunner inne i tekst Mange tegneserietittelkort går utover flate farger ved å legge til tekstur, gradienter eller illustrerte detaljer til bokstavene. Noen ganger er det en tekstur, andre ganger kan det være en gradient med en subtil toneforskyvning. På nettet kan jeg gjenskape denne effekten ved å bruke et bakgrunnsbilde eller gradient bak teksten, og deretter klippe den til formen på bokstavene. Dette er avhengig av at to egenskaper fungerer sammen: bakgrunnsklipp: tekst og tekstfyllfarge: gjennomsiktig.
Først legger jeg en bakgrunn bak teksten. Dette kan være et punktgrafikk- eller vektorbilde eller en CSS-gradient. For dette eksemplet fra Quick Draw McGraw-episoden «Baba Bait», inkluderer tittelteksten en subtil topp-bunn-gradient fra mørkt til lyst: bakgrunn: lineær-gradient(0deg, #667b6a, #1d271a);
Deretter klipper jeg den bakgrunnen til glyfene og gjør teksten gjennomsiktig slik at bakgrunnen vises: -webkit-bakgrunnsklipp: tekst; -webkit-tekst-fyll-farge: gjennomsiktig;
Med bare disse to linjene er ikke bakgrunnen lenger malt bak teksten; i stedet er den malt i den. Denne teknikken fungerer spesielt godt når den kombineres med slag og skygger. En klippet gradient gir bokstaven farge og tekstur, et strøk holder kantene skarpe, og en skygge løfter den opp fra bakgrunnen. Sammen gjenskaper de det lagdelte utseendet til håndmalte tittelkort ved å bruke noe mer enn litt CSS. Som alltid, test klippet tekst nøye, siden nettleserinnfall noen ganger kan påvirke skygger og gjengivelse. Dele opp tekst i individuelle tegn Noen ganger vil jeg ikke style et helt ord eller overskrift. Jeg ønsker å style individuelle bokstaver – for å dytte en karakter på plass, gi én glyph ekstra vekt eller animere noen bokstaver uavhengig. I vanlig HTML og CSS er det bare én pålitelig måte å gjøre det på: pakk hvert tegn inn i sitt eget span-element. Jeg kunne gjøre det manuelt, men det ville være skjørt, vanskelig å vedlikeholde og ville raskt falle fra hverandre når kopien endres. I stedet, når jeg trenger kontroll per bokstav, bruker jeg et tekstdelingsbibliotek som splt.js (selv om andre løsninger er tilgjengelige). Dette tar en tekstnode og pakker automatisk inn ord eller tegn, og gir meg ekstra kroker for å animere og stil uten å rote til oppskriften min. Det er en tilnærming som holder HTML-koden min lesbar og semantisk, samtidig som den gir meg den finkornede kontrollen jeg trenger for å gjenskape den ujevne, karakterfulle typografien du ser i klassiske tegneserietittelkort. Imidlertid følger denne tilnærmingen medadvarsler om tilgjengelighet, ettersom de fleste skjermlesere leser tekstnoder i rekkefølge. Så dette:
Hum Sweet Hum
…leser som du forventer: Hum Søt Hum
Men dette:
H u m
…kan tolkes forskjellig avhengig av nettleser og skjermleser. Noen vil sette sammen bokstavene og lese ordene riktig. Andre kan pause mellom bokstavene, som i verste fall kan høres ut som: "H..." "U..." "M..."
Dessverre gir noen splittingsløsninger ikke et alltid tilgjengelig resultat, så jeg har skrevet min egen tekstsplitter, splinter.js, som for øyeblikket er i beta. Transformere individuelle bokstaver For å aktivere Toon Text Splitter legger jeg til et dataattributt til elementet jeg vil dele:
Hum Sweet Hum
Først deler skriptet mitt hvert ord i individuelle bokstaver og pakker dem inn i et span-element med klasse- og ARIA-attributter brukt:
Skriptet tar deretter det innledende innholdet i det delte elementet og legger det til som et aria-attributt for å opprettholde tilgjengeligheten:
Med disse klasseattributtene brukt, kan jeg deretter style individuelle tegn etter eget valg.
For eksempel, for "Hum Sweet Hum," vil jeg gjenskape hvordan bokstavene forskyves bort fra grunnlinjen. Etter å ha brukt Toon Text Splitter, brukte jeg fire forskjellige oversettelsesverdier ved å bruke flere :nth-child velgere for å lage et semi-tilfeldig utseende: /* 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; }
Men translate er bare én egenskap jeg kan bruke til å forvandle teksten min.
Jeg kunne også rotere de individuelle karakterene for et enda mer kaotisk utseende: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotere: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotere: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { rotere: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { rotere: 8deg; }
Men translate er bare én egenskap jeg kan bruke til å forvandle teksten min. Jeg kunne også rotere de individuelle karakterene for et enda mer kaotisk utseende: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { roter: -4 grader; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { roter: -8 grader; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { roter: 4 grader; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { roter: 8 grader; }
Og selvfølgelig kunne jeg legge til animasjoner for å rokke ved disse karakterene og gi liv til tekststiltitlene mine. Først laget jeg en keyframe-animasjon som roterer karakterene:
@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)); } }
Før du bruker det på span-elementene laget av Toon Text Splitter: .toon-char { animasjon: jiggle 3s uendelig letthet-inn-ut; transform-opprinnelse: senter bunn; }
Og til slutt, angi rotasjonsmengden og en forsinkelse før hver karakter begynner å jiggle: .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) { animasjonsforsinkelse: 0,1s; } .toon-char:nth-child(4n+1) { animasjonsforsinkelse: 0,3s; } .toon-char:nth-child(4n+2) { animasjonsforsinkelse: 0,5s; } .toon-char:nth-child(4n+3) { animasjonsforsinkelse: 0,7s; }
Én ramme for å gjøre inntrykk Tegneserietittelkunstnere hadde én ramme for å gjøre inntrykk, og typografien deres var like viktig som kunstverket de malte. Det samme gjelder på nettet. En godt designet header eller heltområdet trenger klarhet, karakter og selvtillit – ikke bare et falmet bakgrunnsbilde i full bredde. Med noen få nøye utvalgte CSS-egenskaper – skygger, streker, klippede bakgrunner og litt behersket animasjon – kan vi gjenskape den samme effekten. Jeg elsker tekst for tekst, ikke fordi jeg er nostalgisk, men fordi utformingen er tilsiktet. Gjør bevisste valg, og la en liten teksttypografi i illustrasjonen sette punch til designene dine.
