Mushure mekupedza chirongwa chaida kuti ndidzidze zvese zvandaigona nezve CSS neSVG animations, ndakatanga kunyora iyi nhevedzano nezve Smashing Animations uye "How Classic Cartoons Inspire Modern CSS." Kuti upedze gore rino, ini ndoda kukuratidza mashandisiro emazuva ano CSS kugadzira icho chinhu chinoita kuti Toon Titles zviite zvakanyanya: typography yavo. Title Artwork Design Munguva yakanyarara yema1920 uye kutanga kwema1930, kutaipa kwekadhi remusoro webhaisikopo kwakagadzira manyawi, kwakamisa chiitiko, uye kwakayeuchidza vateereri nezverudzi rwefirimu ravaizobhadhara kuti vaone.
Makadhi emusoro wekatuni airatidzawo chiratidzo, hunhu, uye chiitiko-kumisikidzwa, zvese zvakatenderedzwa kuita rimwe. Mumakore ekutanga, apo mabhajeti makuru e studio aive akakura, aya makadhi emusoro aigara achiratidzira uye nekupenda.
Asi terevhizheni payakatekeshera muma1950, mabhajeti akadzikira, uye makadhi akagadzirwa nevaimbi vakaita saLawrence “Art” Goble vakatora mutauro mutsva wekuona, uchiva wakajeka, wakadhindwa, uye usina kuoma kunzwisisa. Ongorora: Lawrence "Art" Goble nderimwe remagamba anowanzo kufuratirwa epakati pezana ramakore reAmerican animation. Akanyanya kushandira Hanna-Barbera mukati memakore ayo ane simba kwazvo ema1950 nema1960. Goble aive asiri mutambi wehunhu. Basa rake raive rekugadzira mamiriro ekunze, saka akagadzira nharaunda dzeThe Flintstones, Huckleberry Hound, Quick Draw McGraw, uye Yogi Bear, pamwe nemakadhi ekuvhura emusoro anoisa toni. Makadhi ake emusoro, ane mifananidzo yakapendwa ine logo yakafukidzwa, akabatsira kutsanangura chimiro chemufananidzo chaHanna-Barbera. Goble's artwork yemavara akadai seKurumidza Draw McGraw uye Yogi Bear aibudirira pane zvidiki TV skrini. Panzvimbo pekuburitsa chichiri kubva pakatuni, akatarisa pakupa zano rimwechete, rakasimba - kazhinji mune silhouette - iro rakatora hunhu hwayo. Mu "Buzzin 'Bear," Yogi anobhuya ari muherikoputa. Anobhururuka, pic-a-nic basket riri muruoko, mu “Bear on a Pikiniki,” uye nokuda kwake “Prize Fight Fright,” Yogi anoisa zvinyorwa zvemusoro.
Nekufamba kushoma kana kusavimbika, mafuremu eGoble aifanira kugadzira mamiriro, kuseta chiitiko, uye kutsanangura nyaya. Vakaita izvi vachishandisa mavara akati sandara, ma graphic shapes, uye mataipa ayo aigara achibatanidzwa mumifananidzo.
Sevagadziri vanoshanda pawebhu, mazita etoon anogona kutidzidzisa zvakawanda nezve nzira yekuburitsa hunhu hwemhando, kuita mucherechedzo wekutanga, uye kuisa zvinotarisirwa kune mumwe munhu ruzivo achishandisa chigadzirwa kana webhusaiti. Isu tinogona kudzidza kubva kumaitiro evanyori ekugadzira mabhena anoshanda, misoro yepeji yekumhara, uye kunyange yakanaka ol' fashioned splash skrini. Toon Title Typography Makadhi emusoro wekatuni anoratidza nzira yekubatanidza mhando nemifananidzo inopa punch musoro kana gamba rinodiwa. Iine mashoma emavara-mumvuri, mavara-kurova, uye ekushandura matipi, CSS yemazuva ano inokuita kuti ubate mune iro simba rimwe chete.
Iyo Toon Chinyorwa Chinyorwa Jenareta Pakati pekunyora chinyorwa ichi, ndakaona kuti zvingave zvinobatsira kuve nechokushandisa chekugadzira mameseji akanyorwa semazita emakatuni andinoda zvakanyanya. Saka ndakagadzira imwe. Yangu Toon Chinyorwa Chinyorwa Jenareta inokutendera kuti uedze nemavara, sitiroko, uye akawanda mameseji mimvuri. Iwe unogona kugadzirisa odha yependi, kuisa kupatsanurwa kwemavara, tarisa mavara ako mune yakasarudzika mafonti emuenzaniso, uye wobva wakopa iyo inogadzirwa CSS yakananga kune yako clipboard yekushandisa mupurojekiti. Toon Musoro weCSS Iwe unogona kungokopa-namira iyo CSS iyo iyo Toon Chinyorwa Chinyorwa Jenareta chinokupa. Asi ngatitarisei zvakanyanya pane zvainoita. Text shadow Tarisa mhando iri mumusoro uyu kubva kuchikamu chaAugie Doggie "Yuk-Yuk Duck," ine mavara eyero yakacheneruka uye rima, rakaoma, mumvuri unorisimudza kubva kumashure uye kugadzira kunyengera kwekudzika.
Iwe unogona kunge uchitoziva kuti mavara-mumvuri anogamuchira mana makoshero: (1) yakachinjika uye (2) yakatwasuka maoffsets, (3) blur, uye (4) ruvara runogona kuve rwakasimba kana semi-pachena. Iwo maitiro ekubvisa anogona kuve akanaka kana akaipa, saka ini ndinogona kudzokorora "Yuk-Yuk Duck" ndichishandisa mumvuri wakaoma wakadhonzwa pasi uye kurudyi: ruvara: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Kune rimwe divi, iyi "Pint Giant" zita rine manzwiro akasiyana neayo asina kunaka semi-nyoro mumvuri: ruvara: #c2a872; text-shadow: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Kuti uwedzere kudzika uye kugadzira zvimwe zvinonakidza mhedzisiro, ndinogona kuisa akawanda mimvuri. Kune "Ngatibudei," ini ndinosanganisa mimvuri ina: yekutanga mumvuri wakasimba une isina kunaka yakachinjika offset kusimudza chinyorwa kubva kumashure, ichiteverwa neinoenderera mberi yakapfava mimvuri kugadzira kusviba kwakaipoteredza: ruvara: #6F4D80; text-shadow: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Mvuri 4 */
Iyi mimvuri inoratidza kuti kushandisa zvinyorwa-mumvuri hakusi kungogadzira mhedzisiro yemwenje, sezvo inogonawo kuve yekushongedza uye kuwedzera hunhu. Text Stroke Mazhinji makadhi emusoro wemakatuni ane mavara ane bold outline anoita kuti aonekere kubva kumashure. Ndinogona kudzoreredza mhedzisiro iyi ndichishandisa text-stroke. Kwenguva yakareba, chivakwa ichi chaingowanikwa kuburikidza ne-webkit- prefix, asi zvinoreva zvakare kuti ikozvino yave kutsigirwa mumabhurawuza emazuva ano.
text-stroke ishorthand yezvivakwa zviviri. Yekutanga, text-stroke-width, inodhirowa contour yakatenderedza mavara ega ega, nepo yechipiri, text-stroke-color, inodzora ruvara rwayo. Kune "Chero Chinoenda Pup," ndakawedzera 4px yebhuruu sitiroko kune iyo yero mavara: ruvara: #eff0cd; -webkit-text-stroke: 4px #7890b5; text-stroke: 4px #7890b5;
Stroke dzinogona kunyanya kubatsira kana dzakasanganiswa nemumvuri, saka kune "Kukura, Kukura, Kuenda," ini ndakawedzera yakatetepa 3px sitiroko kune isina kudzima 1px mumvuri kugadzira iyi-matatu-dimensional mavara maitiro: ruvara: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; text-stroke: 3px #984336;
Paint Order Kushandisa mameseji-stroke hakugaro buritsa mhedzisiro inotarisirwa, kunyanya nemavara matete uye makobvu ekurohwa, nekuti nekusarudzika bhurawuza rinokwevera sitiroko pamusoro pekuzadza. Zvinosuruvarisa, CSS haisati ichindibvumira kugadzirisa kuiswa kwesitiroko sezvandinowanzoita muSketch. Nekudaro, iyo pendi-yekurongeka pfuma ine maitiro anonditendera kuti ndiise sitiroko kumashure, pane kumberi, kuzadza.
pendi-odha: sitiroko inopenda sitiroko kutanga, wozozadza, nepo pendi-kuraira: kuzadza kunoita zvinopesana: ruvara: #fbb999; pende-kuraira: kuzadza; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
Sitiroko inoshanda inoita kuti mabhii averengeke, anowedzera huremu, uye - kana asanganiswa nemimvuri uye kurongeka kwependi - inopa mavara akati sandara kuvapo chaiko. Backgrounds Mukati Mavara Mazhinji makadhi emusoro wekatuni anodarika ruvara rwakati sandara nekuwedzera manyorerwo, magradients, kana ruzivo rwakaratidzwa pamabhii. Dzimwe nguva iwo magadzirirwo, dzimwe nguva anogona kunge ari gradient ane hunyengeri tonal shanduko. Padandemutande, ndinokwanisa kudzoreredza mhedzisiro iyi nekushandisa mufananidzo wekumashure kana gradient kuseri kwechinyorwa, ndozochichekerera kune chimiro chemavara. Izvi zvinoenderana nezvivakwa zviviri zvinoshanda pamwechete: kumashure-clip: zvinyorwa uye zvinyorwa-kuzadza-ruvara: pachena.
Chekutanga, ndinoshandisa kumashure kwechinyorwa. Izvi zvinogona kuva bitmap kana vector mufananidzo kana CSS gradient. Pamuenzaniso uyu kubva muchikamu cheKurumidza Draw McGraw "Baba Bait," chinyorwa chemusoro chinosanganisira kupenya kwepamusoro-pazasi gradient kubva parima kuenda kuchiedza: kumashure: linear-gradient(0deg, #667b6a, #1d271a);
Tevere, ini ndinocheka kumashure kune glyphs uye kuita kuti zvinyorwa zvive pachena kuitira kuti kumashure kuratidze kuburikidza: -webkit-background-clip: zvinyorwa; -webkit-mavara-kuzadza-ruvara: pachena;
Nemitsara miviri iyoyo chete, kumashure hakuchina kupendwa seri kwechinyorwa; pachinzvimbo, chakapendwa mukati maro. Iyi nzira inoshanda zvakanyanya kana yakasanganiswa nekurohwa uye mimvuri. Kakachekwa gradient inopa mavara neruvara uye magadzirirwo, sitiroko inochengeta micheto yaro yakapinza, uye mumvuri unoisimudza kubva kumashure. Pamwe chete, vanogadzira zvakare chitarisiko chakamisikidzwa chemakadhi akapendwa nemaoko asingashandisi chimwe chinhu kunze kweCSS diki. Senguva dzose, bvunzo dzakachekwa zvinyorwa zvakanyatsonaka, sebrowser quirks dzimwe nguva inogona kukanganisa mimvuri uye kupa. Kutsemura Mavara Mumavara Ega Dzimwe nguva ini handidi kugadzira izwi rose kana musoro. Ndinoda kuita mabhii ega ega - kukwenya hunhu panzvimbo, kupa glyph imwe huremu, kana kusimudzira mavara mashoma ndakazvimirira. Mune yakajeka HTML neCSS, pane nzira imwe chete yakavimbika yekuita izvozvo: kuputira chimiro chega chega mune chayo span chinhu. Ini ndaigona kuzviita nemaoko, asi izvo zvingave zvisina kusimba, zvakaoma kuchengetedza, uye zvaizokurumidza kuparara kana kopi yachinja. Pane kudaro, pandinenge ndichida per-tsamba control, ndinoshandisa raibhurari yekuparadzanisa-mavara se splt.js (kunyangwe mamwe magadzirirwo aripo). Izvi zvinotora node yemavara uye zvinoputira otomatiki mazwi kana mavara, zvichindipa mamwe machira kuti ndirarame uye chimiro pasina kukanganisa markup yangu. Inzira inochengeta HTML yangu ichiverengeka uye semantic, uku ichindipa iyo yakanaka-grained control yandinoda kuti ndigadzirise iyo isina kuenzana, ine hunhu hwemataipa aunoona mumakadhi echinyakare echinyorwa chekatuni. Zvisinei, nzira iyi inouya nayomacaveats ekuwanika, sezvo vazhinji vanoverenga skrini vanoverenga mameseji node mukurongeka. Saka izvi:
Hum Inotapira Hum
... inoverenga sezvaungatarisira: Hum Sweet Hum
Asi izvi:
H u m
... inogona kududzirwa zvakasiyana zvichienderana nebrowser uye screen reader. Vamwe vachabatanidza mavara uye vanoverenga mazwi nenzira kwayo. Vamwe vanogona kumbomira pakati pemavara, izvo mumamiriro ezvinhu akaipisisa zvinganzwika se: “H…” “U…” “M…”
Zvinosuruvarisa, mamwe magadzirirwo ekupatsanura haaunze mhedzisiro inowanikwa nguva dzose, saka ndakanyora zvangu zvinyorwa splitter, splinter.js, iyo parizvino iri mubeta. Kushandura Tsamba Dzemunhu Kuti ndimise yangu Toon Text Splitter, ini ndinowedzera data- hunhu kune chinhu chandinoda kupatsanura:
Hum Sweet Hum
Kutanga, script yangu inoparadzanisa izwi rega rega mumabhii ega uye inoaputira mune span chinhu chine kirasi uye ARIA hunhu hwakaiswa:
Iyo script inobva yatora zvekutanga zvemukati mechikamu chekupatsanurwa uye yowedzera searia hunhu kubatsira kuchengetedza kuwanikwa:
Neaya makirasi maitiro akaiswa, ini ndinogona kuzotaera mavara ega sezvandinosarudza.
Semuyenzaniso, ye "Hum Inotapira Hum," ndinoda kudzokorora mafambiro emavara ayo kubva pane yekutanga. Mushure mekushandisa Toon Text Splitter yangu, ndakaisa makoshero mana akasiyana eshanduro ndichishandisa akati wandei :nth-child selectors kuti ndigadzire semi-random chitarisiko: /* 4th, 8th, 12th... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { translate: 0 8px; }
Asi kuturikira chinhu chimwe chete chandinogona kushandisa kushandura mavara angu.
Ini ndaigona zvakare kutenderedza iwo mavara ega ega kuti atonyanya kuvhiringika. /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) {tenderera: -4deg; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) {tenderera: -8deg; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) {tenderera: 4deg; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) {tenderera: 8deg; }
Asi kuturikira chinhu chimwe chete chandinogona kushandisa kushandura mavara angu. Ini ndaigona zvakare kutenderedza iwo mavara ega ega kuti atonyanya kuvhiringika. /* 4th, 8th, 12th... */ .toon-line .toon-char:nth-child(4n) { tenderera: -4deg; }
/* 1st, 5th, 9th... */ .toon-char:nth-mwana(4n+1) { tenderera: -8deg; }
/* 2nd, 6th, 10th... */ .toon-char:nth-mwana(4n+2) { tenderera: 4deg; }
/* 3rd, 7th, 11th... */ .toon-char:nth-mwana(4n+3) { tenderera: 8deg; }
Uye, hongu, ini ndaigona kuwedzera animations kudhiza iwo mavara uye kuunza yangu toon mameseji manyorerwo mazita. Chekutanga, ndakagadzira keyframe animation inotenderera mavara:
@keyframes jiggle { 0%, 100% {shandura: tenderera (var(--base-rotate, 0deg)); } 25% {shandura: tenderera (calc (var (--base-rotate, 0deg) + 3deg)); } 50% {shandura: tenderera (calc (var (--base-rotate, 0deg) - 2deg)); } 75% {shandura: tenderera (calc (var (--base-rotate, 0deg) + 1deg)); } }
Usati waishandisa kune span zvinhu zvakagadzirwa neToon Text Splitter yangu: .toon-char { animation: jiggle 3s kusingaperi kurerukirwa-mukati-kunze; kushandura-mavambo: nechepakati pasi; }
Uye pakupedzisira, kuseta huwandu hwekutenderera uye kunonoka hunhu hwega hwega husati hwatanga kuzununguka: .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; }
Imwe Frame Yekuita Mhedzisiro Cartoon title artists vaive nefuremu imwe chete yekuita zvinoyevedza, uye kutaipa kwavo kwaive kwakakosha semifananidzo yavakapenda. Zvimwe chetezvo ndezvechokwadi pawebhu. Musoro wakanyatsogadzirwa kana gambanzvimbo inoda kujeka, hunhu, uye kusatya - kwete kungodzima kuzere-hupamhi hwekumashure mufananidzo. Iine mashoma akanyatsosarudzwa CSS zvivakwa - mimvuri, sitiroko, akachekwa kumashure, uye mamwe anodzorwa animation - isu tinogona kudzoreredza maitiro akafanana. Ini ndinoda mameseji etoon kwete nekuti ndiri nostalgic, asi nekuti dhizaini yayo ndeyekuda. Ita sarudzo nemaune, uye rega diki toon text typography iwedzere punch kumagadzirirwo ako.
