Lẹhin ipari iṣẹ akanṣe kan ti o nilo fun mi lati kọ ohun gbogbo ti Mo le nipa CSS ati awọn ohun idanilaraya SVG, Mo bẹrẹ kikọ jara yii nipa Awọn ohun idanilaraya Smashing ati “Bawo ni Awọn Cartoons Alailẹgbẹ ṣe Inspire Modern CSS.” Lati yika ni ọdun yii, Mo fẹ lati fihan ọ bi o ṣe le lo CSS ode oni lati ṣẹda nkan yẹn ti o jẹ ki Awọn akọle Toon ni ipa pupọ: iwe kikọ wọn. Title ise ona Design Ni akoko ipalọlọ ti awọn ọdun 1920 ati ibẹrẹ '30s, iwe-kikọ ti kaadi akọle fiimu ṣẹda iṣesi kan, ṣeto aaye naa, o si leti awọn olugbo ti iru fiimu ti wọn yoo sanwo lati rii.
Awọn kaadi akọle cartoon tun jẹ iyasọtọ, iṣesi, ati iṣeto-iṣẹlẹ, gbogbo wọn yiyi sinu ọkan. Ni awọn ọdun ibẹrẹ, nigbati awọn isuna ile-iṣere pataki tobi, awọn kaadi akọle wọnyi nigbagbogbo jẹ alaworan ati alaworan.
Ṣugbọn nigbati tẹlifisiọnu ariwo lakoko awọn ọdun 1950, awọn isuna-owo silẹ, ati awọn kaadi apẹrẹ nipasẹ awọn oṣere bii Lawrence “Art” Goble gba ede wiwo tuntun kan, di ayaworan diẹ sii, aṣa, ati pe o kere si. Akiyesi: Lawrence “Aworan” Goble jẹ ọkan ninu awọn akikanju igbagbogbo aṣemáṣe ti ere idaraya Amẹrika aarin-ọdunrun. O ṣiṣẹ nipataki fun Hanna-Barbera lakoko awọn ọdun ti o ni ipa julọ ti awọn ọdun 1950 ati 1960. Goble kii ṣe ere idaraya ohun kikọ. Ipa rẹ ni lati ṣẹda bugbamu, nitorinaa o ṣe apẹrẹ awọn agbegbe fun The Flintstones, Huckleberry Hound, Quick Draw McGraw, ati Yogi Bear, ati awọn kaadi akọle ṣiṣi ti o ṣeto ohun orin. Awọn kaadi akọle rẹ, ti o nfihan awọn aworan pẹlu aami ti o bò, ṣe iranlọwọ lati ṣalaye oju-ara ti Hanna-Barbera. Iṣẹ ọnà Goble fun awọn ohun kikọ bii Quick Draw McGraw ati Yogi Bear jẹ doko lori awọn iboju TV kekere. Dipo ki o tun ṣe atunṣe lati inu aworan efe, o dojukọ lori iṣafihan ẹyọkan kan, imọran ti o lagbara - nigbagbogbo ni ojiji biribiri - ti o gba agbara rẹ. Ni "The Buzzin' Bear," Yogi buzzes nipa ninu ọkọ ofurufu kan. O bounces kuro, pic-a-nic agbọn ni ọwọ, ni “Bear on Picnic,” ati fun “Prize Fight Fright,” awọn apoti akọle Yogi.
Pẹlu diẹ tabi ko si išipopada lati gbẹkẹle, awọn fireemu ẹyọkan Goble ni lati ṣẹda iṣesi kan, ṣeto aaye naa, ati ṣapejuwe itan kan. Wọn ṣe eyi nipa lilo awọn awọ alapin, awọn apẹrẹ ayaworan, ati iwe afọwọkọ ti a ṣepọ nigbagbogbo sinu iṣẹ ọna.
Gẹgẹbi awọn apẹẹrẹ ti n ṣiṣẹ lori oju opo wẹẹbu, awọn akọle toon le kọ wa lọpọlọpọ nipa bi a ṣe le ṣe afihan ihuwasi ami iyasọtọ kan, ṣe ifihan akọkọ, ati ṣeto awọn ireti fun iriri ẹnikan nipa lilo ọja tabi oju opo wẹẹbu kan. A le kọ ẹkọ lati awọn imọ-ẹrọ awọn oṣere lati ṣẹda awọn asia ti o munadoko, awọn akọle oju-iwe ibalẹ, ati paapaa awọn iboju asesejade aṣa ol ti o dara. Toon Title Typography Awọn kaadi akọle cartoon ṣe afihan bii iru iṣakojọpọ pẹlu aworan n ṣe jiṣẹ punch akọsori kan tabi awọn aini akọni. Pẹlu ọwọ diẹ ti ojiji-ọrọ, ikọ-ọrọ, ati awọn ẹtan yi pada, CSS ode oni jẹ ki o tẹ sinu agbara kanna.
The Toon Text Title monomono Ni apakan nipasẹ kikọ nkan yii, Mo rii pe yoo wulo lati ni ohun elo kan fun ṣiṣẹda ọrọ ti ara bi awọn akọle efe ti Mo nifẹ pupọ. Nitorina ni mo ṣe ọkan. Generator Akọle Ọrọ Toon Mi jẹ ki o ṣe idanwo pẹlu awọn awọ, awọn ọpọlọ, ati awọn ojiji ọrọ pupọ. O le ṣatunṣe aṣẹ kikun, lo aye ti lẹta, ṣe awotẹlẹ ọrọ rẹ ni yiyan awọn nkọwe apẹẹrẹ, lẹhinna daakọ CSS ti ipilẹṣẹ taara si agekuru agekuru rẹ lati lo ninu iṣẹ akanṣe kan. Toon Title CSS O le nirọrun daakọ-lẹẹmọ CSS ti Olupilẹṣẹ Akọle Akọle Toon pese fun ọ. Ṣugbọn jẹ ki a wo sunmọ ohun ti o ṣe. Ojiji ọrọ Wo iru ninu akọle yii lati iṣẹlẹ ti Augie Doggie "Yuk-Yuk Duck," pẹlu awọn lẹta awọ ofeefee ti o ṣokunkun ati dudu, lile, ojiji aiṣedeede ti o gbe e kuro ni ẹhin ati ṣẹda itanjẹ ti ijinle.
O ṣee ṣe pe o ti mọ tẹlẹ pe ojiji-ọrọ gba awọn iye mẹrin: (1) petele ati (2) awọn aiṣedeede inaro, (3) blur, ati (4) awọ ti o le jẹ ri to tabi ologbele-sihin. Awọn iye aiṣedeede yẹn le jẹ rere tabi odi, nitorinaa MO le ṣe ẹda “Yuk-Yuk Duck” ni lilo ojiji lile ti o fa si isalẹ ati si ọtun: awọ: # f7f76d; ojiji-ọrọ: 5px 5px 0 # 1e1904;
Ni apa keji, akọle “Pint Giant” yii ni rilara ti o yatọ pẹlu ojiji ologbele-asọ odi rẹ: awọ: # c2a872; ojiji-ọrọ: -7px 5px 0 #b100e, 0 -5px 10px # 546c6f;
Lati ṣafikun ijinle afikun ati ṣẹda awọn ipa ti o nifẹ diẹ sii, Mo le fẹlẹfẹlẹ awọn ojiji pupọ. Fun "Jẹ ki a pepeye Jade," Mo darapọ awọn ojiji mẹrin: akọkọ ojiji ti o lagbara pẹlu aiṣedeede petele odi lati gbe ọrọ soke si abẹlẹ, atẹle nipa awọn ojiji rirọ ni ilọsiwaju lati ṣẹda blur ni ayika rẹ: awọ: # 6F4D80; ojiji-ọrọ: -5px5px 0 #260e1e, /* Ojiji 1 */ 0 0 15px #e9ce96, /* Ojiji 2 */ 0 0 30px #e9ce96, /* Ojiji 3 */ 0 0 30px # e9ce96; /* Ojiji 4 */
Awọn ojiji wọnyi fihan pe lilo ọrọ-ojiji kii ṣe nipa ṣiṣẹda awọn ipa ina nikan, nitori wọn tun le jẹ ohun ọṣọ ati ṣafikun eniyan. Ọrọ Stroke Ọpọlọpọ awọn kaadi akọle cartoon ṣe ẹya awọn lẹta pẹlu itọka igboya ti o jẹ ki wọn jade lati ẹhin. Mo le ṣe atunṣe ipa yii nipa lilo ọrọ-ọpọlọ. Fun igba pipẹ, ohun-ini yii wa nikan nipasẹ -webkit- ìpele, ṣugbọn iyẹn tun tumọ si pe o ti ni atilẹyin ni bayi kọja awọn aṣawakiri ode oni.
ọrọ-ọpọlọ jẹ kukuru fun awọn ohun-ini meji. Ni igba akọkọ ti, ọrọ-stroke-iwọn, fa a elegbegbe ni ayika olukuluku awọn lẹta, nigba ti awọn keji, ọrọ-stroke-awọ, akoso awọn oniwe-awọ. Fun “Ohunkohun ti Lọ Pup,” Mo ṣafikun ọpọlọ buluu 4px si ọrọ ofeefee: awọ: #ef0cd; -webkit-ọrọ-ọpọlọ: 4px # 7890b5; ọrọ-ọpọlọ: 4px # 7890b5;
Awọn ikọlu le wulo paapaa nigbati wọn ba ni idapo pẹlu awọn ojiji, nitorinaa fun “Dagbasoke, Dagba, Lọ,” Mo ṣafikun ikọlu 3px tinrin si ojiji 1px ti o ni aiṣan lati ṣẹda ipa ọrọ onisẹpo mẹta yii: awọ: # fbb999; ojiji ọrọ: 3px 5px 1px # 5160b1; -webkit-ọrọ-ọpọlọ: 3px # 984336; ọrọ-ọpọlọ: 3px # 984336;
Kun Bere fun Lilo ọrọ-ọpọlọ ko nigbagbogbo gbejade abajade ti o nireti, paapaa pẹlu awọn lẹta tinrin ati awọn ikọlu ti o nipọn, nitori nipa aiyipada aṣawakiri naa fa ikọlu lori kikun. Ibanujẹ, CSS ko tun gba mi laaye lati ṣatunṣe ipo ikọlu bi MO ṣe nigbagbogbo ni Sketch. Sibẹsibẹ, ohun-ini aṣẹ kikun ni awọn iye ti o gba mi laaye lati gbe ikọlu lẹhin, ju ni iwaju ti, kun.
aṣẹ-awọ: ọpọlọ kun ọpọlọ ni akọkọ, lẹhinna kun, lakoko ti o jẹ aṣẹ kikun: kikun ṣe idakeji: awọ: # fbb999; kun-ibere: kun; ojiji ọrọ: 3px 5px 1px # 5160b1; ọrọ-ọpọlọ-awọ: # 984336; ibú ọrọ-stroke: 3px;
Ẹsẹ ti o munadoko jẹ ki awọn lẹta le ṣee ka, ṣafikun iwuwo, ati - nigbati a ba ni idapo pẹlu awọn ojiji ati aṣẹ kikun - yoo fun ọrọ alapin ni wiwa gidi. Backgrounds Inu Ọrọ Ọpọlọpọ awọn kaadi akọle cartoon lọ kọja awọ alapin nipa fifi sojurigindin, gradients, tabi awọn alaye alaworan si kikọ. Nigbakugba iyẹn jẹ awoara, awọn igba miiran o le jẹ gradient pẹlu iyipada tonal arekereke. Lori oju opo wẹẹbu, Mo le ṣe atunṣe ipa yii nipa lilo aworan abẹlẹ tabi gradient lẹhin ọrọ, ati lẹhinna gige rẹ si apẹrẹ awọn lẹta naa. Eyi da lori awọn ohun-ini meji ti n ṣiṣẹ papọ: agekuru abẹlẹ: ọrọ ati awọ-kikun ọrọ: sihin.
Ni akọkọ, Mo lo abẹlẹ lẹhin ọrọ naa. Eyi le jẹ bitmap tabi aworan fekito tabi gradient CSS kan. Fun apẹẹrẹ yii lati inu iṣẹlẹ Iyaworan McGraw Yiyara “Baba Bait,” ọrọ akọle pẹlu itusilẹ oke-isalẹ gradient lati dudu si ina: abẹlẹ: laini-gradient (0deg, # 667b6a, # 1d271a);
Nigbamii ti, Mo ge abẹlẹ yẹn si awọn glyphs ati jẹ ki ọrọ naa han gbangba ki abẹlẹ fihan nipasẹ: -webkit-background-agekuru: ọrọ; -webkit-text-fill-awọ: sihin;
Pẹlu awọn ila meji yẹn nikan, abẹlẹ ko tun ya lẹhin ọrọ naa; dipo, o ti ya ninu rẹ. Ilana yii ṣiṣẹ daradara daradara nigbati o ba ni idapo pẹlu awọn iṣọn-ọpọlọ ati awọn ojiji. Gradient gige kan n pese awọn lẹta pẹlu awọ ati sojurigindin, ikọlu kan jẹ ki awọn egbegbe rẹ di didasilẹ, ati ojiji kan gbe e ga lati ẹhin. Papọ, wọn tun ṣe iwo siwa ti awọn kaadi akọle ti a fi ọwọ ṣe ni lilo ohunkohun diẹ sii ju CSS kekere kan. Gẹgẹbi nigbagbogbo, ṣe idanwo ọrọ gige ni pẹkipẹki, bi awọn aṣawakiri aṣawakiri le ni ipa nigbakan awọn ojiji ati ṣiṣe. Pipin Ọrọ Si Awọn kikọ Olukuluku Nigba miiran Emi ko fẹ lati ṣe ara gbogbo ọrọ tabi akọle. Mo fẹ lati ṣe ara awọn lẹta kọọkan - lati fi ohun kikọ silẹ si aye, fun glyph kan ni iwuwo afikun, tabi ṣe ere awọn lẹta diẹ ni ominira. Ni HTML ati CSS ti o rọrun, ọna ti o gbẹkẹle nikan lo wa lati ṣe bẹ: fi ipari si ohun kikọ kọọkan ni aaye akoko tirẹ. Mo le ṣe iyẹn pẹlu ọwọ, ṣugbọn iyẹn yoo jẹ ẹlẹgẹ, lile lati ṣetọju, ati pe yoo yara subu yato si nigbati ẹda ẹda ba yipada. Dipo, nigbati Mo nilo iṣakoso lẹta kọọkan, Mo lo iwe-ikawe-pipin bi splt.js (botilẹjẹpe awọn solusan miiran wa). Eyi n gba ipade ọrọ kan ati ki o yi awọn ọrọ tabi awọn kikọ silẹ laifọwọyi, fifun mi ni afikun awọn kio lati ṣe ere idaraya ati ara laisi idoti isamisi mi. O jẹ ọna ti o tọju kika HTML mi ati itumọ, lakoko ti o fun mi ni iṣakoso ti o dara ti Mo nilo lati tun ṣe aiṣedeede, iwe afọwọṣe ihuwasi ti o rii ninu awọn kaadi akọle ere ere Ayebaye. Sibẹsibẹ, ọna yii wa pẹluAyewo caveats, bi julọ iboju onkawe si ka ọrọ apa ni ibere. Nitorina eyi:
Hum Dun Hum
…ka bi o ṣe nireti: Hum Dun Hum
Ṣugbọn eyi:
H u m
…a le tumọ ni oriṣiriṣi da lori ẹrọ aṣawakiri ati oluka iboju. Diẹ ninu awọn yoo so awọn lẹta naa pọ ati ka awọn ọrọ naa ni deede. Awọn miiran le da duro laarin awọn lẹta, eyiti ninu oju iṣẹlẹ ti o buruju le dun bi: “H…” “U…” “M…”
Ibanujẹ, diẹ ninu awọn ojutu pipin ko ṣe jiṣẹ abajade wiwa nigbagbogbo, nitorinaa Mo ti kọ pipin ọrọ ti ara mi, splinter.js, eyiti o wa ni beta lọwọlọwọ. Yipada Awọn lẹta Olukuluku Lati muu Toon Text Splitter ṣiṣẹ, Mo ṣafikun ẹda data kan si ipin ti Mo fẹ pin:
Hum Sweet Hum
Ni akọkọ, iwe afọwọkọ mi ya ọrọ kọọkan si awọn lẹta kọọkan ati fi ipari si wọn ni ipin igba kan pẹlu kilasi ati awọn abuda ARIA ti a lo: H u m
Iwe afọwọkọ lẹhinna gba akoonu ibẹrẹ ti ipin pipin ati ṣafikun rẹ bi abuda aria lati ṣe iranlọwọ lati ṣetọju iraye si:
H u m
Pẹlu awọn abuda kilasi yẹn ti a lo, Mo le ṣe ara awọn ohun kikọ kọọkan bi MO ṣe yan.
Fun apẹẹrẹ, fun "Hum Sweet Hum," Mo fẹ lati tun ṣe bi awọn lẹta rẹ ṣe yipada kuro ni ipilẹ. Lẹhin lilo Toon Text Splitter mi, Mo lo awọn iye itumọ oriṣiriṣi mẹrin ni lilo ọpọlọpọ awọn yiyan: nth-ọmọ lati ṣẹda iwo ologbele-ID: /* 4th, 8th, 12th...*/ .toon-char:nth-ọmọ(4n) {tumọ: 0 -8px; } /* 1st, 5th, 9th...*/ .toon-char:nth-ọmọ(4n+1) {tumọ: 0 -4px; } /* keji, 6th, 10th...*/ .toon-char:nth-ọmọ(4n+2) { translate: 0 4px; } /* 3e, 7th, 11th...*/ .toon-char:nth-ọmọ(4n+3) {tumọ: 0 8px; }
Ṣugbọn itumọ jẹ ohun-ini kan ṣoṣo ti Mo le lo lati yi ọrọ toon mi pada.
Mo tun le yi awọn ohun kikọ kọọkan wọnyẹn fun iwo rudurudu paapaa diẹ sii: /* 4th, 8th, 12th...*/ .toon-ila .toon-char:nth-ọmọ (4n) {yi: -4deg; } /* 1st, 5th, 9th...*/ .toon-char: nth-ọmọ (4n+1) {yiyi: -8deg; } /* keji, 6th, 10th...*/ .toon-char: nth-ọmọ (4n+2) {yiyi: 4deg; } /* 3e, 7th, 11th...*/ .toon-char: nth-ọmọ (4n+3) {yiyi: 8deg; }
Ṣugbọn itumọ jẹ ohun-ini kan ṣoṣo ti Mo le lo lati yi ọrọ toon mi pada. Mo tun le yi awọn ohun kikọ kọọkan wọnyẹn fun iwo rudurudu paapaa diẹ sii: /* 4th, 8th, 12th...*/ .toon-line .toon-char:nth-ọmọ(4n) { yiyipo: -4deg; }
/* 1st, 5th, 9th...*/ .toon-char:nth-ọmọ(4n+1) { yiyipo: -8deg; }
/* keji, 6th, 10th...*/ .toon-char:nth-ọmọ(4n+2) { yiyi: 4deg; }
/* 3e, 7th, 11th...*/ .toon-char:nth-ọmọ(4n+3) { yiyi: 8deg; }
Ati pe, dajudaju, Mo le ṣafikun awọn ohun idanilaraya lati jiggle awọn ohun kikọ yẹn ati mu awọn akọle ara ọrọ toon mi wa si igbesi aye. Ni akọkọ, Mo ṣẹda ere idaraya bọtini fireemu kan ti o yi awọn ohun kikọ naa pada:
@keyframes jiggle { 0%, 100% {iyipada: yiyi (var (--base-rotate, 0deg)); } 25% {iyipada: yiyi (calc (var (--base-rotate, 0deg) + 3deg)); } 50% {iyipada: yiyi (calc (var (--base-rotate, 0deg) - 2deg)); } 75% {iyipada: yiyi (calc (var (--base-rotate, 0deg) + 1deg)); } }
Ṣaaju lilo si awọn eroja igba ti a ṣẹda nipasẹ Toon Text Splitter mi: .toon-char { iwara: jiggle 3s ailopin Ease-in-jade; iyipada-ori: isalẹ aarin; }
Ati nikẹhin, ṣeto iye iyipo ati idaduro ṣaaju ki ohun kikọ kọọkan bẹrẹ lati jiggle: .toon-char: nth-ọmọ (4n) {--base-rotate: -2deg; } .toon-char: nth-ọmọ (4n+1) {--base-rotate: -4deg; } .toon-char: nth-ọmọ (4n+2) {--base-rotate: 2deg; } .toon-char: nth-ọmọ (4n+3) {--base-rotate: 4deg; }
.toon-char: nth-ọmọ (4n) {idaduro iwara: 0.1s; } .toon-char: nth-ọmọ (4n+1) {idaduro iwara: 0.3s; } .toon-char: nth-ọmọ (4n+2) {idaduro iwara: 0.5s; } .toon-char: nth-ọmọ (4n+3) {idaduro iwara: 0.7s; }
Fireemu kan Lati Ṣe Irisi Awọn ošere akọle efe ni fireemu kan lati ṣe iwunilori, ati pe iwe kikọ wọn ṣe pataki bii iṣẹ ọna ti wọn ya. Bakan naa ni otitọ lori oju opo wẹẹbu. Akọsori ti a ṣe apẹrẹ daradara tabi akọniagbegbe nilo wípé, iwa, ati igbekele - kii ṣe aworan isale ni kikun ti o bajẹ. Pẹlu awọn ohun-ini CSS diẹ ti a ti farabalẹ yan - awọn ojiji, awọn ikọlu, awọn abẹlẹ gige, ati diẹ ninu awọn ere idaraya -a le ṣe atunṣe ipa kanna. Mo nifẹ ọrọ toon kii ṣe nitori pe emi ko ni itara, ṣugbọn nitori pe apẹrẹ rẹ jẹ imomose. Ṣe awọn yiyan ti o mọọmọ, ki o jẹ ki iwe kikọ ọrọ toon kekere kan ṣafikun punch si awọn apẹrẹ rẹ.
