Nadat ik een project had afgerond waarbij ik alles moest leren over CSS- en SVG-animaties, begon ik deze serie te schrijven over Smashing Animations en 'Hoe klassieke tekenfilms moderne CSS inspireren'. Om dit jaar af te ronden wil ik je laten zien hoe je moderne CSS kunt gebruiken om dat element te creëren dat Toon Titles zo impactvol maakt: hun typografie. Titel kunstwerkontwerp In het stille tijdperk van de jaren twintig en het begin van de jaren dertig creëerde de typografie van de titelkaart van een film sfeer, zette het de toon en herinnerde het publiek aan het soort film waarvoor ze hadden betaald.
Cartoontitelkaarten waren ook branding, sfeer en scène-setting, allemaal in één. In de beginjaren, toen de grote studiobudgetten groter waren, waren deze titelkaarten vaak illustratief en schilderachtig.
Maar toen de televisie in de jaren vijftig een hoge vlucht nam, daalden de budgetten en namen kaarten ontworpen door kunstenaars als Lawrence ‘Art’ Goble een nieuwe beeldtaal aan, die grafischer, gestileerder en minder ingewikkeld werd. Opmerking: Lawrence “Art” Goble is een van de vaak over het hoofd geziene helden van de Amerikaanse animatiefilm uit het midden van de eeuw. Hij werkte voornamelijk voor Hanna-Barbera tijdens de meest invloedrijke jaren, de jaren vijftig en zestig. Goble was geen karakteranimator. Het was zijn rol om sfeer te creëren, dus ontwierp hij omgevingen voor The Flintstones, Huckleberry Hound, Quick Draw McGraw en Yogi Bear, evenals de openingstitelkaarten die de toon zetten. Zijn titelkaarten, met schilderijen met daarop een logo, hielpen bij het definiëren van de iconische look van Hanna-Barbera. Goble's artwork voor personages als Quick Draw McGraw en Yogi Bear was effectief op kleinere tv-schermen. In plaats van een still uit de tekenfilm te reproduceren, concentreerde hij zich op het presenteren van één sterk idee – vaak in silhouet – dat de essentie ervan weergaf. In ‘The Buzzin’ Bear’ zoemt Yogi voorbij in een helikopter. Hij stuitert weg, met een picknickmand in de hand, in 'Bear on a Picnic', en voor zijn 'Prize Fight Fright' zet Yogi de titeltekst in een vakje.
Omdat er weinig of geen beweging was om op te vertrouwen, moesten de afzonderlijke frames van Goble een sfeer creëren, de scène bepalen en een verhaal beschrijven. Dit deden ze met behulp van vlakke kleuren, grafische vormen en typografie die veelvuldig in het kunstwerk werd geïntegreerd.
Als ontwerpers die op internet werken, kunnen toontitels ons veel leren over hoe we de persoonlijkheid van een merk kunnen overbrengen, een eerste indruk kunnen maken en verwachtingen kunnen wekken voor iemands ervaring met het gebruik van een product of website. We kunnen leren van de technieken van de artiesten om effectieve banners, headers voor landingspagina’s en zelfs ouderwetse splashscreens te maken. Toon Titel Typografie Cartoontitelkaarten laten zien hoe het samenvoegen van tekst en beeldmateriaal de punch oplevert die een koptekst of held nodig heeft. Met een handvol tekstschaduw-, tekstlijn- en transformatietrucs kun je met moderne CSS dezelfde energie aanboren.
De Toon-teksttitelgenerator Halverwege het schrijven van dit artikel besefte ik dat het handig zou zijn om een tool te hebben waarmee je tekst kunt genereren in de stijl van de cartoontitels waar ik zo dol op ben. Dus ik heb er een gemaakt. Met Mijn Toon Text Title Generator kun je experimenteren met kleuren, lijnen en meerdere tekstschaduwen. U kunt de verfvolgorde aanpassen, de letterafstand toepassen, een voorbeeld van uw tekst bekijken in een selectie van voorbeeldlettertypen en vervolgens de gegenereerde CSS rechtstreeks naar uw klembord kopiëren om in een project te gebruiken. Toon Titel CSS U kunt eenvoudig de CSS kopiëren en plakken die de Toon Text Title Generator u biedt. Maar laten we eens nader bekijken wat het doet. Tekst schaduw Kijk naar het type in deze titel uit Augie Doggie's aflevering "Yuk-Yuk Duck", met zijn lichtgele letters en donkere, harde, verschoven schaduw die het van de achtergrond tilt en de illusie van diepte creëert.
U weet waarschijnlijk al dat tekstschaduw vier waarden accepteert: (1) horizontale en (2) verticale verschuivingen, (3) vervaging en (4) een kleur die effen of semi-transparant kan zijn. Die offsetwaarden kunnen positief of negatief zijn, dus ik kan “Yuk-Yuk Duck” repliceren met een harde schaduw naar beneden en naar rechts getrokken: kleur: #f7f76d; tekstschaduw: 5px 5px 0 #1e1904;
Aan de andere kant heeft deze “Pint Giant” -titel een ander gevoel met zijn negatieve halfzachte schaduw: kleur: #c2a872; tekst-schaduw: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Om extra diepte toe te voegen en interessantere effecten te creëren, kan ik meerdere schaduwen in lagen aanbrengen. Voor ‘Let’s Duck Out’ combineer ik vier schaduwen: de eerste een effen schaduw met een negatieve horizontale verschuiving om de tekst van de achtergrond te tillen, gevolgd door steeds zachtere schaduwen om er een waas omheen te creëren: kleur: #6F4D80; tekst-schaduw: -5px5px 0 #260e1e, /* Schaduw 1 */ 0 0 15px #e9ce96, /* Schaduw 2 */ 0 0 30px #e9ce96, /* Schaduw 3 */ 0 0 30px #e9ce96; /* Schaduw 4 */
Deze schaduwen laten zien dat het gebruik van tekstschaduw niet alleen gaat over het creëren van lichteffecten, maar ook decoratief kan zijn en persoonlijkheid kan toevoegen. Tekst beroerte Veel cartoontitelkaarten bevatten letters met een opvallende omtrek waardoor ze opvallen tegen de achtergrond. Ik kan dit effect opnieuw creëren met tekststreek. Lange tijd was deze eigenschap alleen beschikbaar via het voorvoegsel -webkit-, maar dat betekent ook dat deze nu in moderne browsers wordt ondersteund.
text-stroke is een afkorting voor twee eigenschappen. De eerste, tekststreekbreedte, tekent een contour rond individuele letters, terwijl de tweede, tekststreekkleur, de kleur bepaalt. Voor 'Whatever Goes Pup' heb ik een blauwe lijn van 4px aan de gele tekst toegevoegd: kleur: #eff0cd; -webkit-tekststreek: 4px #7890b5; tekststreek: 4px #7890b5;
Lijnen kunnen vooral handig zijn als ze worden gecombineerd met schaduwen, dus voor 'Growing, Growing, Gone' heb ik een dunne lijn van 3px toegevoegd aan een nauwelijks vervaagde schaduw van 1px om dit driedimensionale teksteffect te creëren: kleur: #fbb999; tekstschaduw: 3px 5px 1px #5160b1; -webkit-tekststreek: 3px #984336; tekststreek: 3px #984336;
Verf bestellen Het gebruik van tekststreken levert niet altijd het verwachte resultaat op, vooral niet bij dunnere letters en dikkere streken, omdat de browser standaard een lijn over de vulling tekent. Helaas staat CSS mij nog steeds niet toe om de plaatsing van de streek aan te passen, zoals ik vaak doe in Sketch. De eigenschap verfvolgorde heeft echter waarden waarmee ik de lijn achter in plaats van vóór de vulling kan plaatsen.
verfvolgorde: lijn schildert eerst de streek, daarna de vulling, terwijl verfvolgorde: vulling het tegenovergestelde doet: kleur: #fbb999; verfvolgorde: vullen; tekstschaduw: 3px 5px 1px #5160b1; tekststreekkleur:#984336; tekststreekbreedte: 3px;
Een effectieve lijn houdt letters leesbaar, voegt gewicht toe en geeft, in combinatie met schaduwen en verfvolgorde, platte tekst een echte uitstraling. Achtergronden binnen tekst Veel cartoontitelkaarten gaan verder dan effen kleuren door textuur, kleurverlopen of geïllustreerde details aan de letters toe te voegen. Soms is dat een textuur, soms is het een verloop met een subtiele toonverschuiving. Op internet kan ik dit effect nabootsen door een achtergrondafbeelding of verloop achter de tekst te gebruiken en deze vervolgens in de vorm van de letters te knippen. Dit is afhankelijk van de samenwerking van twee eigenschappen: achtergrondclip: tekst en tekstvulkleur: transparant.
Eerst breng ik een achtergrond achter de tekst aan. Dit kan een bitmap- of vectorafbeelding zijn, of een CSS-gradiënt. Voor dit voorbeeld uit de Quick Draw McGraw-aflevering 'Baba Bait' bevat de titeltekst een subtiel verloop van boven naar beneden van donker naar licht: achtergrond: lineair verloop (0deg, #667b6a, #1d271a);
Vervolgens knip ik die achtergrond naar de glyphs en maak de tekst transparant zodat de achtergrond zichtbaar is: -webkit-achtergrondclip: tekst; -webkit-tekst-vulkleur: transparant;
Met alleen die twee regels wordt de achtergrond niet meer achter de tekst geschilderd; in plaats daarvan is het erin geschilderd. Deze techniek werkt vooral goed in combinatie met streken en schaduwen. Een uitgeknipt verloop geeft de letters kleur en textuur, een streek houdt de randen scherp en een schaduw tilt de tekst naar een hoger niveau dan de achtergrond. Samen creëren ze het gelaagde uiterlijk van handgeschilderde titelkaarten met behulp van niets meer dan een beetje CSS. Test zoals altijd de geknipte tekst zorgvuldig, aangezien browser-eigenaardigheden soms schaduwen en weergave kunnen beïnvloeden. Tekst opsplitsen in afzonderlijke tekens Soms wil ik niet een heel woord of een hele kop opmaken. Ik wil individuele letters vormgeven - een teken op zijn plaats duwen, een glyph extra gewicht geven of een paar letters afzonderlijk van animatie voorzien. In gewone HTML en CSS is er maar één betrouwbare manier om dat te doen: elk teken in zijn eigen span-element plaatsen. Ik zou dat handmatig kunnen doen, maar dat zou kwetsbaar zijn, moeilijk te onderhouden en zou snel uit elkaar vallen als de kopie verandert. Als ik controle per letter nodig heb, gebruik ik in plaats daarvan een bibliotheek voor het splitsen van tekst, zoals splt.js (hoewel er andere oplossingen beschikbaar zijn). Hiervoor is een tekstknooppunt nodig en worden woorden of tekens automatisch omwikkeld, waardoor ik extra haken krijg om te animeren en te stylen zonder mijn markeringen te verpesten. Het is een aanpak die mijn HTML leesbaar en semantisch houdt, terwijl ik tegelijkertijd de fijnmazige controle krijg die ik nodig heb om de ongelijke, karaktervolle typografie na te bootsen die je ziet in klassieke cartoontitelkaarten. Deze aanpak komt echter met zich meetoegankelijkheidsvoorbehouden, aangezien de meeste schermlezers tekstknooppunten in volgorde lezen. Dus dit:
Hum Zoet Hum
…leest zoals je zou verwachten: Zoem Zoet zoem
Maar dit:
H u m
…kan verschillend worden geïnterpreteerd, afhankelijk van de browser en schermlezer. Sommigen voegen de letters samen en lezen de woorden correct. Anderen kunnen pauzeren tussen letters, wat in het ergste geval zou kunnen klinken als: "H..." "U..." "M..."
Helaas leveren sommige splitsoplossingen niet altijd een toegankelijk resultaat op, dus heb ik mijn eigen tekstsplitter geschreven, splinter.js, die momenteel in bèta is. Individuele brieven transformeren Om mijn Toon Text Splitter te activeren, voeg ik een data-attribuut toe aan het element dat ik wil splitsen:
Hum Zoet Hum
Ten eerste scheidt mijn script elk woord in afzonderlijke letters en verpakt ze in een span-element met toegepaste klasse- en ARIA-attributen:
Het script neemt vervolgens de oorspronkelijke inhoud van het gesplitste element en voegt deze toe als een aria-attribuut om de toegankelijkheid te behouden:
Als deze klassenkenmerken zijn toegepast, kan ik individuele karakters naar eigen keuze opmaken.
Voor 'Hum Sweet Hum' wil ik bijvoorbeeld repliceren hoe de letters wegschuiven van de basislijn. Nadat ik mijn Toon Text Splitter had gebruikt, heb ik vier verschillende vertaalwaarden toegepast met behulp van verschillende :nth-child-selectors om een semi-willekeurig uiterlijk te creëren: /* 4e, 8e, 12e... */ .toon-char:nth-child(4n) { vertalen: 0 -8px; } /* 1e, 5e, 9e... */ .toon-char:n-kind(4n+1) { vertalen: 0 -4px; } /* 2e, 6e, 10e... */ .toon-char:nth-child(4n+2) { vertalen: 0 4px; } /* 3e, 7e, 11e... */ .toon-char:nth-child(4n+3) { vertalen: 0 8px; }
Maar vertalen is slechts één eigenschap die ik kan gebruiken om mijn toontekst te transformeren.
Ik zou die individuele karakters ook kunnen roteren voor een nog chaotischer uiterlijk: /* 4e, 8e, 12e... */ .toon-line .toon-char:nth-child(4n) { roteren: -4deg; } /* 1e, 5e, 9e... */ .toon-char:nth-child(4n+1) { roteren: -8deg; } /* 2e, 6e, 10e... */ .toon-char:nth-child(4n+2) { roteren: 4deg; } /* 3e, 7e, 11e... */ .toon-char:nth-child(4n+3) { roteren: 8deg; }
Maar vertalen is slechts één eigenschap die ik kan gebruiken om mijn toontekst te transformeren. Ik zou die individuele karakters ook kunnen roteren voor een nog chaotischer uiterlijk: /* 4e, 8e, 12e... */ .toon-line .toon-char:n-kind(4n) { roteren: -4 graden; }
/* 1e, 5e, 9e... */ .toon-char:n-kind(4n+1) { roteren: -8 graden; }
/* 2e, 6e, 10e... */ .toon-char:n-kind(4n+2) { roteren: 4 graden; }
/* 3e, 7e, 11e... */ .toon-char:n-kind(4n+3) { roteren: 8 graden; }
En natuurlijk zou ik animaties kunnen toevoegen om die karakters te laten bewegen en mijn toon-tekststijltitels tot leven te brengen. Eerst heb ik een keyframe-animatie gemaakt die de karakters roteert:
@keyframes schudden { 0%, 100% { transformeren: roteren(var(--basis-roteren, 0deg)); } 25% { transformeren: roteren(calc(var(--basis-roteren, 0deg) + 3deg)); } 50% { transformeren: roteren(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transformeren: roteren(calc(var(--basis-roteren, 0deg) + 1deg)); } }
Voordat je het toepast op de span-elementen gemaakt door mijn Toon Text Splitter: .toon-char { animatie: schud 3s oneindig gemak-in-uit; transformatie-oorsprong: middenonder; }
En tot slot, het instellen van de rotatiehoeveelheid en een vertraging voordat elk personage begint te schudden: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:n-kind(4n+1) { --base-rotate: -4deg; } .toon-char:n-kind(4n+2) { --base-rotate: 2deg; } .toon-char:n-kind(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) {animatievertraging: 0,1s; } .toon-char:nth-child(4n+1) { animatievertraging: 0,3s; } .toon-char:nth-child(4n+2) { animatie-vertraging: 0,5s; } .toon-char:nth-child(4n+3) { animatievertraging: 0,7s; }
Eén frame om indruk te maken Kunstenaars van cartoontitels hadden één frame om indruk te maken, en hun typografie was net zo belangrijk als het kunstwerk dat ze schilderden. Hetzelfde geldt op internet. Een goed ontworpen header of heldgebied heeft duidelijkheid, karakter en vertrouwen nodig - niet alleen maar een vervaagde achtergrondafbeelding over de volledige breedte. Met een paar zorgvuldig gekozen CSS-eigenschappen – schaduwen, lijnen, uitgeknipte achtergronden en wat ingetogen animaties – kunnen we dezelfde impact nabootsen. Ik hou van Toon-tekst, niet omdat ik nostalgisch ben, maar omdat het ontwerp opzettelijk is. Maak weloverwogen keuzes en laat een beetje toonteksttypografie uw ontwerpen extra pit geven.
