Piştî qedandina projeyek ku ji min re lazim bû ku ez her tiştê ku ez dikarim di derheqê anîmasyonên CSS û SVG de fêr bibim, min dest bi nivîsandina vê rêzefîlmê li ser Anîmasyonên Smashing û "Çawa Karîkatorên Klasîk Inspire CSS Modern dikin." Ji bo ku vê salê biqedînim, ez dixwazim nîşanî we bidim ka meriv çawa CSS-ya nûjen bikar tîne da ku wê hêmanê biafirîne ku Sernavên Toon ew qas bandorker dike: tîpografiya wan. Sernav Design Artwork Di serdemên bêdeng ên salên 1920-an û destpêka salên 30-an de, tîpografiya qerta sernavê ya fîlimek hewayek diafirand, dîmen çêkir, û celebê fîlimê ku ji bo dîtina wan pere dabûn bîra temaşevanan.
Kartên sernavê karîkaturan di heman demê de marqe, rewişt, û mîhengkirina dîmenê jî bûn, hemî di yek de bûn. Di salên destpêkê de, dema ku budceyên stûdyoyê yên mezin mezintir bûn, van kartên sernavê bi gelemperî nîgarkêş û rengîn bûn.
Lê dema ku televîzyon di salên 1950-an de geş bû, budçe daket, û kartên ku ji hêla hunermendên mîna Lawrence "Art" Goble ve hatî çêkirin zimanek dîtbarî ya nû pejirand, bêtir grafîkî, stîlîzekirî û kêmtir tevlihev bû. Nîşe: Lawrence "Huner" Goble yek ji lehengên anîmasyona navîn-sedsala Amerîkî ye ku pir caran têne paşguh kirin. Ew di serî de ji bo Hanna-Barbera di salên wê yên herî bibandor ên salên 1950 û 1960-an de xebitî. Goble ne anîmatorek karakter bû. Rola wî afirandina atmosferê bû, ji ber vê yekê wî jîngeh ji bo The Flintstones, Huckleberry Hound, Quick Draw McGraw, û Yogi Bear, û her weha qertên sernavê yên vekirinê yên ku deng vedide sêwirand. Kartên wî yên sernavê, ku tabloyên bi logoyek pêvekirî vedihewîne, alîkariya diyarkirina dîmena îkonîk a Hanna-Barbera kir. Karê hunerî ya Goble ji bo karakterên wekî Quick Draw McGraw û Yogi Bear li ser ekranên TV-yên piçûktir bandor bû. Li şûna ku dîmenek ji karîkaturê ji nû ve çêbike, wî bala xwe da ser pêşkêşkirina ramanek yekane, xurt - bi gelemperî bi rengekî - ku cewhera wê girtiye. Di "Hirçê Buzzin" de, Yogî bi helîkopterê diqelişe. Ew di "Bear on a Picnic" de, selikek pic-a-nîkî di dest de vedigere, û ji bo "Prize Fight Fright" wî Yogi nivîsa sernavê qut dike.
Bi tevgerek hindik an jî qet tune ku meriv pê ve girêdayî be, çarçeweyên yekane yên Goble neçar ma ku hestek biafirîne, dîmen saz bike û çîrokek rave bike. Wan vê yekê bi karanîna rengên guncan, şeklên grafîkî, û tîpografiya ku bi gelemperî di nav karê hunerî de yekgirtî bû, kir.
Wekî sêwiranerên ku li ser tevneyê dixebitin, sernavên toon dikarin me hîn bikin ka meriv çawa kesayetiya marqeyekê radigihîne, bandora yekem çêdike, û hêviyên ji bo ezmûna kesek bi karanîna hilberek an malperek bikar tîne. Em dikarin ji teknîkên hunermendan fêr bibin ku pankartên bi bandor, sernavên rûpela zevî, û tewra ekranên spaş ên xweş ên xweş biafirînin. Tîpografiya Sernavê Toon Kartên sernavê karîkaturan destnîşan dikin ka çawa tevhevkirina celebê bi wêneyan re pêdiviya sernav an qehremanek hewce dike. CSS-ya nûjen bi çend siya nivîsê, lêdana nivîsê, û hîleyên veguheztinê re dihêle hûn heman enerjiyê bikar bînin.
The Toon Text Sernav Generator Di dema nivîsandina vê gotarê de, min fêm kir ku ew ê kêrhatî be ku amûrek ji bo hilberîna nivîsê ku mîna sernavên kartonên ku ez pir jê hez dikim hebe hebe. Ji ber vê yekê min yek çêkir. My Toon Text Title Generator dihêle hûn bi reng, lêdan, û çend sîberên nivîsê biceribînin. Hûn dikarin rêza boyaxkirinê rast bikin, valahiya tîpan bicîh bikin, nivîsa xwe di hilbijarkek tîpên nimûne de pêşdîtin bikin, û dûv re CSS-ya hatî hilberandin rasterast li clipboard-a xwe kopî bikin da ku di projeyekê de bikar bînin. Toon Sernav CSS Hûn dikarin bi tenê CSS-ya ku Toon Text Title Generator ji we re peyda dike kopî-pêç bikin. Lê bila em ji nêz ve li tiştê ku dike binêre. Siya nivîsê Li celebê vê sernavê ji beşa Augie Doggie "Yuk-Yuk Duck" binihêrin, bi tîpên xwe yên zer ên zer û siya tarî, hişk, veqetandî ku wê ji paşverûyê radike û xeyala kûrahiyê diafirîne.
Hûn belkî jixwe dizanin ku text-siya çar nirxan qebûl dike: (1) veqetandinên horizontî û (2) veqetandî, (3) nezelal, û (4) rengek ku dikare zexm an nîv-şefaf be. Van nirxên jihevkirî dikarin erênî an neyînî bin, ji ber vê yekê ez dikarim "Yuk-Yuk Duck" bi karanîna siyek hişk a dakêşandî û li rastê dubare bikim: color: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Ji hêla din ve, ev sernavê "Pint Giant" bi siya xweya nîv-nerm ya neyînî hestek cûda heye: color: #c2a872; text-siya: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Ji bo ku kûrahiyek zêde lê zêde bikim û bandorên balkêştir biafirînim, ez dikarim çend sîwanan bigirim. Ji bo "Let's Duck Out," ez çar siyan li hev digirim: ya yekem siyek zexm bi veqetandek negatîf a horîzontal re da ku nivîsê ji paşpirtikê rake, li dûv wê jî siyên hêdî hêdî nermtir dibin da ku li dora wê tevnek çêbike: color: #6F4D80; text-siya: -5 px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Van siyan destnîşan dikin ku karanîna nivîs-siya ne tenê çêkirina bandorên ronahiyê ye, ji ber ku ew dikarin xemilandin û kesayetiyê jî zêde bikin. Text Stroke Gelek qertên sernavê kartonan tîpên bi xêzek qelew vedihewînin ku wan ji paşperdeyê derdixe. Ez dikarim vê bandorê bi karanîna text-stroke ji nû ve biafirînim. Demek dirêj, ev taybetmendî tenê bi pêşgirek -webkit- peyda bû, lê ev jî tê vê wateyê ku ew naha di gerokên nûjen de tê piştgirî kirin.
text-stroke kurteya du taybetmendiyan e. Ya yekem, text-stroke-width, xêzek li dora tîpên kesane xêz dike, lê ya duyemîn, text-stroke-reng, rengê xwe kontrol dike. Ji bo "Çi dibe bila bibe, min 4 px lêdanek şîn li nivîsa zer zêde kir: color: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Dema ku lêdan bi sîwanan re werin berhev kirin bi taybetî dikarin bikêrhatî bin, ji ber vê yekê ji bo "Gorebûn, mezinbûn, çûyîn," min lêdanek 3px zirav li siyayek 1px ya ku bi zorê nediyar bû zêde kir da ku vê bandora nivîsê ya sê-alî biafirînim: color: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Paint Order Bikaranîna lêdana nivîsê her gav encamek çaverê dernakeve, nemaze bi tîpên ziravtir û lêdanên stûrtir, ji ber ku ji hêla xwerû ve gerok derbeyek li ser dagirtinê dikişîne. Mixabin, CSS hîn jî destûr nade ku ez cîhê lêdanê rast bikim wekî ku ez pir caran di Sketch de dikim. Lêbelê, taybetmendiya nîzama boyaxkirinê xwediyê nirxan e ku dihêle ku ez lêdanê li paş, ne li pêş, tijî bikim.
boyax-order: stroke pêşî lêdanê boyax dike, paşê tijîkirinê, lê rêza boyaxkirinê: fill berevajî dike: color: #fbb999; paint-order: dagirin; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Derbeyek bi bandor tîpan xwendî dihêle, giraniyê lê zêde dike, û - dema ku bi sîwan û rêzika boyaxkirinê re were hev kirin - nivîsa rast peyda dike. Paşnavên Hundirê Nivîsê Gelek qertên sernavê karîkaturê bi lêzêdekirina tevnvîs, xêzkirin, an hûrguliyên xêzkirî li tîpan wêdetir ji rengê xwerû diçin. Carinan ew tevnek e, carên din dibe ku ew pileyek bi guheztinek tonal a nazik be. Li ser tevneyê, ez dikarim vê bandorê bi karanîna wêneyek paşxanê an gradient li pişt nivîsê ji nû ve biafirînim, û dûv re wê li ser şeklê tîpan bişkînim. Ev xwe dispêre du taybetmendiyên ku bi hev re dixebitin: paşnav-klîp: nivîs û nivîs-tije-reng: zelal.
Pêşîn, ez paşnavek li pişt nivîsê bicîh dikim. Ev dikare bibe bitmap an wêneyek vektor an gradientek CSS. Ji bo vê nimûneyê ji beşa Quick Draw McGraw "Baba Bait", nivîsa sernavê ji tarî berbi ronahiyê deverek jorîn-binî ya nazik vedihewîne: paşxane: linear-gradient(0deg, #667b6a, #1d271a);
Dûv re, ez wê paşxanê li glyphan dikişînim û nivîsê zelal dikim da ku paşnav bi navgîniya xwe nîşan bide: -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Bi tenê bi wan her du rêzan, paşxane êdî li pişt nivîsê nayê boyaxkirin; li şûna wê, di hundurê wê de hatî boyaxkirin. Ev teknîkî bi taybetî baş dixebite dema ku bi lêdan û siyayan re were hev kirin. Pîvanek qutkirî tîpan bi reng û nîgarê peyda dike, derbek keviyên wê tûj digire, û siyek wê ji paşperdeyê bilind dike. Bi hev re, ew nihêrîna qatkirî ya qertên sernavê yên ku bi destan hatine boyaxkirin ji nû ve bi kar tînin ji bilî CSS-yek piçûktir. Mîna her gav, nivîsa qutkirî bi baldarî ceribandin, ji ber ku qursên gerokê carinan dikarin bandorê li siya û renderkirinê bikin. Dabeşkirina Nivîsar li Karakterên Kesane Carinan ez naxwazim peyvek an sernivîsek tevahî şêwaz bikim. Ez dixwazim tîpên takekesî şêwaz bikim - karakterek li cîhê xwe bihejînim, giraniyek zêde bidim yek lîfekê, an jî çend tîpan serbixwe zindî bikim. Di HTML û CSS-ya sade de, tenê rêyek pêbawer heye ku meriv wiya bike: her karakterê di hêmana xweya span de bipêçin. Min dikaribû wiya bi destan bikim, lê ew ê zirav be, domandina wê dijwar be, û gava ku kopî biguhezîne zû ji hev belav dibe. Di şûna wê de, gava ku ez hewceyê kontrola her nameyekê hewce dikim, ez pirtûkxaneyek dabeşkirina nivîsê wekî splt.js bikar tînim (her çend çareseriyên din hene). Ev girêkek nivîsê digire û bixweber peyvan an karakteran dipêçe, bêyî ku nîşankirina min xera bike, çengên zêde dide min da ku ez bijînim û şêwaz bikim. Ew nêzîkatiyek e ku HTML-ya min xwendin û semantîk dihêle, di heman demê de kontrola hûrgilî dide min ku ez hewce dikim ku tîpografiya nehevseng, karakterîstîkî ya ku hûn di qertên sernavên kartonên klasîk de dibînin ji nû ve biafirînim. Lêbelê, ev nêzîkatî bi xwe re têhişyariyên gihîştinê, ji ber ku piraniya xwendevanên ekranê girêkên nivîsê bi rêz dixwînin. Ji ber vê yekê ev:
Hum Sweet Hum
... wekî ku hûn hêvî dikin dixwîne: Hum Sweet Hum
Lê ev:
H û m
... dikare li gorî gerok û xwendevana ekranê cûda were şîrove kirin. Hin dê tîpan li hev bixin û peyvan rast bixwînin. Dibe ku yên din di navbera tîpan de bisekinin, ku di senaryoya herî xirab de dibe ku mîna: “H…” “U…” “M…”
Mixabin, hin çareseriyên dabeşkirinê encamek her gav gihîştî nadin, ji ber vê yekê min dabeşkera nivîsa xwe, splinter.js, ku niha di betayê de ye, nivîsandiye. Veguherîna Nameyên Kesane Ji bo çalakkirina Toon Text Splitter, ez taybetmendiyek daneyê li hêmana ku ez dixwazim dabeş bikim zêde dikim:
Hum Sweet Hum
Pêşîn, nivîsara min her peyvê di nav tîpên ferdî de vediqetîne û wan di hêmanek span de bi taybetmendiyên çîn û ARIA ve hatî sepandin:
Dûv re skrîpt naveroka destpêkê ya hêmana parçebûnê digire û wê wekî taybetmendiyek aria lê zêde dike da ku alîkariya domandina gihîştinê bike:
Ligel van taybetmendiyên polê hatine sepandin, ez hingê dikarim karakterên kesane yên ku ez hildibijêrim şêwaz bikim.
Mînakî, ji bo "Hum Sweet Hum," ez dixwazim dubare bikim ka tîpên wê çawa ji rêza bingehîn dûr dikevin. Piştî ku Splittera xweya Toon Text bikar anî, min çar nirxên werger ên cihêreng bi karanîna çend hilbijêrên :nth-zarok sepand da ku dîmenek nîv-random biafirîne: /* 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; }
Lê werger tenê taybetmendiyek e ku ez dikarim bikar bînim da ku nivîsara xwe ya tonê veguherînim.
Di heman demê de ez dikarim wan karakterên takekesî ji bo xuyangek hîn kaotîk bizivirim: /* 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; }
Lê werger tenê taybetmendiyek e ku ez dikarim bikar bînim da ku nivîsara xwe ya tonê veguherînim. Di heman demê de ez dikarim wan karakterên takekesî ji bo xuyangek hîn kaotîk bizivirim: /* 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; }
Û, bê guman, min dikaribû anîmasyon lê zêde bikim da ku wan karakteran bihejînim û sernavên şêwaza nivîsa xwe ya tone zindî bikim. Pêşîn, min anîmasyonek keyframe çêkir ku karakteran dizivirîne:
@keyframes jiggle { 0%, 100% { veguherîn: zivirandin(var(--base-zivirandin, 0deg)); } 25% { veguherandin: zivirandin(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { veguherîn: zivirandin(calc(var(--base-zivirandin, 0deg) - 2deg)); } 75% { veguherîn: zivirandin(calc(var(--bingeh-zivirandin, 0deg) + 1deg)); } }
Berî ku wê li ser hêmanên span-ê yên ku ji hêla Toon Text Splitter-a min ve hatî afirandin, bicîh bikin: .toon-char { anîmasyon: jiggle 3s infinite ease-in-out; transform-origin: navenda bottom; }
Û di dawiyê de, danîna mîqdara zivirandinê û dereng berî ku her karakter dest bi lêdanê bike: .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) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animation-delay: 0.3s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
Yek Çarçoveyek Ji bo ku bandorek çêbikin Hunermendên sernavê karîkaturê yek çarçoveyek hebûn ku bandorek çêbikin, û tîpografiya wan bi qasî hunera ku wan xêz kiribûn girîng bû. Heman tişt li ser webê jî rast e. Sernivîsek an qehremanek baş-dîzaynkirîdever pêdivî bi zelalî, karakter û pêbaweriyê heye - ne bi tenê wêneyek paşperdeya tev-fireh a zirav. Bi çend taybetmendiyên CSS-ê yên ku bi baldarî hatine bijartin - sîwan, lêdan, paşnavên qutkirî, û hin anîmasyonek ragirtî - em dikarin heman bandorê ji nû ve biafirînin. Ez ji nivîsa toonê hez dikim ne ji ber ku ez nostaljîk im, lê ji ber ku sêwirana wê bi mebest e. Hilbijartinên bi zanebûn bikin, û bihêlin ku tîpek nivîsê ya piçûk li sêwiranên we zêde bike.
