Efter at have afsluttet et projekt, der krævede, at jeg lærte alt, hvad jeg kunne om CSS- og SVG-animationer, begyndte jeg at skrive denne serie om Smashing Animations og "How Classic Cartoons Inspire Modern CSS." Som afslutning på dette år vil jeg vise dig, hvordan du bruger moderne CSS til at skabe det element, der gør Toon Titles så virkningsfuldt: deres typografi. Titel Artwork Design I den stille æra i 1920'erne og begyndelsen af 30'erne skabte typografien af en films titelkort en stemning, satte scenen og mindede et publikum om den type film, de havde betalt for at se.
Tegnefilms titelkort var også branding, stemning og scene-indstilling, alt sammen samlet. I de første år, hvor store studiebudgetter var større, var disse titelkort ofte illustrative og malende.
Men da fjernsynet boomede i løbet af 1950'erne, faldt budgetterne, og kort designet af kunstnere som Lawrence "Art" Goble antog et nyt visuelt sprog, der blev mere grafisk, stiliseret og mindre indviklet. Bemærk: Lawrence "Art" Goble er en af de ofte oversete helte i amerikansk animation fra midten af århundredet. Han arbejdede primært for Hanna-Barbera i de mest indflydelsesrige år i 1950'erne og 1960'erne. Goble var ikke en karakteranimator. Hans rolle var at skabe atmosfære, så han designede miljøer til The Flintstones, Huckleberry Hound, Quick Draw McGraw og Yogi Bear, samt de indledende titelkort, der satte tonen. Hans titelkort, med malerier med et logo overlejret, var med til at definere Hanna-Barberas ikoniske udseende. Gobles kunstværk for karakterer som Quick Draw McGraw og Yogi Bear var effektivt på mindre tv-skærme. I stedet for at gengive et stillbillede fra tegneserien fokuserede han på at præsentere en enkelt, stærk idé - ofte i silhuet - der fangede dens essens. I "The Buzzin' Bear" summer Yogi forbi i en helikopter. Han hopper væk, med pic-a-nic-kurven i hånden, i "Bear on a Picnic", og for hans "Prize Fight Fright" sætter Yogi titelteksten i boks.
Med lidt eller ingen bevægelse at stole på, skulle Gobles enkelte frames skabe en stemning, sætte scenen og beskrive en historie. De gjorde dette ved hjælp af flade farver, grafiske former og typografi, der ofte blev integreret i kunstværket.
Som designere, der arbejder på nettet, kan toon-titler lære os meget om, hvordan man formidler et brands personlighed, gør et første indtryk og sætter forventninger til en persons oplevelse med at bruge et produkt eller en hjemmeside. Vi kan lære af kunstnernes teknikker til at skabe effektive bannere, landingssideoverskrifter og endda gode gammeldags splash-skærme. Toon Titel Typografi Tegneserie-titelkort viser, hvordan sammensmeltning af type med billeder giver det slag, en header eller helt har brug for. Med en håndfuld tekst-skygge, tekststreger og transformationstricks giver moderne CSS dig mulighed for at udnytte den samme energi.
The Toon Text Title Generator Midtvejs i at skrive denne artikel indså jeg, at det ville være nyttigt at have et værktøj til at generere tekst, der er stilet som de tegneserietitler, jeg elsker så højt. Så jeg lavede en. My Toon Text Title Generator lader dig eksperimentere med farver, streger og flere tekstskygger. Du kan justere malingsrækkefølgen, anvende bogstavmellemrum, forhåndsvise din tekst i et udvalg af eksempelskrifttyper og derefter kopiere den genererede CSS direkte til dit udklipsholder for at bruge i et projekt. Toon Titel CSS Du kan blot kopiere og indsætte den CSS, som Toon Text Title Generator giver dig. Men lad os se nærmere på, hvad det gør. Tekstskygge Se på typen i denne titel fra Augie Doggies episode "Yuk-Yuk Duck", med dens lysegule bogstaver og mørke, hårde, forskudte skygge, der løfter den væk fra baggrunden og skaber en illusion af dybde.
Du ved sikkert allerede, at tekst-skygge accepterer fire værdier: (1) vandrette og (2) lodrette forskydninger, (3) sløring og (4) en farve, der kan være ensfarvet eller semi-transparent. Disse forskydningsværdier kan være positive eller negative, så jeg kan replikere "Yuk-Yuk Duck" ved at bruge en hård skygge trukket ned og til højre: farve: #f7f76d; tekst-skygge: 5px 5px 0 #1e1904;
På den anden side har denne "Pint Giant"-titel en anden følelse med sin negative halvbløde skygge: farve: #c2a872; tekst-skygge: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
For at tilføje ekstra dybde og skabe mere interessante effekter kan jeg lag flere skygger. Til "Let's Duck Out" kombinerer jeg fire skygger: den første en solid skygge med en negativ vandret offset for at løfte teksten væk fra baggrunden, efterfulgt af gradvist blødere skygger for at skabe en sløring omkring den: farve: #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 skygger viser, at brug af tekst-skygge ikke kun handler om at skabe lyseffekter, da de også kan være dekorative og tilføje personlighed. Tekst streg Mange tegneserietitelkort har bogstaver med en fed kontur, der får dem til at skille sig ud fra baggrunden. Jeg kan genskabe denne effekt ved at bruge tekststrøg. I lang tid var denne egenskab kun tilgængelig via et -webkit- præfiks, men det betyder også, at den nu understøttes på tværs af moderne browsere.
text-stroke er en stenografi for to egenskaber. Den første, tekst-streg-bredde, tegner en kontur rundt om individuelle bogstaver, mens den anden, tekst-streg-color, styrer dens farve. Til "Whatever Goes Pup" tilføjede jeg en 4px blå streg til den gule tekst: farve: #eff0cd; -webkit-text-stroke: 4px #7890b5; tekst-slag: 4px #7890b5;
Strøg kan være særligt nyttige, når de kombineres med skygger, så for "Growing, Growing, Gone" tilføjede jeg en tynd 3px streg til en knapt sløret 1px skygge for at skabe denne tredimensionelle teksteffekt: farve: #fbb999; tekst-skygge: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; tekst-slag: 3px #984336;
Bestilling af maling Brug af tekststrøg giver ikke altid det forventede resultat, især med tyndere bogstaver og tykkere streger, fordi browseren som standard trækker en streg over fyldningen. Desværre tillader CSS mig stadig ikke at justere slagtilfælde, som jeg ofte gør i Sketch. Egenskaben paint-order har dog værdier, der giver mig mulighed for at placere stregen bag, i stedet for foran, fyldningen.
paint-order: streg maler stregen først, derefter fyldningen, hvorimod paint-order: fill gør det modsatte: farve: #fbb999; paint-order: fyld; tekst-skygge: 3px 5px 1px #5160b1; tekst-streg-farve:#984336; tekst-streg-bredde: 3px;
En effektiv streg holder bogstaver læsbare, tilføjer vægt og - når det kombineres med skygger og malerækkefølge - giver flad tekst en reel tilstedeværelse. Baggrunde inde i tekst Mange tegneserietitelkort går ud over flad farve ved at tilføje tekstur, gradienter eller illustrerede detaljer til bogstaverne. Nogle gange er det en tekstur, andre gange kan det være en gradient med et subtilt toneskift. På nettet kan jeg genskabe denne effekt ved at bruge et baggrundsbillede eller gradient bag teksten og derefter klippe den til formen på bogstaverne. Dette afhænger af to egenskaber, der arbejder sammen: baggrundsklip: tekst og tekstfyld-farve: gennemsigtig.
Først lægger jeg en baggrund bag teksten. Dette kan være et bitmap- eller vektorbillede eller en CSS-gradient. For dette eksempel fra Quick Draw McGraw-episoden "Baba Bait" inkluderer titelteksten en subtil top-bund gradient fra mørk til lys: baggrund: lineær-gradient(0deg, #667b6a, #1d271a);
Dernæst klipper jeg den baggrund til glyfferne og gør teksten gennemsigtig, så baggrunden viser sig: -webkit-baggrundsklip: tekst; -webkit-tekst-fyld-farve: gennemsigtig;
Med blot de to linjer er baggrunden ikke længere malet bag teksten; i stedet er det malet inde i det. Denne teknik fungerer især godt, når den kombineres med streger og skygger. En afklippet gradient giver bogstavet farve og tekstur, et streg holder dets kanter skarpe, og en skygge løfter det fra baggrunden. Sammen genskaber de det lagdelte udseende af håndmalede titelkort ved hjælp af intet andet end lidt CSS. Som altid, test klippet tekst omhyggeligt, da browserquirks nogle gange kan påvirke skygger og gengivelse. Opdeling af tekst i individuelle tegn Nogle gange vil jeg ikke style et helt ord eller en overskrift. Jeg vil style individuelle bogstaver - for at skubbe en karakter på plads, give en glyf ekstra vægt eller animere et par bogstaver uafhængigt. I almindelig HTML og CSS er der kun én pålidelig måde at gøre det på: indpak hvert tegn i sit eget span-element. Jeg kunne gøre det manuelt, men det ville være skrøbeligt, svært at vedligeholde og ville hurtigt falde fra hinanden, når kopien ændres. I stedet, når jeg har brug for kontrol pr. bogstav, bruger jeg et tekstopdelingsbibliotek som splt.js (selvom andre løsninger er tilgængelige). Dette tager en tekstknude og ombryder automatisk ord eller tegn, hvilket giver mig ekstra hooks til at animere og style uden at ødelægge min markering. Det er en tilgang, der holder min HTML læsbar og semantisk, samtidig med at den giver mig den finkornede kontrol, jeg har brug for, for at genskabe den ujævne, karakterfulde typografi, du ser i klassiske tegneserietitelkort. Denne tilgang kommer dog medforbehold om tilgængelighed, da de fleste skærmlæsere læser tekstnoder i rækkefølge. Så dette:
Hum Sweet Hum
...læser som du forventer: Hum Sød Hum
Men dette:
H u m
…kan fortolkes forskelligt afhængigt af browser og skærmlæser. Nogle vil sammenkæde bogstaverne og læse ordene korrekt. Andre kan holde pause mellem bogstaverne, hvilket i værste fald kan lyde som: "H..." "U..." "M..."
Desværre leverer nogle opdelingsløsninger ikke et altid tilgængeligt resultat, så jeg har skrevet min egen tekstsplitter, splinter.js, som i øjeblikket er i beta. Forvandling af individuelle bogstaver For at aktivere min Toon Text Splitter tilføjer jeg en data-attribut til det element, jeg vil opdele:
Hum Sweet Hum
For det første adskiller mit script hvert ord i individuelle bogstaver og pakker dem ind i et span-element med klasse- og ARIA-attributter anvendt:
Scriptet tager derefter det indledende indhold af det opdelte element og tilføjer det som en aria-attribut for at hjælpe med at bevare tilgængeligheden:
Med disse klasseattributter anvendt, kan jeg derefter style individuelle tegn, som jeg vælger.
For eksempel vil jeg for "Hum Sweet Hum" gentage, hvordan bogstaverne flytter sig væk fra grundlinjen. Efter at have brugt min Toon Text Splitter anvendte jeg fire forskellige oversættelsesværdier ved hjælp af flere :nth-child-vælgere for at skabe et semi-tilfældigt udseende: /* 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 kun én egenskab, jeg kan bruge til at transformere min toontekst.
Jeg kunne også rotere disse individuelle karakterer for et endnu mere kaotisk udseende: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotere: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { rotere: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
Men translate er kun én egenskab, jeg kan bruge til at transformere min toontekst. Jeg kunne også rotere disse individuelle karakterer for et endnu mere kaotisk udseende: /* 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) { drej: 4 grader; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { drej: 8 grader; }
Og selvfølgelig kunne jeg tilføje animationer for at rokke ved disse karakterer og bringe mine titler i toon-tekststil til live. Først lavede jeg en keyframe-animation, der roterer karaktererne:
@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 anvender det på span-elementerne, der er oprettet af min Toon Text Splitter: .toon-char { animation: jiggle 3s uendelig lethed-in-out; transform-oprindelse: midterste bund; }
Og endelig, indstil rotationsmængden og en forsinkelse, før hver karakter begynder at 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) { animation-delay: 0,1s; } .toon-char:nth-child(4n+1) { animation-delay: 0,3s; } .toon-char:nth-child(4n+2) { animationsforsinkelse: 0,5s; } .toon-char:nth-child(4n+3) { animation-delay: 0,7s; }
Én ramme til at gøre indtryk Tegneserietitelkunstnere havde én ramme til at gøre indtryk, og deres typografi var lige så vigtig som det kunstværk, de malede. Det samme er tilfældet på nettet. En veldesignet header eller heltområde har brug for klarhed, karakter og selvtillid - ikke blot et falmet baggrundsbillede i fuld bredde. Med et par omhyggeligt udvalgte CSS-egenskaber - skygger, streger, klippede baggrunde og nogle beherskede animationer - kan vi genskabe den samme effekt. Jeg elsker tonetekst, ikke fordi jeg er nostalgisk, men fordi dens design er bevidst. Foretag bevidste valg, og lad en lille toneteksttypografi tilføje punch til dine designs.
