Pas përfundimit të një projekti që më kërkonte të mësoja gjithçka që mundja për animacionet CSS dhe SVG, fillova të shkruaj këtë seri rreth Animacioneve Smashing dhe "Si Karikaturat Klasike frymëzojnë CSS moderne". Për të përfunduar këtë vit, unë dua t'ju tregoj se si të përdorni CSS moderne për të krijuar atë element që i bën Titujt Toon kaq ndikues: tipografinë e tyre. Titulli Design Artwork Në epokën e heshtur të viteve 1920 dhe fillimit të viteve 30, tipografia e kartës së titullit të një filmi krijoi një humor, vendosi skenën dhe i kujtoi audiencës llojin e filmit që do të paguanin për të parë.
Kartat e titullit të filmave vizatimorë ishin gjithashtu markimi, disponimi dhe vendosja e skenës, të gjitha të bashkuara në një. Në vitet e para, kur buxhetet kryesore të studios ishin më të mëdha, këto karta titujsh ishin shpesh ilustruese dhe pikturuese.
Por kur televizioni lulëzoi gjatë viteve 1950, buxhetet ranë dhe kartat e dizajnuara nga artistë si Lawrence "Art" Goble adoptuan një gjuhë të re vizuale, duke u bërë më grafike, e stilizuar dhe më pak e ndërlikuar. Shënim: Lawrence "Art" Goble është një nga heronjtë shpesh të anashkaluar të animacionit amerikan të mesit të shekullit. Ai punoi kryesisht për Hanna-Barbera gjatë viteve të saj më me ndikim të viteve 1950 dhe 1960. Goble nuk ishte një animator i personazheve. Roli i tij ishte të krijonte atmosferë, kështu që ai projektoi mjedise për The Flintstones, Huckleberry Hound, Quick Draw McGraw dhe Yogi Bear, si dhe kartat e titullit të hapjes që vendosën tonin. Kartat e tij të titullit, me piktura me një logo të mbivendosur, ndihmuan në përcaktimin e pamjes ikonike të Hanna-Barbera. Punimet artistike të Goble për personazhe si Quick Draw McGraw dhe Yogi Bear ishin efektive në ekranet më të vogla televizive. Në vend që të riprodhonte një foto nga filmi vizatimor, ai u fokusua në paraqitjen e një ideje të vetme, të fortë – shpesh në siluetë – që kapte thelbin e saj. Në "The Buzzin' Bear", Yogi gumëzhin me një helikopter. Ai tërhiqet larg, me një shportë për fotografim në dorë, në "Bear on a Picnic" dhe për "Prize Fight Fright", Yogi vendos në kuti tekstin e titullit.
Me pak ose aspak lëvizje për t'u mbështetur, kornizat e vetme të Goble duhej të krijonin një humor, të vendosnin skenën dhe të përshkruanin një histori. Ata e bënë këtë duke përdorur ngjyra të sheshta, forma grafike dhe tipografi që shpesh integrohej në veprën e artit.
Si stilistë që punojnë në ueb, titujt e tonit mund të na mësojnë shumë se si të përçojmë personalitetin e një marke, të krijojmë përshtypjen e parë dhe të vendosim pritshmëri për përvojën e dikujt duke përdorur një produkt ose uebsajt. Ne mund të mësojmë nga teknikat e artistëve për të krijuar banderola efektive, tituj të faqeve fillestare dhe madje edhe ekrane spërkatëse të modës së mirë. Tipografia e Titullit Toon Kartat e titullit të filmit vizatimor tregojnë se si bashkimi i tipit me imazhet jep goditjen që i nevojitet një titulli ose hero. Me një sërë trukesh me hije teksti, tekst-stroke dhe transformimi, CSS moderne ju lejon të përdorni të njëjtën energji.
Gjeneruesi i titujve të tekstit Toon Pjesërisht duke shkruar këtë artikull, kuptova se do të ishte e dobishme të kisha një mjet për të gjeneruar tekst të stiluar si titujt e filmave vizatimorë që më pëlqejnë shumë. Kështu që bëra një. My Toon Text Title Generator ju lejon të eksperimentoni me ngjyra, goditje dhe hije të shumta teksti. Ju mund të rregulloni rendin e bojës, të aplikoni hapësirën e shkronjave, të shikoni paraprakisht tekstin tuaj në një përzgjedhje të shkronjave të mostrës dhe më pas të kopjoni CSS-në e krijuar direkt në kujtesën tuaj për ta përdorur në një projekt. Titulli Toon CSS Ju thjesht mund të kopjoni-ngjisni CSS-në që ju ofron gjeneratori i titullit të tekstit Toon. Por le të shohim më nga afër se çfarë bën. Hije e tekstit Shikoni llojin në këtë titull nga episodi i Augie Doggie "Yuk-Yuk Duck", me shkronjat e verdha të zbehta dhe hijen e errët, të fortë, të zhvendosur që e heq atë nga sfondi dhe krijon iluzionin e thellësisë.
Ju ndoshta e dini tashmë se text-hija pranon katër vlera: (1) zhvendosje horizontale dhe (2) vertikale, (3) turbullim dhe (4) një ngjyrë që mund të jetë e fortë ose gjysmë transparente. Këto vlera të kompensimit mund të jenë pozitive ose negative, kështu që unë mund të përsëris "Yuk-Yuk Duck" duke përdorur një hije të fortë të tërhequr poshtë dhe djathtas: ngjyra: #f7f76d; tekst-hije: 5px 5px 0 #1e1904;
Nga ana tjetër, ky titull "Pint Giant" ka një ndjenjë tjetër me hijen e tij negative gjysmë të butë: ngjyra: #c2a872; tekst-hije: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Për të shtuar thellësi shtesë dhe për të krijuar efekte më interesante, unë mund të shtroj hije të shumta. Për "Let's Duck Out", unë kombinoj katër hije: e para një hije e fortë me një zhvendosje horizontale negative për të hequr tekstin nga sfondi, e ndjekur nga hije gradualisht më të buta për të krijuar një turbullim rreth tij: ngjyra: #6F4D80; tekst-hije: -5 px5px 0 #260e1e, /* Hije 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Hija 4 */
Këto hije tregojnë se përdorimi i hijes së tekstit nuk ka të bëjë vetëm me krijimin e efekteve të ndriçimit, pasi ato mund të jenë gjithashtu dekorative dhe të shtojnë personalitet. Teksti Stroke Shumë karta titujsh vizatimorë përmbajnë shkronja me një skicë të theksuar që i bën ato të dallohen nga sfondi. Unë mund ta rikrijoj këtë efekt duke përdorur tekst-stroke. Për një kohë të gjatë, kjo pronë ishte e disponueshme vetëm përmes një prefiksi -webkit-, por kjo gjithashtu do të thotë se tani mbështetet në shfletuesit modernë.
tekst-stroke është një stenografi për dy veti. E para, teksti-stroke-width, vizaton një kontur rreth shkronjave individuale, ndërsa e dyta, text-stroke-color, kontrollon ngjyrën e saj. Për "Çfarëdo që të shkojë qenush", shtova një goditje blu 4 px në tekstin e verdhë: ngjyra: #eff0cd; -webkit-tekst-stroke: 4px #7890b5; tekst-stroke: 4px #7890b5;
Goditjet mund të jenë veçanërisht të dobishme kur kombinohen me hije, kështu që për "Growing, Growing, Gone", shtova një goditje të hollë 3px në një hije mezi të paqartë 1px për të krijuar këtë efekt teksti tredimensional: ngjyra: #fbb999; tekst-hije: 3px 5px 1px #5160b1; -webkit-tekst-stroke: 3px #984336; tekst-stroke: 3px #984336;
Renditja e bojës Përdorimi i tekstit nuk jep gjithmonë rezultatin e pritur, veçanërisht me shkronja më të holla dhe goditje më të trasha, sepse si parazgjedhje shfletuesi tërheq një goditje mbi mbushjen. Mjerisht, CSS ende nuk më lejon të rregulloj vendosjen e goditjes siç bëj shpesh në Sketch. Megjithatë, vetia e rendit të bojës ka vlera që më lejojnë të vendos goditjen prapa, dhe jo përpara, mbushjes.
paint-order: stroke pikturon fillimisht goditjen, pastaj mbushjen, ndërsa paint-order: fill bën të kundërtën: ngjyra: #fbb999; paint-order: mbush; tekst-hije: 3px 5px 1px #5160b1; text-stroke-color:#984336; teksti-stroke-width: 3px;
Një goditje efektive i mban shkronjat të lexueshme, shton peshë dhe - kur kombinohet me hijet dhe renditjen e bojës - i jep tekstit të sheshtë prani reale. Sfondet brenda tekstit Shumë letra me titull vizatimor shkojnë përtej ngjyrës së sheshtë duke shtuar teksturë, gradient ose detaje të ilustruara në germa. Ndonjëherë kjo është një strukturë, herë të tjera mund të jetë një gradient me një zhvendosje delikate tone. Në ueb, unë mund ta rikrijoj këtë efekt duke përdorur një imazh të sfondit ose gradient pas tekstit, dhe më pas duke e prerë atë në formën e shkronjave. Kjo mbështetet në dy veti që punojnë së bashku: sfond-clip: tekst dhe tekst-fill-ngjyra: transparent.
Së pari, unë aplikoj një sfond prapa tekstit. Ky mund të jetë një imazh bitmap ose vektori ose një gradient CSS. Për këtë shembull nga episodi Quick Draw McGraw "Baba Bait", teksti i titullit përfshin një gradient delikate lart-poshtë nga errësira në dritë: sfond: linear-gradient(0deg, #667b6a, #1d271a);
Më pas, e ngjis atë sfond në glifet dhe e bëj tekstin transparent në mënyrë që sfondi të shfaqet përmes: -webkit-background-clip: tekst; -webkit-text-fill-color: transparent;
Vetëm me ato dy rreshta, sfondi nuk pikturohet më pas tekstit; në vend të kësaj, është pikturuar brenda saj. Kjo teknikë funksionon veçanërisht mirë kur kombinohet me goditje dhe hije. Një gradient i prerë i jep shkronjave ngjyrë dhe strukturë, një goditje i mban skajet e saj të mprehta dhe një hije e ngre atë nga sfondi. Së bashku, ata rikrijojnë pamjen e shtresave të kartave të titujve të pikturuara me dorë duke përdorur asgjë më shumë se një CSS të vogël. Si gjithmonë, testo tekstin e prerë me kujdes, pasi çuditjet e shfletuesit ndonjëherë mund të ndikojnë në hijet dhe paraqitjen. Ndarja e tekstit në karaktere individuale Ndonjëherë nuk dua të stiloj një fjalë apo titull të tërë. Unë dua të stiloj shkronjat individuale - të shtyj një personazh në vend, t'i jap një glife peshë shtesë ose të animoj disa shkronja në mënyrë të pavarur. Në HTML dhe CSS të thjeshtë, ka vetëm një mënyrë të besueshme për ta bërë këtë: mbështillni çdo karakter në elementin e vet të hapësirës. Mund ta bëja atë me dorë, por do të ishte e brishtë, e vështirë për t'u mirëmbajtur dhe do të shpërbëhej shpejt kur të ndryshonte kopja. Në vend të kësaj, kur kam nevojë për kontroll për shkronjë, përdor një bibliotekë për ndarjen e tekstit si splt.js (edhe pse zgjidhje të tjera janë të disponueshme). Kjo merr një nyje teksti dhe mbështjell automatikisht fjalët ose karakteret, duke më dhënë grepa shtesë për të animuar dhe stiluar pa ngatërruar shënimin tim. Është një qasje që e mban HTML-në time të lexueshme dhe semantike, ndërkohë që më jep kontrollin e hollësishëm që më duhet për të rikrijuar tipografinë e pabarabartë dhe karakteristike që shihni në kartat klasike të titujve vizatimorë. Megjithatë, kjo qasje vjen meparalajmërime për aksesueshmërinë, pasi shumica e lexuesve të ekranit lexojnë nyjet e tekstit sipas radhës. Pra kjo:
Hum Sweet Hum
…lexohet siç e prisnit: Hum Hum Sweet
Por kjo:
H u m
…mund të interpretohet ndryshe në varësi të shfletuesit dhe lexuesit të ekranit. Disa do të lidhin shkronjat dhe do t'i lexojnë fjalët saktë. Të tjerët mund të ndalojnë midis shkronjave, gjë që në skenarin më të keq mund të duket si: “H…” “U…” “M…”
Mjerisht, disa zgjidhje të ndarjes nuk japin një rezultat gjithmonë të arritshëm, kështu që unë kam shkruar ndarësin tim të tekstit, splinter.js, i cili aktualisht është në beta. Transformimi i shkronjave individuale Për të aktivizuar Toon Text Splitter, unë i shtoj një atribut të dhënash elementit që dua të ndaj:
Hum Sweet Hum
Së pari, skripti im ndan çdo fjalë në shkronja individuale dhe i mbështjell ato në një element span me atributet e klasës dhe ARIA të aplikuara:
Më pas skripti merr përmbajtjen fillestare të elementit të ndarjes dhe e shton atë si një atribut arie për të ndihmuar në ruajtjen e aksesueshmërisë:
Me ato atribute të klasës të aplikuara, unë mund të stiloj karaktere individuale sipas zgjedhjes.
Për shembull, për "Hum Sweet Hum", unë dua të përsëris se si shkronjat e tij zhvendosen nga vija bazë. Pasi përdora Toon Text Splitter, aplikova katër vlera të ndryshme përkthimi duke përdorur disa përzgjedhës :nth-child për të krijuar një pamje gjysmë të rastësishme: /* 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; }
Por përkthimi është vetëm një veti që mund ta përdor për të transformuar tekstin tim të tekstit.
Unë gjithashtu mund t'i rrotulloj ato personazhe individuale për një pamje edhe më kaotike: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { rotate: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
Por përkthimi është vetëm një veti që mund ta përdor për të transformuar tekstin tim të tekstit. Unë gjithashtu mund t'i rrotulloj ato personazhe individuale për një pamje edhe më kaotike: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { rrotullimi: -4 gradë; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { rrotullimi: -8 gradë; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { rrotullimi: 4 gradë; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { rrotullimi: 8 gradë; }
Dhe, sigurisht, mund të shtoja animacione për t'i lëvizur ata personazhe dhe për t'i dhënë jetë titujve të stilit tim të tekstit. Së pari, krijova një animacion të kornizës kyçe që rrotullon personazhet:
@keyframes lëviz { 0%, 100% { transformim: rotate(var(--base-rotate, 0deg)); } 25% { transformim: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transformim: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transformim: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Përpara se ta aplikoni në elementët e hapësirës së krijuar nga Toon Text Splitter: .toon-char { animacion: lëviz 3s infinite ease-in-out; transformimi-origjina: fundi qendror; }
Dhe së fundi, vendosja e sasisë së rrotullimit dhe një vonesë përpara se çdo karakter të fillojë të tundet: .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) { animacion-vonesa: 0.1s; } .toon-char:nth-child(4n+1) { animacion-vonesa: 0,3s; } .toon-char:nth-child(4n+2) { animacion-vonesa: 0,5s; } .toon-char:nth-child(4n+3) { animacion-vonesa: 0,7s; }
Një kornizë për të bërë një përshtypje Artistët e titullit të filmave vizatimorë kishin një kornizë për të lënë përshtypje, dhe tipografia e tyre ishte po aq e rëndësishme sa vepra arti që ata pikturuan. E njëjta gjë është e vërtetë në ueb. Një kokë ose hero i projektuar mirëzona ka nevojë për qartësi, karakter dhe besim - jo thjesht një imazh të zbehur të sfondit me gjerësi të plotë. Me disa veçori të CSS të zgjedhura me kujdes - hije, goditje, sfonde të prera dhe disa animacione të kufizuara - ne mund të rikrijojmë të njëjtin ndikim. Më pëlqen shumë teksti jo sepse jam nostalgjik, por sepse dizajni i tij është i qëllimshëm. Bëni zgjedhje të qëllimshme dhe lërini një tipografi të vogël teksti t'i shtojë një goditje dizajneve tuaja.
