Nditamaliza pulojekiti yomwe inkafuna kuti ndiphunzire zonse zomwe ndingathe zokhudza makanema ojambula pa CSS ndi SVG, ndidayamba kulemba nkhani za Smashing Animations ndi "How Classic Cartoons Inspire Modern CSS." Kuti nditsirize chaka chino, ndikufuna kukuwonetsani momwe mungagwiritsire ntchito CSS yamakono kuti mupange chinthu chomwe chimapangitsa Toon Title kukhala yogwira mtima: kalembedwe kake. Title Artwork Design M’nyengo yachete ya m’ma 1920 ndi kumayambiriro kwa zaka za m’ma 1930, kujambulidwa kwa khadi la mutu wa filimu kunapangitsa munthu kukhala wosangalala, kunayambitsa zochitikazo, ndi kukumbutsa omvera za mtundu wa filimu imene analipira kuti awone.
Makhadi amutu wa zojambulazo analinso ndi chizindikiro, mawonekedwe, ndi mawonekedwe, onse atakulungidwa kukhala amodzi. M'zaka zoyambirira, pamene ndalama zazikulu za situdiyo zinali zazikulu, makhadi awa nthawi zambiri anali owonetsera komanso ojambula.
Koma wailesi yakanema itakula kwambiri m’zaka za m’ma 1950, ndalama zinatsika, ndipo makadi opangidwa ndi akatswiri ngati Lawrence “Art” Goble anatengera chinenero chatsopano chooneka, n’kukhala chojambula bwino, chokongoletsedwa bwino, komanso chosavuta kumva. Chidziwitso: Lawrence "Art" Goble ndi m'modzi mwa ngwazi zomwe nthawi zambiri zimanyalanyazidwa mzaka zapakati pazaka zaku America. Amagwirira ntchito Hanna-Barbera m'zaka zake zotchuka kwambiri m'ma 1950 ndi 1960. Goble sanali wojambula zithunzi. Udindo wake unali kupanga mlengalenga, kotero adapanga malo a The Flintstones, Huckleberry Hound, Quick Draw McGraw, ndi Yogi Bear, komanso makhadi otsegulira omwe amakhazikitsa kamvekedwe. Makhadi ake amutu, okhala ndi zithunzi zokhala ndi logo atakutidwa, adathandizira kufotokozera mawonekedwe a Hanna-Barbera. Zojambula za Goble za anthu monga Quick Draw McGraw ndi Yogi Bear zinali zogwira mtima pazithunzi zazing'ono za TV. M'malo mopanganso chojambula chojambulacho, adayang'ana kwambiri popereka lingaliro limodzi, lamphamvu - nthawi zambiri mu silhouette - lomwe limafotokoza tanthauzo lake. Mu "Buzzin 'Bear," Yogi amawombera pa helikopita. Amathamangira, pic-a-nic dengu m'manja, mu "Bear on Picnic," komanso "Mphotho Yake Yolimbana ndi Mphotho," Yogi amaika mutu wamutu.
Pokhala ndi kusuntha pang'ono kapena osadalira, mafelemu amodzi a Goble amayenera kupanga mawonekedwe, kukhazikitsa zochitika, ndi kufotokoza nkhani. Anachita izi pogwiritsa ntchito mitundu yosalala, mawonekedwe azithunzi, ndi typography yomwe nthawi zambiri inkaphatikizidwa muzojambula.
Monga okonza omwe amagwira ntchito pa intaneti, mitu ya toon ingatiphunzitse zambiri za momwe tingasonyezere umunthu wa mtundu, kupanga chiwongolero choyamba, ndi kukhazikitsa ziyembekezo za zochitika za wina pogwiritsa ntchito malonda kapena webusaiti. Titha kuphunzira kuchokera ku luso la ojambula kupanga zikwangwani zogwira mtima, mitu yamasamba otsetsereka, ngakhalenso zowonera zakale zowoneka bwino. Mbiri ya Toon Typography Makhadi amutu wazithunzithunzi amawonetsa momwe kuphatikiza mitundu ndi zithunzi kumaperekera nkhonya pamutu kapena ngwazi. Ndi mithunzi yocheperako, zolemba, ndi njira zosinthira, CSS yamakono imakulolani kuti mugwiritse ntchito mphamvu zomwezo.
The Toon Text Title Generator Pang'ono ndi pang'ono polemba nkhaniyi, ndinazindikira kuti zingakhale zothandiza kukhala ndi chida chopangira malemba olembedwa ngati mitu ya zojambula zomwe ndimakonda kwambiri. Ndiye ndinapanga imodzi. My Toon Text Title Generator imakulolani kuyesa mitundu, mikwingwirima, ndi mithunzi ingapo. Mutha kusintha madongosolo a penti, kugwiritsa ntchito masitayilo a zilembo, kuwoneratu zolemba zanu pamasankhidwe amtundu wamitundu, kenako kukopera CSS yopangidwa molunjika pa clipboard yanu kuti mugwiritse ntchito pulojekiti. Mbiri ya Toon CSS Mutha kukopera-kumata CSS yomwe Toon Text Title Generator imakupatsirani. Koma tiyeni tiyang'ane mozama pa zomwe zimachita. Mthunzi wa malemba Yang'anani mtundu wa mutu uwu wochokera ku gawo la Augie Doggie "Yuk-Yuk Duck," lokhala ndi zilembo zachikasu zotumbululuka ndi mthunzi wakuda, wolimba, wotsitsimula womwe umachotsa kumbuyo ndikupanga chinyengo chakuya.
Mwinamwake mukudziwa kale kuti chithunzithunzi chimavomereza zinthu zinayi: (1) zopingasa ndi (2) zotsatizana, (3) zowoneka bwino, ndi (4) mtundu womwe ukhoza kukhala wolimba kapena wowonekera. Miyezo yotereyi imatha kukhala yabwino kapena yoyipa, kotero nditha kubwereza "Yuk-Yuk Bakha" pogwiritsa ntchito mthunzi wolimba wokokedwa pansi ndikumanja: mtundu: #f7f76d; zolemba-mthunzi: 5px 5px 0 #1e1904;
Kumbali ina, mutu wa "Pint Giant" umamveka mosiyana ndi mthunzi wake wofewa: mtundu: #c2a872; mthunzi-mawu: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Kuti muwonjezere kuya kowonjezera ndikupanga zotsatira zosangalatsa, nditha kusanjika mithunzi ingapo. Kwa "Tiyeni Tituluke," ndimaphatikiza mithunzi inayi: woyamba ndi mthunzi wokhazikika wokhala ndi chopinga chopingasa chonyamulira kukweza mawu kumbuyo, ndikutsatiridwa ndi mithunzi yofewa pang'onopang'ono kuti ipangitse kusawoneka bwino mozungulira: mtundu: #6F4D80; mthunzi-mawu: -5px5px 0 #260e1e, /* Mthunzi 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Mthunzi 4 */
Mithunzi iyi ikuwonetsa kuti kugwiritsa ntchito mthunzi-wolemba sikumangopanga zowunikira, chifukwa zimathanso kukongoletsa ndikuwonjezera umunthu. Text Stroke Makhadi ambiri amutu wa zojambula amakhala ndi zilembo zokhala ndi autilaini yolimba yomwe imawapangitsa kuti awonekere kumbuyo. Ndikhoza kubwereza izi pogwiritsa ntchito text-stroke. Kwa nthawi yayitali, malowa amangopezeka kudzera pa -webkit- prefix, koma zikutanthauzanso kuti tsopano athandizidwa pa asakatuli amakono.
text-stroke ndi shorthand ya katundu awiri. Yoyamba, m'lifupi mwake, imajambula mizere mozungulira zilembo zilizonse, pomwe yachiwiri, mtundu wa mawu, imayang'anira mtundu wake. Kwa "Chilichonse Chimapita Papu," ndidawonjezera 4px buluu pamawu achikasu: mtundu: #eff0cd; -webkit-text-stroke: 4px #7890b5; mawu-sitiroko: 4px #7890b5;
Zikwapu zimatha kukhala zothandiza makamaka zikaphatikizidwa ndi mithunzi, kotero kuti "Kukula, Kukula, Kupita," ndinawonjezera sitiroko yopyapyala ya 3px pamthunzi wosawoneka bwino wa 1px kuti mupange mawu awa: mtundu: #fbb999; mawu-mthunzi: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; mawu-sitiroko: 3px #984336;
Paint Order Kugwiritsira ntchito malemba sikubweretsa zotsatira zomwe zimayembekezeredwa, makamaka ndi zilembo zocheperako komanso zikwapu zokulirapo, chifukwa mwachisawawa msakatuli amakoka kudzaza. Zachisoni, CSS sinandilolebe kuti ndisinthire kuyika kwa sitiroko monga momwe ndimachitira mu Sketch. Komabe, malo opangira utoto ali ndi mfundo zomwe zimandilola kuyika sitiroko kumbuyo, osati kutsogolo, kudzaza.
dongosolo la penti: sitiroko imapenta koyamba, kenako kudzaza, pomwe penti-dongosolo: kudzaza kumachita zosiyana: mtundu: #fbb999; penti-dongosolo: kudzaza; mawu-mthunzi: 3px 5px 1px #5160b1; mtundu-sitiroko-mtundu: # 984336; kufalikira kwa mawu: 3px;
Sitiroko yogwira mtima imapangitsa zilembo kuwerengeka, zimawonjezera kulemera, ndipo - zikaphatikizidwa ndi mithunzi ndi dongosolo la penti - zimapereka mawu osamveka kukhalapo kwenikweni. Zoyambira M'kati mwa Mawu Makhadi ambiri amakatuni amapitilira mtundu wathyathyathya powonjezera mawonekedwe, ma gradients, kapena tsatanetsatane wa zilembo. Nthawi zina izi zimakhala ndi mawonekedwe, nthawi zina zimatha kukhala gradient yokhala ndi kusintha kosawoneka bwino kwa tonal. Pa intaneti, nditha kupanganso izi pogwiritsa ntchito chithunzi chakumbuyo kapena gradient kuseri kwa mawuwo, kenako ndikumadula mpaka mawonekedwe a zilembo. Izi zimadalira zinthu ziwiri zomwe zimagwirira ntchito limodzi: chojambula chakumbuyo: mawu ndi mtundu wodzaza mawu: transparent.
Choyamba, ndimagwiritsa ntchito maziko kumbuyo kwa malembawo. Izi zitha kukhala chithunzi cha bitmap kapena vector kapena CSS gradient. Pachitsanzo ichi chochokera mugawo la Quick Draw McGraw "Baba Bait," mutuwo uli ndi gradient yobisika pamwamba-pansi kuchokera kumdima kupita ku kuwala: maziko: liniya-gradient(0deg, #667b6a, #1d271a);
Kenako, ndimadula mazikowo ku glyphs ndikupangitsa kuti mawuwo aziwonekera kuti zakumbuyo ziwonekere: -webkit-background-clip: zolemba; -webkit-text-fill-color: transparent;
Ndi mizere iwiri yokhayo, chakumbuyo sikujambulidwanso kumbuyo kwa mawuwo; m'malo mwake, ndi utoto mkati mwake. Njirayi imagwira ntchito bwino makamaka ikaphatikizidwa ndi zikwapu ndi mithunzi. Chidutswa chodulira chimapangitsa zilembo kukhala ndi mtundu komanso mawonekedwe ake, sitiroko imasunga m'mphepete mwake, ndipo mthunzi umakweza kuchokera kumbuyo. Onse pamodzi, amakhalanso ndi mawonekedwe osanjikiza a makhadi ojambulidwa ndi manja osagwiritsa ntchito china chilichonse koma CSS yaying'ono. Monga nthawi zonse, yesani mawu odulidwa mosamala, popeza ma quirks osatsegula amatha kukhudza mithunzi ndi kumasulira. Kugawaniza Mawu M'makhalidwe Payekha Nthawi zina sindikufuna kupanga liwu lonse kapena mutu. Ndikufuna kupanga zilembo zamtundu uliwonse - kusuntha munthu m'malo mwake, kuwonjezera kulemera kwake, kapena kuwongolera zilembo zingapo payekha. Mu HTML yomveka bwino ndi CSS, pali njira imodzi yokha yodalirika yochitira izi: kukulunga munthu aliyense m'gawo lake. Ndikadatha kuchita izi pamanja, koma izi zitha kukhala zosalimba, zovuta kuzisamalira, ndipo zimatha kusweka pakasintha makope. M'malo mwake, ndikafuna chiwongolero cha chilembo chilichonse, ndimagwiritsa ntchito laibulale yogawa malemba monga splt.js (ngakhale njira zina zilipo). Izi zimatenga node ya mawu ndikukulunga mawu kapena zilembo, ndikundipatsa zokokera kuti ndikhale ndi moyo ndi masitayelo popanda kusokoneza zolemba zanga. Ndi njira yomwe imapangitsa kuti HTML yanga ikhale yowerengeka komanso yowoneka bwino, ndikundipatsa chiwongolero chabwino chomwe ndikufunika kuti ndipangenso zojambula zosagwirizana, zomwe mumaziwona m'makhadi apamwamba azithunzi. Komabe, njira iyi imabwera ndizidziwitso zopezeka, popeza ambiri owerenga zenera amawerenga zolemba mwatsatanetsatane. Ndiye izi:
Hum Sweet Hum
... amawerenga momwe mungayembekezere: Hum Sweet Hum
Koma izi:
H u m
…angathe kutanthauziridwa mosiyana malinga ndi osatsegula ndi chophimba owerenga. Ena adzakhala concatenate zilembo ndi kuwerenga mawu molondola. Ena angayime pakati pa zilembo, zomwe zikavuta kwambiri zitha kumveka ngati: “H…” “U…” “M…”
N'zomvetsa chisoni kuti njira zina zogawanitsa sizimapereka zotsatira zopezeka nthawi zonse, kotero ndalemba zolemba zanga splitter, splinter.js, zomwe zili mu beta. Kusintha Malembo Paokha Kuti ndiyambitse Toon Text Splitter yanga, ndimawonjezera chidziwitso ku chinthu chomwe ndikufuna kuchigawa:
Hum Sweet Hum
Choyamba, zolemba zanga zimagawanitsa liwu lililonse kukhala zilembo zamtundu uliwonse ndikuzikulunga mugawo lokhala ndi kalasi ndi ARIA zomwe zimagwiritsidwa ntchito:
Zolembazo zimatenga zomwe zili mugawo logawanika ndikuziwonjezera ngati mawonekedwe a aria kuti zithandizire kupezeka:
Ndikagwiritsidwa ntchito m'kalasi, nditha kuyika zilembo zamtundu uliwonse momwe ndikufunira.
Mwachitsanzo, za "Hum Sweet Hum," ndikufuna kubwereza momwe zilembo zake zimasinthira kuchoka pazoyambira. Nditagwiritsa ntchito Toon Text Splitter, ndidagwiritsa ntchito zomasulira zinayi zosiyanasiyana pogwiritsa ntchito :nth-child selectors kuti ndiwoneke mwachisawawa: /* 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; }
Koma kumasulira ndi chinthu chimodzi chokha chomwe ndingagwiritse ntchito kuti ndisinthe mawu anga a toon.
Ndithanso kutembenuza zilembo izi kuti ziwoneke movutikira: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) {zungulira: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { tembenuzani: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) {zungulira: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {zungulira: 8deg; }
Koma kumasulira ndi chinthu chimodzi chokha chomwe ndingagwiritse ntchito kuti ndisinthe mawu anga a toon. Ndithanso kutembenuza zilembo izi kuti ziwoneke movutikira: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { kuzungulira: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { kuzungulira: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { kuzungulira: 4 deg; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { kuzungulira: 8 deg; }
Ndipo, zowona, nditha kuwonjezera makanema ojambula kuti ndisinthe zilembozo ndikupangitsa mitu yanga yamalemba kukhala yamoyo. Choyamba, ndidapanga makanema ojambula pamakiyi omwe amasinthasintha zilembo:
@keyframes jiggle { 0%, 100% {kusintha: kuzungulira (var(--base-rotate, 0deg)); } 25% {kusintha: kuzungulira (calc (var (--base-rotate, 0deg) + 3deg)); } 50% {kusintha: kuzungulira (calc(var(--base-rotate, 0deg) - 2deg)); } 75% {kusintha: kuzungulira (calc (var (--base-rotate, 0deg) + 1deg)); } }
Ndisanagwiritse ntchito pazinthu za span zopangidwa ndi Toon Text Splitter yanga: .toon-char { makanema ojambula: jiggle 3s kumasuka mopanda malire; kusintha-chiyambi: pansi pakatikati; }
Ndipo potsiriza, kuyika kuchuluka kwa kasinthasintha ndi kuchedwa munthu aliyense asanayambe kugwedezeka: .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) {kuchedwa kwa makanema: 0.1s; } .toon-char:nth-child(4n+1) {kuchedwa kwa makanema: 0.3s; } .toon-char:nth-child(4n+2) {kuchedwa kwa makanema: 0.5s; } .toon-char:nth-child(4n+3) {kuchedwa kwa makanema: 0.7s; }
Chimango Chimodzi Chopanga Chidwi Ojambula mitu yazithunzi anali ndi chimango chimodzi chokopa chidwi, ndipo kalembedwe kawo kunali kofunikira monga momwe amajambula. N'chimodzimodzinso pa intaneti. Mutu wopangidwa bwino kapena ngwaziDera likufunika kumveka bwino, mawonekedwe, ndi chidaliro - osati chithunzi chakumbuyo chakumbuyo. Ndi zinthu zingapo zosankhidwa bwino za CSS - mithunzi, mikwingwirima, maziko odulidwa, ndi makanema ojambula oletsedwa - titha kupanganso zomwezo. Ndimakonda mameseji a toon osati chifukwa sindimaganiza bwino, koma chifukwa kapangidwe kake ndi dala. Pangani zisankho mwadala, ndipo lolani kalembedwe kakang'ono ka toon kuwonjezere nkhonya pamapangidwe anu.
