Fininte projekton, kiu postulis min lerni ĉion, kion mi povis pri CSS kaj SVG-animacioj, mi komencis verki ĉi tiun serion pri Smashing Animations kaj "Kiel Klasikaj Karikaturoj Inspiras Modernan CSS". Por rondigi ĉi tiun jaron, mi volas montri al vi kiel uzi modernan CSS por krei tiun elementon, kiu faras Toon-Titolojn tiom efikaj: ilia tipografio. Titolo Artwork Design En la silenta epoko de la 1920-aj jaroj kaj fruaj 30-aj jaroj, la tipografio de la titolkarto de filmo kreis humoron, metis la scenon, kaj memorigis spektantaron pri la speco de filmo kiun ili pagis por vidi.
Bildstriaj titolkartoj ankaŭ estis markoj, humoro kaj scenejo, ĉio ruliĝis en unu. En la fruaj jaroj, kiam gravaj studiobuĝetoj estis pli grandaj, tiuj titolkartoj ofte estis ilustraj kaj pentraj.
Sed kiam televido eksplodis dum la 1950-aj jaroj, buĝetoj falis, kaj kartoj dizajnitaj fare de artistoj kiel Lawrence "Art" Goble adoptis novan vidan lingvon, iĝante pli grafika, stiligita kaj malpli komplika. Notu: Lawrence "Art" Goble estas unu el la ofte preteratentitaj herooj de mezjarcenta amerika animacio. Li ĉefe laboris por Hanna-Barbera dum ĝiaj plej influaj jaroj de la 1950-aj jaroj kaj 1960-aj jaroj. Goble ne estis karaktero vigligisto. Lia rolo estis krei atmosferon, tiel ke li dizajnis mediojn por La Fajroŝtonoj, Huckleberry Hound, Quick Draw McGraw, kaj Yogi Bear, same kiel la komencajn titolkartojn kiuj fiksis la tonon. Liaj titolkartoj, havante pentraĵojn kun emblemo supermetita, helpis difini la ikonecan aspekton de Hanna-Barbera. La arto de Goble por karakteroj kiel Quick Draw McGraw kaj Jogulo estis efika sur pli malgrandaj televidekranoj. Prefere ol reproduktado de alambiko de la bildstrio, li temigis prezentado de ununura, forta ideo - ofte en silueto - kiu kaptis ĝian esencon. En "The Buzzin' Bear", Jogulo zumas per helikoptero. Li resaltas for, pic-a-nic korbo en la mano, en "Bear on a Picnic", kaj por sia "Prize Fight Fright", Jogulo skatolas la titoltekston.
Kun malgranda aŭ neniu moviĝo por fidi, la ununuraj kadroj de Goble devis krei humoron, meti la scenon kaj priskribi rakonton. Ili faris tion uzante platajn kolorojn, grafikajn formojn, kaj tipografion kiu estis ofte integrita en la arton.
Kiel dizajnistoj, kiuj laboras en la reto, toon-titoloj povas instrui al ni multe pri kiel transdoni la personecon de marko, fari unuan impreson kaj starigi atendojn pri ies sperto uzante produkton aŭ retejon. Ni povas lerni de la teknikoj de la artistoj por krei efikajn standardojn, landpaĝajn kapojn, kaj eĉ bonajn malnovajn ŝprucekranojn. Toon Titolo Tipografio Bildstriaj titolkartoj montras kiel kunfandi tipon kun bildoj donas la stampilon, kiun kaplinio aŭ heroo bezonas. Kun manpleno da tekstaj ombroj, tekstaj strekoj kaj transformaj lertaĵoj, moderna CSS permesas vin enigi tiun saman energion.
La Toon Teksta Titolo-Generatoro Dum la verkado de ĉi tiu artikolo, mi rimarkis, ke estus utile havi ilon por generi tekston stilitan kiel la karikaturaj titoloj, kiujn mi tiom amas. Do mi faris unu. My Toon Text Title Generator ebligas vin eksperimenti kun koloroj, strekoj kaj multoblaj tekstaj ombroj. Vi povas ĝustigi farboordon, apliki literinterspacon, antaŭrigardi vian tekston en elekto de specimenaj tiparoj, kaj poste kopii la generitan CSS rekte al via tondujo por uzi en projekto. Toon Titolo CSS Vi povas simple kopii-alglui la CSS kiun la Toon Text Title Generator provizas al vi. Sed ni rigardu pli proksime kion ĝi faras. Teksta ombro Rigardu la tipon en ĉi tiu titolo de la epizodo de Augie Doggie "Yuk-Yuk Duck", kun ĝiaj palaj flavaj literoj kaj malhela, malmola, kompensita ombro, kiu levas ĝin de la fono kaj kreas la iluzion de profundo.
Vi verŝajne jam scias, ke teksto-ombro akceptas kvar valorojn: (1) horizontala kaj (2) vertikala ofsetoj, (3) malklara, kaj (4) koloro kiu povas esti solida aŭ duontravidebla. Tiuj kompensaj valoroj povas esti pozitivaj aŭ negativaj, do mi povas reprodukti "Yuk-Yuk Duck" uzante malmolan ombron tiritan malsupren kaj dekstren: koloro: #f7f76d; teksto-ombro: 5px 5px 0 #1e1904;
Aliflanke, ĉi tiu titolo "Pint Giant" havas malsaman senton kun sia negativa duon-mola ombro: koloro: #c2a872; teksto-ombro: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Por aldoni kroman profundon kaj krei pli interesajn efikojn, mi povas tavoligi plurajn ombrojn. Por "Let's Duck Out", mi kombinas kvar ombrojn: la unua solida ombro kun negativa horizontala ofseto por levi la tekston de la fono, sekvita de iom post iom pli mildaj ombroj por krei malklaraĵon ĉirkaŭ ĝi: koloro: #6F4D80; teksto-ombro: -5px5px 0 #260e1e, /* Ombro 1 */ 0 0 15px #e9ce96, /* Ombro 2 */ 0 0 30px #e9ce96, /* Ombro 3 */ 0 0 30px #e9ce96; /* Ombro 4 */
Ĉi tiuj ombroj montras, ke uzi teksto-ombron ne temas nur pri kreado de lumaj efikoj, ĉar ili ankaŭ povas esti ornamaj kaj aldoni personecon. Teksta streko Multaj karikaturaj titolkartoj prezentas literojn kun aŭdaca konturo, kiu igas ilin elstari de la fono. Mi povas rekrei ĉi tiun efikon uzante tekststrekon. Dum longa tempo, ĉi tiu posedaĵo estis nur havebla per -webkit- prefikso, sed tio ankaŭ signifas ke ĝi nun estas subtenata tra modernaj retumiloj.
teksto-streko estas stenografio por du trajtoj. La unua, teksto-streko-larĝo, desegnas konturon ĉirkaŭ individuaj literoj, dum la dua, teksto-streko-koloro, kontrolas ĝian koloron. Por "Whatever Goes Pup", mi aldonis 4px-bluan strekon al la flava teksto: koloro: #eff0cd; -webkit-text-stroke: 4px #7890b5; teksto-streko: 4px #7890b5;
Batoj povas esti speciale utilaj kiam ili estas kombinitaj kun ombroj, do por "Kreskante, Kreskante, For," mi aldonis maldikan 3px-strekon al apenaŭ neklara 1px-ombro por krei ĉi tiun tridimensian tekstan efikon: koloro: #fbb999; teksto-ombro: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; teksto-streko: 3px #984336;
Farbo-Ordo Uzado de teksto-streko ne ĉiam produktas la atendatan rezulton, precipe kun pli maldikaj literoj kaj pli dikaj strekoj, ĉar defaŭlte la retumilo desegnas strekon super la plenigaĵo. Bedaŭrinde, CSS ankoraŭ ne permesas al mi ĝustigi streklokigon kiel mi ofte faras en Sketch. Tamen, la farbo-orda posedaĵo havas valorojn, kiuj permesas al mi meti la strekon malantaŭ, prefere ol antaŭ la plenigaĵo.
farbo-ordo: streko pentras la strekon unue, poste la plenigaĵon, dum farbo-ordo: plenigo faras la malon: koloro: #fbb999; farbo-ordo: plenigi; teksto-ombro: 3px 5px 1px #5160b1; teksto-streko-koloro:#984336; teksto-streko-larĝo: 3px;
Efika streko tenas literojn legeblaj, aldonas pezon, kaj - kiam kombinite kun ombroj kaj farbo-ordo - donas platan tekston realan ĉeeston. Fonoj Ene de Teksto Multaj karikaturaj titolkartoj preterpasas ebenan koloron aldonante teksturon, gradientojn aŭ ilustritan detalon al la surskribo. Kelkfoje tio estas teksturo, alifoje ĝi povus esti gradiento kun subtila tona ŝanĝo. En la reto, mi povas rekrei ĉi tiun efikon uzante fonbildon aŭ gradienton malantaŭ la teksto, kaj poste tranĉante ĝin al la formo de la literoj. Ĉi tio dependas de du trajtoj kunlaborantaj: background-clip: teksto kaj text-fill-color: travidebla.
Unue, mi aplikas fonon malantaŭ la teksto. Ĉi tio povas esti bitmapo aŭ vektora bildo aŭ CSS-gradiento. Por ĉi tiu ekzemplo de la Quick Draw McGraw-epizodo "Baba Bait", la titolteksto inkluzivas subtilan supro-malsupran gradienton de mallumo al lumo: fono: lineara-gradiento (0deg, #667b6a, #1d271a);
Poste, mi tranĉas tiun fonon al la glifoj kaj igas la tekston travidebla por ke la fono montru: -webkit-background-clip: teksto; -webkit-text-fill-color: travidebla;
Kun nur tiuj du linioj, la fono ne plu estas pentrita malantaŭ la teksto; anstataŭe, ĝi estas pentrita ene de ĝi. Ĉi tiu tekniko funkcias precipe bone kiam kombinita kun strekoj kaj ombroj. Tondita gradiento provizas la surskribon kun koloro kaj teksturo, streko tenas ĝiajn randojn akraj, kaj ombro levas ĝin de la fono. Kune ili rekreas la tavoligitan aspekton de mane pentritaj titolkartoj uzante nenion pli ol iom da CSS. Kiel ĉiam, provu zorgeme tonditan tekston, ĉar retumiloj foje povas influi ombrojn kaj bildigon. Divido de Teksto en Individuajn Signojn Foje mi ne volas stiligi tutan vorton aŭ titolon. Mi volas stiligi individuajn literojn — por puŝi karakteron al loko, doni al unu glifo plian pezon aŭ vigligi kelkajn literojn sendepende. En simpla HTML kaj CSS, ekzistas nur unu fidinda maniero fari tion: envolvi ĉiun signon en sia propra span elemento. Mi povus fari tion permane, sed tio estus delikata, malfacile konservebla, kaj rapide disfalus kiam kopiŝanĝoj. Anstataŭe, kiam mi bezonas po-leteran kontrolon, mi uzas tekstdividan bibliotekon kiel splt.js (kvankam aliaj solvoj disponeblas). Ĉi tio prenas tekstan nodon kaj aŭtomate envolvas vortojn aŭ signojn, donante al mi kromajn hokojn por animi kaj stiligi sen fuŝi mian markadon. Ĝi estas aliro, kiu tenas mian HTML-on legebla kaj semantika, dum ĝi donas al mi la fajnan kontrolon, kiun mi bezonas por rekrei la neegalan, karakteran tipografion, kiun vi vidas en klasikaj bildstriaj titolkartoj. Tamen, ĉi tiu aliro venas kunalireblaj avertoj, ĉar la plej multaj ekranlegiloj legas tekstajn nodojn en ordo. Do ĉi tio:
Hum Dolĉa Zumo
... legas kiel vi atendus: Hum Dolĉa Hum
Sed ĉi tio:
H u m
... povas esti interpretita malsame depende de la retumilo kaj ekranlegilo. Iuj kunligas la literojn kaj legos la vortojn ĝuste. Aliaj povas paŭzi inter literoj, kio en plej malbona kazo povus soni kiel: "H..." "U..." "M..."
Bedaŭrinde, iuj disdividaj solvoj ne liveras ĉiam alireblan rezulton, do mi skribis mian propran tekstdividilon, splinter.js, kiu estas nuntempe en beta. Transformado de Individuaj Leteroj Por aktivigi mian Toon Text Splitter, mi aldonas datuman atributon al la elemento, kiun mi volas dividi:
Zumo Dolĉa Zumado
Unue, mia skripto apartigas ĉiun vorton en individuajn literojn kaj envolvas ilin en span elemento kun klasaj kaj ARIA-atributoj aplikataj:
La skripto tiam prenas la komencan enhavon de la dividita elemento kaj aldonas ĝin kiel aria atributo por helpi konservi alireblecon:
Kun tiuj klasaj atributoj aplikitaj, mi tiam povas stiligi individuajn signojn laŭ mia elekto.
Ekzemple, por "Hum Sweet Hum", mi volas reprodukti kiel ĝiaj literoj moviĝas for de la bazlinio. Post uzi mian Toon Text Splitter, mi aplikis kvar malsamajn tradukajn valorojn uzante plurajn :nth-child elektilojn por krei duonhazardan aspekton: /* 4-a, 8-a, 12-a... */ .toon-char:nth-child(4n) { traduki: 0 -8px; } /* 1-a, 5-a, 9-a... */ .toon-char:nth-child(4n+1) { traduki: 0 -4px; } /* 2-a, 6-a, 10-a... */ .toon-char:nth-child(4n+2) { traduki: 0 4px; } /* 3-a, 7-a, 11-a... */ .toon-char:nth-child(4n+3) { traduki: 0 8px; }
Sed traduki estas nur unu propraĵo, kiun mi povas uzi por transformi mian tekston.
Mi ankaŭ povus turni tiujn individuajn signojn por eĉ pli kaosa aspekto: /* 4-a, 8-a, 12-a... */ .toon-line .toon-char:nth-child (4n) { turni: -4deg; } /* 1-a, 5-a, 9-a... */ .toon-char:nth-child (4n+1) { turni: -8deg; } /* 2-a, 6-a, 10-a... */ .toon-char:nth-child (4n+2) { turni: 4deg; } /* 3-a, 7-a, 11-a... */ .toon-char:nth-child (4n+3) { turni: 8deg; }
Sed traduki estas nur unu propraĵo, kiun mi povas uzi por transformi mian tekston. Mi ankaŭ povus turni tiujn individuajn signojn por eĉ pli kaosa aspekto: /* 4-a, 8-a, 12-a... */ .toon-line .toon-char:nth-child(4n) { turni: -4deg; }
/* 1-a, 5-a, 9-a... */ .toon-char:nth-child (4n+1) { turni: -8deg; }
/* 2-a, 6-a, 10-a... */ .toon-char:nth-child (4n+2) { turni: 4deg; }
/* 3-a, 7-a, 11-a... */ .toon-char:nth-child (4n+3) { turni: 8deg; }
Kaj, kompreneble, mi povus aldoni kuraĝigojn por skui tiujn karakterojn kaj vivigi miajn tekstajn titolojn. Unue, mi kreis ŝlosilframan animacion, kiu turnas la signojn:
@keyframes jiggle { 0%, 100% { transform: turni(var(--bazo-rotacii, 0deg)); } 25% { transform: turni(kalko(var(--bazo-rotacii, 0°) + 3°)); } 50% { transform: turni(calc(var(--bazo-rotacii, 0deg) - 2deg)); } 75% { transform: turni(calc(var(--bazo-rotacii, 0°) + 1°)); } }
Antaŭ apliki ĝin al la span elementoj kreitaj de mia Toon Text Splitter: .toon-char { animacio: jiggle 3s senfina facileco-en-el; transform-origin: centra fundo; }
Kaj finfine, fiksante la rotacian kvanton kaj prokraston antaŭ ol ĉiu karaktero komencas skui: .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) { animacio-prokrasto: 0.1s; } .toon-char:nth-child (4n+1) { animacio-prokrasto: 0.3s; } .toon-char:nth-child (4n+2) { animacio-prokrasto: 0.5s; } .toon-char:nth-child (4n+3) { animacio-prokrasto: 0.7s; }
Unu Kadro Por Fari Impreson Bildstriaj titolartistoj havis unu kadron por fari impreson, kaj ilia tipografio estis same grava kiel la arto kiun ili pentris. La sama estas vera en la reto. Bone desegnita kaplinio aŭ herooareo bezonas klarecon, karakteron kaj fidon — ne simple paliĝintan plenlarĝan fonbildon. Kun kelkaj zorge elektitaj CSS-ecoj - ombroj, strekoj, tonditaj fonoj kaj iom da modera animacio - ni povas rekrei tiun saman efikon. Mi amas toon-tekston ne ĉar mi estas nostalgia, sed ĉar ĝia dezajno estas intencita. Faru intencajn elektojn, kaj lasu iom da teksta tipografio aldoni punon al viaj dezajnoj.
