Nadat ek 'n projek voltooi het wat vereis het dat ek alles moes leer wat ek kon oor CSS- en SVG-animasies, het ek hierdie reeks begin skryf oor Smashing Animations en "Hoe Classic Cartoons Inspire Modern CSS." Om hierdie jaar af te rond, wil ek jou wys hoe om moderne CSS te gebruik om daardie element te skep wat Toon-titels so impakvol maak: hul tipografie. Titel Kunswerk Ontwerp In die stille era van die 1920's en vroeë '30's het die tipografie van 'n film se titelkaart 'n stemming geskep, die toneel geskep en 'n gehoor herinner aan die tipe film wat hulle betaal het om te sien.
Spotprenttitelkaarte was ook handelsmerke, bui en toneel-omgewing, alles in een gerol. In die vroeë jare, toe groot ateljeebegrotings groter was, was hierdie titelkaarte dikwels illustratief en skilderagtig.
Maar toe televisie gedurende die 1950's gefloreer het, het begrotings gedaal, en kaarte wat deur kunstenaars soos Lawrence "Art" Goble ontwerp is, het 'n nuwe visuele taal aangeneem, wat meer grafies, gestileerd en minder ingewikkeld geword het. Let wel: Lawrence “Art” Goble is een van die helde van die middel-eeuse Amerikaanse animasie wat dikwels oor die hoof gesien word. Hy het hoofsaaklik vir Hanna-Barbera gewerk gedurende sy mees invloedryke jare van die 1950's en 1960's. Goble was nie 'n karakteranimeerder nie. Sy rol was om atmosfeer te skep, so hy het omgewings vir The Flintstones, Huckleberry Hound, Quick Draw McGraw en Yogi Bear ontwerp, asook die openingstitelkaarte wat die toon aangee. Sy titelkaarte, met skilderye met 'n logo oorgetrek, het gehelp om die ikoniese voorkoms van Hanna-Barbera te definieer. Goble se kunswerk vir karakters soos Quick Draw McGraw en Yogi Bear was effektief op kleiner TV-skerms. Eerder as om 'n stilbeeld uit die spotprent te reproduseer, het hy gefokus op die aanbieding van 'n enkele, sterk idee - dikwels in silhoeët - wat die essensie daarvan vasgevang het. In "The Buzzin' Bear" gons Yogi in 'n helikopter verby. Hy bons weg, pic-a-nic mandjie in die hand, in "Bear on a Piekniek," en vir sy "Prys Fight Fright," boks Yogi die titelteks.
Met min of geen beweging om op staat te maak nie, moes Goble se enkele rame 'n stemming skep, die toneel stel en 'n storie beskryf. Hulle het dit gedoen deur plat kleure, grafiese vorms en tipografie te gebruik wat gereeld in die kunswerk geïntegreer is.
As ontwerpers wat op die web werk, kan toontitels ons baie leer oor hoe om 'n handelsmerk se persoonlikheid oor te dra, 'n eerste indruk te maak en verwagtinge te stel vir iemand se ervaring met 'n produk of webwerf. Ons kan leer uit die kunstenaars se tegnieke om effektiewe baniere, bestemmingsbladsy-opskrifte en selfs outydse spatskerms te skep. Toon Titel Tipografie Spotprenttitelkaarte wys hoe die samevoeging van tipe met beelde die stoot gee wat 'n kopskrif of held nodig het. Met 'n handvol teksskadu-, teksstroop- en transformasie-truuks, laat moderne CSS jou in daardie selfde energie ontgin.
Die Toon-tekstitelgenerator Met die skryf van hierdie artikel het ek besef dit sou nuttig wees om 'n instrument te hê om teks te genereer wat soos die spotprenttitels waarvoor ek so lief is, gestileer word. So ek het een gemaak. My Toon Text Title Generator laat jou eksperimenteer met kleure, strepe en veelvuldige teksskaduwees. Jy kan verfvolgorde aanpas, letterspasiëring toepas, jou teks voorbeskou in 'n seleksie van voorbeeldlettertipes, en dan die gegenereerde CSS direk na jou knipbord kopieer om in 'n projek te gebruik. Toon Titel CSS U kan eenvoudig die CSS wat die Toon Text Title Generator aan u verskaf, kopieer en plak. Maar kom ons kyk van nader na wat dit doen. Teks skaduwee Kyk na die tipe in hierdie titel van Augie Doggie se episode "Yuk-Yuk Duck," met sy liggeel letters en donker, harde, afwykende skaduwee wat dit van die agtergrond af lig en die illusie van diepte skep.
Jy weet waarskynlik reeds dat teksskadu vier waardes aanvaar: (1) horisontale en (2) vertikale afwykings, (3) vervaging en (4) 'n kleur wat solied of semi-deursigtig kan wees. Daardie verrekenwaardes kan positief of negatief wees, so ek kan "Yuk-Yuk Duck" herhaal deur 'n harde skaduwee af en na regs te gebruik: kleur: #f7f76d; teksskadu: 5px 5px 0 #1e1904;
Aan die ander kant het hierdie "Pint Giant"-titel 'n ander gevoel met sy negatiewe halfsagte skaduwee: kleur: #c2a872; teks-skadu: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Om ekstra diepte by te voeg en meer interessante effekte te skep, kan ek verskeie skaduwees laag. Vir "Let's Duck Out", kombineer ek vier skaduwees: die eerste 'n soliede skaduwee met 'n negatiewe horisontale verskuiwing om die teks van die agtergrond af te lig, gevolg deur progressief sagter skaduwees om 'n vervaag rondom dit te skep: kleur: #6F4D80; teks-skadu: -5 px5px 0 #260e1e, /* Skaduwee 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Skaduwee 4 */
Hierdie skaduwees wys dat die gebruik van teksskadu nie net gaan oor die skep van beligtingseffekte nie, aangesien dit ook dekoratief kan wees en persoonlikheid kan byvoeg. Teks beroerte Baie spotprenttitelkaarte het letters met 'n vet omtrek wat hulle van die agtergrond laat uitstaan. Ek kan hierdie effek herskep deur teksstroke te gebruik. Vir 'n lang tyd was hierdie eiendom slegs beskikbaar via 'n -webkit- voorvoegsel, maar dit beteken ook dat dit nou oor moderne blaaiers ondersteun word.
text-stroke is 'n snelskrif vir twee eienskappe. Die eerste, teks-slag-wydte, teken 'n kontoer rondom individuele letters, terwyl die tweede, teks-strepie-kleur, sy kleur beheer. Vir "Whatever Goes Pup," het ek 'n 4px blou streep by die geel teks gevoeg: kleur: #eff0cd; -webkit-teks-slag: 4px #7890b5; teksslag: 4px #7890b5;
Beroertes kan veral nuttig wees wanneer hulle met skaduwees gekombineer word, so vir "Growing, Growing, Gone," het ek 'n dun 3px-strepie by 'n skaars vae 1px-skaduwee gevoeg om hierdie driedimensionele tekseffek te skep: kleur: #fbb999; teksskadu: 3px 5px 1px #5160b1; -webkit-teks-slag: 3px #984336; teksslag: 3px #984336;
Verfbestelling Die gebruik van teksstroke lewer nie altyd die verwagte resultaat nie, veral met dunner letters en dikker strepe, want by verstek trek die blaaier 'n strepie oor die vul. Ongelukkig laat CSS my steeds nie toe om beroerteplasing aan te pas soos ek dikwels in Sketch doen nie. Die verf-orde-eienskap het egter waardes wat my toelaat om die slag agter, eerder as voor, die vul te plaas.
verf-orde: streep verf eers die streep, dan die vul, terwyl verf-orde: vul die teenoorgestelde doen: kleur: #fbb999; verf-orde: vul; teksskadu: 3px 5px 1px #5160b1; teks-slag-kleur: # 984336; teks-slagwydte: 3px;
'n Effektiewe streep hou letters leesbaar, voeg gewig by, en - wanneer dit gekombineer word met skaduwees en verfvolgorde - gee plat teks werklike teenwoordigheid. Agtergronde binne teks Baie spotprenttitelkaarte gaan verder as plat kleur deur tekstuur, gradiënte of geïllustreerde detail by die letters by te voeg. Soms is dit 'n tekstuur, ander kere is dit dalk 'n gradiënt met 'n subtiele tonale verskuiwing. Op die web kan ek hierdie effek herskep deur 'n agtergrondprent of gradiënt agter die teks te gebruik en dit dan na die vorm van die letters te knip. Dit maak staat op twee eienskappe wat saamwerk: agtergrond-snit: teks en teksvul-kleur: deursigtig.
Eerstens pas ek 'n agtergrond agter die teks toe. Dit kan 'n bitmap of vektorbeeld of 'n CSS-gradiënt wees. Vir hierdie voorbeeld van die Quick Draw McGraw-episode "Baba Bait," bevat die titelteks 'n subtiele bo-onder-gradiënt van donker na lig: agtergrond: lineêre-gradiënt(0deg, #667b6a, #1d271a);
Volgende knip ek daardie agtergrond aan die glife en maak die teks deursigtig sodat die agtergrond deurskyn: -webkit-agtergrond-snit: teks; -webkit-teks-vul-kleur: deursigtig;
Met net daardie twee reëls is die agtergrond nie meer agter die teks geverf nie; in plaas daarvan is dit daarin geverf. Hierdie tegniek werk veral goed wanneer dit gekombineer word met beroertes en skaduwees. 'n Geknipte gradiënt voorsien die letters van kleur en tekstuur, 'n streep hou sy rande skerp, en 'n skaduwee verhef dit van die agtergrond af. Saam herskep hulle die gelaagde voorkoms van handgeverfde titelkaarte deur niks meer as 'n bietjie CSS te gebruik nie. Soos altyd, toets geknipte teks noukeurig, aangesien blaaier-kenmerke soms skaduwees en weergawe kan beïnvloed. Verdeel teks in individuele karakters Soms wil ek nie 'n hele woord of opskrif stileer nie. Ek wil individuele letters stileer - om 'n karakter op sy plek te stoot, een glyph ekstra gewig te gee, of 'n paar letters onafhanklik te animeer. In gewone HTML en CSS is daar net een betroubare manier om dit te doen: draai elke karakter in sy eie span-element. Ek kon dit met die hand doen, maar dit sou broos wees, moeilik om te onderhou, en sou vinnig uitmekaar val wanneer kopie verander. In plaas daarvan, wanneer ek per-letter beheer nodig het, gebruik ek 'n teksverdelende biblioteek soos splt.js (alhoewel ander oplossings beskikbaar is). Dit neem 'n teksknoop en omvou woorde of karakters outomaties, wat my ekstra hakies gee om te animeer en te styl sonder om my opmaak te mors. Dit is 'n benadering wat my HTML leesbaar en semanties hou, terwyl dit my die fyn beheer gee wat ek nodig het om die ongelyke, karaktervolle tipografie wat jy in klassieke spotprenttitelkaarte sien, te herskep. Hierdie benadering kom egter saamtoeganklikheid waarskuwings, aangesien die meeste skermlesers teksnodes in volgorde lees. So dit:
Hom Soet Hom
… lees soos jy sou verwag: Hum Soet Hom
Maar dit:
H u m
… kan verskillend geïnterpreteer word, afhangende van die blaaier en skermleser. Sommige sal die letters aaneenskakel en die woorde korrek lees. Ander kan tussen letters onderbreek, wat in 'n ergste geval kan klink soos: “H…” “U…” “M…”
Ongelukkig lewer sommige splitsingsoplossings nie 'n altyd toeganklike resultaat nie, so ek het my eie teksverdeler, splinter.js, geskryf wat tans in beta is. Transformasie van individuele briewe Om my Toon Text Splitter te aktiveer, voeg ek 'n data-kenmerk by die element wat ek wil verdeel:
Hom Sweet Hum
Eerstens, my skrif skei elke woord in individuele letters en draai dit in 'n span-element met klas- en ARIA-kenmerke toegepas:
Die skrif neem dan die aanvanklike inhoud van die gesplete element en voeg dit as 'n aria-kenmerk by om te help om toeganklikheid te handhaaf:
Met daardie klaskenmerke toegepas, kan ek dan individuele karakters stileer soos ek kies.
Byvoorbeeld, vir "Hum Sweet Hum," wil ek herhaal hoe die letters daarvan wegskuif van die basislyn. Nadat ek my Toon Text Splitter gebruik het, het ek vier verskillende vertaalwaardes toegepas deur verskeie :nth-child selectors te gebruik om 'n semi-ewekansige voorkoms te skep: /* 4de, 8ste, 12de... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1ste, 5de, 9de... */ .toon-char:nth-child(4n+1) { vertaal: 0 -4px; } /* 2de, 6de, 10de... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3de, 7de, 11de... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Maar translate is slegs een eienskap wat ek kan gebruik om my toonteks te transformeer.
Ek kan ook daardie individuele karakters roteer vir 'n selfs meer chaotiese voorkoms: /* 4de, 8ste, 12de... */ .toon-lyn .toon-char:nth-child(4n) { roteer: -4deg; } /* 1ste, 5de, 9de... */ .toon-char:nth-child(4n+1) {rotate: -8deg; } /* 2de, 6de, 10de... */ .toon-char:nth-child(4n+2) { roteer: 4deg; } /* 3de, 7de, 11de... */ .toon-char:nth-child(4n+3) { roteer: 8deg; }
Maar translate is slegs een eienskap wat ek kan gebruik om my toonteks te transformeer. Ek kan ook daardie individuele karakters roteer vir 'n selfs meer chaotiese voorkoms: /* 4de, 8ste, 12de... */ .toon-line .toon-char:nth-child(4n) { draai: -4grade; }
/* 1ste, 5de, 9de... */ .toon-char:nth-child(4n+1) { draai: -8 grade; }
/* 2de, 6de, 10de... */ .toon-char:nth-child(4n+2) { draai: 4 grade; }
/* 3de, 7de, 11de... */ .toon-char:nth-child(4n+3) { draai: 8 grade; }
En natuurlik kan ek animasies byvoeg om daardie karakters te skud en my toonteksstyltitels lewendig te maak. Eerstens het ek 'n sleutelraam-animasie geskep wat die karakters roteer:
@keyframes jiggle { 0%, 100% {transformeer: roteer(var(--basis-roteer, 0grade)); } 25% {transformeer: roteer(calc(var(--basis-rotate, 0deg) + 3deg)); } 50% {transformeer: roteer(calc(var(--basis-roteer, 0deg) - 2deg)); } 75% {transformeer: roteer(calc(var(--basis-roteer, 0deg) + 1deg)); } }
Voordat u dit toepas op die span-elemente wat deur my Toon Text Splitter geskep is: .toon-char { animasie: jiggle 3s oneindige gemak-in-uit; transformasie-oorsprong: middel onder; }
En laastens, stel die rotasiebedrag en 'n vertraging in voordat elke karakter begin skud: .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) { animasievertraging: 0.1s; } .toon-char:nth-child(4n+1) { animasievertraging: 0.3s; } .toon-char:nth-child(4n+2) { animasievertraging: 0.5s; } .toon-char:nth-child(4n+3) { animasievertraging: 0.7s; }
Een raam om 'n indruk te maak Tekenprenttitelkunstenaars het een raam gehad om 'n indruk te maak, en hul tipografie was net so belangrik soos die kunswerk wat hulle geskilder het. Dieselfde geld op die web. 'n Goed ontwerpte kopskrif of heldarea benodig duidelikheid, karakter en selfvertroue - nie bloot 'n verbleikte volle breedte agtergrondprent nie. Met 'n paar noukeurig gekose CSS-eienskappe - skaduwees, beroertes, geknipte agtergronde en 'n paar beperkte animasie - kan ons dieselfde impak herskep. Ek is mal oor toonteks, nie omdat ek nostalgies is nie, maar omdat die ontwerp doelbewus is. Maak doelbewuste keuses, en laat 'n klein toontjie-tekstipografie by jou ontwerpe 'n krag gee.
