Efter att ha avslutat ett projekt som krävde att jag lärde mig allt jag kunde om CSS- och SVG-animationer, började jag skriva den här serien om Smashing Animations och "How Classic Cartoons Inspire Modern CSS." Som avslutning på detta år vill jag visa dig hur du använder modern CSS för att skapa det elementet som gör Toon Titles så effektfullt: deras typografi. Titel Konstverk Design Under den tysta eran på 1920-talet och början av 30-talet skapade typografin av en films titelkort en stämning, satte scenen och påminde en publik om vilken typ av film de hade betalat för att se.
Tecknade titelkort var också varumärkesbyggande, humör och sceninställning, allt i ett. Under de första åren, när stora studiobudgetar var större, var dessa titelkort ofta illustrativa och målande.
Men när tv blomstrade under 1950-talet sjönk budgetarna och kort designade av konstnärer som Lawrence "Art" Goble antog ett nytt visuellt språk som blev mer grafiskt, stiliserat och mindre invecklat. Notera: Lawrence "Art" Goble är en av de ofta förbisedda hjältarna i amerikansk animation från mitten av århundradet. Han arbetade främst för Hanna-Barbera under dess mest inflytelserika år på 1950- och 1960-talen. Goble var ingen karaktärsanimatör. Hans roll var att skapa atmosfär, så han designade miljöer för The Flintstones, Huckleberry Hound, Quick Draw McGraw och Yogi Bear, samt de inledande titelkorten som satte tonen. Hans titelkort, med målningar med en logotyp överlagd, hjälpte till att definiera Hanna-Barberas ikoniska utseende. Gobles konstverk för karaktärer som Quick Draw McGraw och Yogi Bear var effektivt på mindre TV-skärmar. Istället för att återge en stillbild från den tecknade filmen fokuserade han på att presentera en enda, stark idé - ofta i siluett - som fångade dess essens. I "The Buzzin' Bear" surrar Yogi förbi i en helikopter. Han studsar iväg, med en pic-a-nic-korg i handen, i "Bear on a Picnic", och för sin "Prize Fight Fright" rutar Yogi titeltexten.
Med liten eller ingen rörelse att lita på, var Gobles enstaka ramar tvungna att skapa en stämning, sätta scenen och beskriva en berättelse. De gjorde detta med hjälp av platta färger, grafiska former och typografi som ofta integrerades i konstverket.
Som designers som arbetar på webben kan ton-titlar lära oss mycket om hur man förmedlar ett varumärkes personlighet, gör ett första intryck och ställer förväntningar på någons upplevelse av att använda en produkt eller webbplats. Vi kan lära oss av artisternas tekniker för att skapa effektiva banners, målsidesrubriker och till och med gammaldags startskärmar. Toon Titel Typografi Tecknade titelkort visar hur sammanslagning av typ med bilder ger den kraft som en header eller hjälte behöver. Med en handfull text-skugga, text-stroke och transform tricks låter modern CSS dig utnyttja samma energi.
The Toon Text Title Generator När jag skrev den här artikeln insåg jag att det skulle vara användbart att ha ett verktyg för att skapa text som är utformad som de tecknade titlarna jag älskar så mycket. Så jag gjorde en. My Toon Text Title Generator låter dig experimentera med färger, streck och flera textskuggor. Du kan justera färgordningen, använda bokstavsmellanrum, förhandsgranska din text i ett urval av exempeltypsnitt och sedan kopiera den genererade CSS direkt till ditt urklipp för att använda i ett projekt. Toon Titel CSS Du kan helt enkelt kopiera och klistra in CSS som Toon Text Title Generator ger dig. Men låt oss titta närmare på vad det gör. Text skugga Titta på typen i den här titeln från Augie Doggies avsnitt "Yuk-Yuk Duck", med sina blekgula bokstäver och mörka, hårda, förskjutna skugga som lyfter den från bakgrunden och skapar en illusion av djup.
Du vet förmodligen redan att text-shadow accepterar fyra värden: (1) horisontella och (2) vertikala förskjutningar, (3) oskärpa och (4) en färg som kan vara solid eller halvtransparent. Dessa offsetvärden kan vara positiva eller negativa, så jag kan replikera "Yuk-Yuk Duck" med en hård skugga som dras nedåt och till höger: färg: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Å andra sidan har denna "Pint Giant"-titel en annan känsla med sin negativa halvmjuka skugga: färg: #c2a872; text-skugga: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
För att lägga till extra djup och skapa mer intressanta effekter kan jag lagra flera skuggor. För "Let's Duck Out" kombinerar jag fyra skuggor: den första en solid skugga med en negativ horisontell förskjutning för att lyfta texten från bakgrunden, följt av progressivt mjukare skuggor för att skapa en oskärpa runt den: färg: #6F4D80; text-skugga: -5 pixlar5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Dessa skuggor visar att användning av text-skugga inte bara handlar om att skapa ljuseffekter, eftersom de också kan vara dekorativa och lägga till personlighet. Text Stroke Många tecknade titelkort har bokstäver med en fet kontur som gör att de sticker ut från bakgrunden. Jag kan återskapa denna effekt med text-stroke. Under lång tid var den här egenskapen endast tillgänglig via ett -webkit- prefix, men det betyder också att den nu stöds i moderna webbläsare.
text-stroke är en förkortning för två egenskaper. Den första, text-stretch-width, ritar en kontur runt enskilda bokstäver, medan den andra, text-stroke-color, styr dess färg. För "Whatever Goes Pup" la jag till en 4px blå linje till den gula texten: färg: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Stroke kan vara särskilt användbara när de kombineras med skuggor, så för "Growing, Growing, Gone" la jag till en tunn 3px-linje till en knappt suddig 1px-skugga för att skapa denna tredimensionella texteffekt: färg: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Beställning av färg Att använda textlinje ger inte alltid det förväntade resultatet, särskilt med tunnare bokstäver och tjockare streck, eftersom webbläsaren som standard ritar en linje över fyllningen. Tyvärr tillåter CSS mig fortfarande inte att justera strokeplaceringen som jag ofta gör i Sketch. Egenskapen paint-order har dock värden som gör att jag kan placera strecket bakom, snarare än framför, fyllningen.
paint-order: stroke målar strecket först, sedan fyllningen, medan paint-order: fill gör motsatsen: färg: #fbb999; paint-order: fylla; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Ett effektivt streck håller bokstäver läsbara, ger tyngd och – i kombination med skuggor och färgordning – ger platt text verklig närvaro. Bakgrunder Inuti Text Många tecknade titelkort går utöver platt färg genom att lägga till textur, övertoningar eller illustrerade detaljer till bokstäverna. Ibland är det en textur, andra gånger kan det vara en gradient med en subtil tonal förändring. På webben kan jag återskapa den här effekten genom att använda en bakgrundsbild eller gradient bakom texten och sedan klippa den till formen på bokstäverna. Detta förlitar sig på att två egenskaper fungerar tillsammans: bakgrundsklipp: text och textfyllningsfärg: transparent.
Först lägger jag en bakgrund bakom texten. Detta kan vara en bitmapp eller vektorbild eller en CSS-gradient. För det här exemplet från Quick Draw McGraw-avsnittet "Baba Bait" innehåller titeltexten en subtil över- och bottengradient från mörkt till ljust: bakgrund: linear-gradient(0deg, #667b6a, #1d271a);
Därefter klipper jag den bakgrunden till glyferna och gör texten transparent så att bakgrunden syns: -webkit-bakgrundsklipp: text; -webkit-text-fill-color: transparent;
Med bara de två raderna är bakgrunden inte längre målad bakom texten; istället är det målat inuti det. Denna teknik fungerar särskilt bra i kombination med slag och skuggor. En avklippt gradient ger bokstäverna färg och struktur, ett streck håller dess kanter skarpa och en skugga lyfter den från bakgrunden. Tillsammans återskapar de det skiktade utseendet av handmålade titelkort med bara lite CSS. Testa som alltid klippt text noggrant, eftersom webbläsarens egenheter ibland kan påverka skuggor och rendering. Dela upp text i enskilda tecken Ibland vill jag inte styla ett helt ord eller rubrik. Jag vill styla enskilda bokstäver – för att knuffa en karaktär på plats, ge en glyf extra vikt eller animera några bokstäver oberoende av varandra. I vanlig HTML och CSS finns det bara ett tillförlitligt sätt att göra det: linda in varje tecken i sitt eget span-element. Jag skulle kunna göra det manuellt, men det skulle vara ömtåligt, svårt att underhålla och skulle snabbt falla isär när kopian ändras. När jag behöver kontroll per bokstav använder jag istället ett textdelningsbibliotek som splt.js (även om andra lösningar finns tillgängliga). Detta tar en textnod och lindar automatiskt ord eller tecken, vilket ger mig extra krokar för att animera och stil utan att förstöra min uppmärkning. Det är ett tillvägagångssätt som håller min HTML läsbar och semantisk, samtidigt som den ger mig den finkorniga kontrollen jag behöver för att återskapa den ojämna, karaktärsfulla typografin du ser i klassiska tecknade titelkort. Detta tillvägagångssätt kommer dock medtillgänglighetsförbehåll, eftersom de flesta skärmläsare läser textnoder i ordning. Så detta:
Hum Sweet Hum
… läser som du förväntar dig: Hum Sweet Hum
Men detta:
H u m
…kan tolkas olika beroende på webbläsare och skärmläsare. Vissa kommer att sammanfoga bokstäverna och läsa orden korrekt. Andra kan pausa mellan bokstäverna, vilket i värsta fall kan låta som: "H..." "U..." "M..."
Tyvärr ger vissa uppdelningslösningar inte ett alltid tillgängligt resultat, så jag har skrivit min egen textdelare, splinter.js, som för närvarande är i beta. Förvandla enskilda bokstäver För att aktivera min Toon Text Splitter lägger jag till ett dataattribut till elementet jag vill dela:
Hum Sweet Hum
Först delar mitt skript upp varje ord i enskilda bokstäver och lindar in dem i ett span-element med klass- och ARIA-attribut tillämpade:
Skriptet tar sedan det initiala innehållet i det delade elementet och lägger till det som ett aria-attribut för att bibehålla tillgängligheten:
Med dessa klassattribut tillämpade kan jag sedan utforma individuella tecken som jag väljer.
Till exempel, för "Hum Sweet Hum", vill jag replikera hur bokstäverna flyttas bort från baslinjen. Efter att ha använt min Toon Text Splitter använde jag fyra olika översättningsvärden med hjälp av flera :nth-child väljare för att skapa ett halvslumpmässigt utseende: /* 4:e, 8:e, 12:e... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1:a, 5:e, 9:e... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* 2:a, 6:e, 10:e... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3:e, 7:e, 11:e... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Men translate är bara en egenskap som jag kan använda för att omvandla min bildtext.
Jag skulle också kunna rotera de enskilda karaktärerna för en ännu mer kaotisk look: /* 4:e, 8:e, 12:e... */ .toon-line .toon-char:nth-child(4n) { rotera: -4deg; } /* 1:a, 5:e, 9:e... */ .toon-char:nth-child(4n+1) { rotera: -8deg; } /* 2:a, 6:e, 10:e... */ .toon-char:nth-child(4n+2) { rotera: 4deg; } /* 3:e, 7:e, 11:e... */ .toon-char:nth-child(4n+3) { rotera: 8deg; }
Men translate är bara en egenskap som jag kan använda för att omvandla min bildtext. Jag skulle också kunna rotera de enskilda karaktärerna för en ännu mer kaotisk look: /* 4:e, 8:e, 12:e... */ .toon-line .toon-char:nth-child(4n) { rotera: -4 grader; }
/* 1:a, 5:e, 9:e... */ .toon-char:nth-child(4n+1) { rotera: -8 grader; }
/* 2:a, 6:e, 10:e... */ .toon-char:nth-child(4n+2) { rotera: 4 grader; }
/* 3:e, 7:e, 11:e... */ .toon-char:nth-child(4n+3) { rotera: 8 grader; }
Och, naturligtvis, jag kunde lägga till animationer för att skaffa dessa karaktärer och väcka liv i mina tontexttitlar. Först skapade jag en keyframe-animation som roterar karaktärerna:
@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)); } }
Innan du applicerar det på span-elementen skapade av min Toon Text Splitter: .toon-char { animation: jiggle 3s oändlig lätthet-in-ut; transform-origin: center botten; }
Och slutligen, ställ in rotationsmängden och en fördröjning innan varje karaktär börjar skaka: .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) { animationsfördröjning: 0,1s; } .toon-char:nth-child(4n+1) { animationsfördröjning: 0,3s; } .toon-char:nth-child(4n+2) { animationsfördröjning: 0,5s; } .toon-char:nth-child(4n+3) { animationsfördröjning: 0,7s; }
En ram för att göra ett intryck Tecknade titelkonstnärer hade en ram för att göra intryck, och deras typografi var lika viktig som konstverket de målade. Detsamma gäller på webben. En väldesignad header eller hjälteområdet behöver klarhet, karaktär och självförtroende - inte bara en blek bakgrundsbild i full bredd. Med några noggrant utvalda CSS-egenskaper – skuggor, streck, klippta bakgrunder och lite återhållen animering – kan vi återskapa samma effekt. Jag älskar tontext inte för att jag är nostalgisk, utan för att dess design är avsiktlig. Gör medvetna val och låt lite låttexttypografi sätta kraft till dina mönster.
