CSS we SVG animasiýalary hakda mümkin bolan ähli zady öwrenmegimi talap edýän taslama gutaranymdan soň, “Smashing Animations” we “Klassiki multfilmleriň häzirki zaman CSS-i nähili ylhamlandyrýandygy” hakda bu seriýany ýazyp başladym. Şu ýyl jemlemek üçin, Toon titullaryny şeýle täsirli edýän elementi döretmek üçin häzirki zaman CSS-ni nädip ulanmalydygyny görkezmek isleýärin: olaryň tipografiýasy. Adyň çeper eser dizaýny 1920-nji ýyllaryň we 30-njy ýyllaryň sessiz döwründe filmiň at kartasynyň tipografiýasy keýp döretdi, sahnany düzdi we tomaşaçylara görmek üçin tölän filmleriniň görnüşini ýada saldy.
Multfilmiň at kartalary hem marka, keýp we sahna düzülişi bolup, hemmesi bir ýere jemlenipdi. Ilkinji ýyllarda esasy studiýa býudjetleri has uly bolanda, bu at kartalary köplenç suratlandyryjy we suratkeşdi.
Emma 1950-nji ýyllarda telewideniýe ösensoň, býudjetler azaldy we Lawrens “Art” Goble ýaly hudo .nikler tarapyndan döredilen kartoçkalar has grafiki, stilleşdirilen we has çylşyrymly bolup, täze wizual dili kabul etdi. Bellik: Lawrens “Sungat” Goble, orta asyr Amerikan animasiýasynyň köplenç ünsden düşürilýän gahrymanlaryndan biridir. Ilki bilen 1950-nji we 1960-njy ýyllaryň iň täsirli ýyllarynda Hanna-Barbera üçin işledi. Goble gahryman animatory däldi. Onuň roly atmosfera döretmekdi, şonuň üçin “Flintstones”, “Huckleberry Hound”, “Quick Draw McGraw” we “ogogi Bear” üçin şertler döretdi, şeýle hem äheňi açýan at kartalary. Logotip bilen örtülen suratlar ýerleşdirilen at kartalary, Hanna-Barberanyň keşbini kesgitlemäge kömek etdi. Gobleň “Quick Draw McGraw” we “ogogi Bear” ýaly gahrymanlar üçin döreden eserleri kiçi telewizor ekranlarynda täsirli boldy. Multfilmden henizem köpeltmegiň ýerine, düýp manysyny alýan ýeke-täk güýçli pikiri - köplenç siluetde hödürlemäge ünsi jemledi. “Buzzin aýy” -da ogogi dikuçarda gygyrýar. Ol elinde surata düşýän sebet, “Piknikde aýy” we “Baýrak söweşi gorkusy” üçin ogogi adyň tekstini ýazýar.
Oňa bil baglamak üçin az hereket ýa-da hiç zat bolmazdan, Goblyň ýeke kadrlary keýp döretmeli, sahnany düzmeli we bir hekaýa suratlandyrmalydy. Muny çeper eserlere ýygy-ýygydan birleşdirilen tekiz reňkler, grafiki şekiller we tipografiýa ulanyp etdiler.
Webde işleýän dizaýnerler hökmünde, at atlary bize markanyň şahsyýetini nädip görkezmelidigi, ilkinji täsir galdyrmagy we önümi ýa-da web sahypasyny ulanmak arkaly kimdir biriniň tejribesine garaşmak barada köp zat öwredip biler. Netijeli bannerleri, sahypa sahypa sözbaşylaryny we hatda gowy “moda” ekranlaryny döretmek üçin hudo .nikleriň usullaryndan öwrenip bileris. Toon adynyň tipografiýasy Multfilm adynyň kartoçkalary şekil bilen birleşmegiň görnüşi, sözbaşy ýa-da gahrymanyň zerurlygyny görkezýär. Az sanly tekst kölegesi, tekst urmak we üýtgetmek hileleri bilen häzirki zaman CSS size şol energiýa sarp etmäge mümkinçilik berýär.
Toon tekst adynyň generatory Bu makalany ýazmagyň üsti bilen, özümi gaty gowy görýän multfilm atlary ýaly ýazylan tekst döretmek üçin guralyň bolmagynyň peýdalydygyna düşündim. Şeýdip, birini ýasadym. “Toon Text Title Generator” size reňkler, urgylar we birnäçe tekst kölegeleri bilen synag geçirmäge mümkinçilik berýär. Boýag tertibini sazlap, harp aralygyny ulanyp, nusga şriftleriniň saýlamasynda tekstiňizi öňünden görüp bilersiňiz we döredilen CSS-ni taslama ulanmak üçin göni buferiňize göçürip bilersiňiz. Toon ady CSS “Toon Text Title Generator” -yň berýän CSS-sini göçürip-göçürip bilersiňiz. Itöne onuň edýän zatlaryna has ýakyndan seredeliň. Tekst kölegesi Bu atyň görnüşine, Augie Doggie-iň “-uk-Duk ördek” bölüminden açyk sary harplary we fonda galdyrýan we çuňlugyň illuziýasyny döredýän gara, gaty, ofset kölegesi bilen serediň.
Tekst kölegesiniň dört bahany kabul edýändigini eýýäm bilýän bolsaňyz gerek: (1) keseligine we (2) dikligine, (3) bulaşyklyga we (4) gaty ýa-da ýarym dury bolup biljek reňk. Şol ofset bahalary polo positiveitel ýa-da otrisatel bolup biler, şonuň üçin aşak we saga çekilen gaty kölegäni ulanyp, “-uk-Duk Ördek” -ni köpeldip bilerin: reňk: # f7f76d; tekst-kölege: 5px 5px 0 # 1e1904;
Beýleki tarapdan, bu “Pint Giant” ady, negatiw ýarym ýumşak kölegesi bilen başgaça duýulýar: reňk: # c2a872; text-shadow: -7px 5px 0 # b100e, 0 -5px 10px # 546c6f;
Goşmaça çuňluk goşmak we has gyzykly effektler döretmek üçin birnäçe kölege goýup bilerin. “Geliň, çykalyň” üçin dört kölegäni birleşdirýärin: birinjisi teksti fonda galdyrmak üçin otrisatel gorizontal ofset bilen berk kölege, soňundan bolsa bulaşyklyk döretmek üçin ýuwaş-ýuwaş kölegeler: reňk: # 6F4D80; text-shadow: -5px5px 0 # 260e1e, / * Kölege 1 * / 0 0 15px # e9ce96, / * Kölege 2 * / 0 0 30px # e9ce96, / * Kölege 3 * / 0 0 30px # e9ce96; / * Kölege 4 * /
Bu kölegeler, tekst kölegesini ulanmagyň diňe yşyklandyryş effektlerini döretmek bilen çäklenmeýändigini görkezýär, sebäbi olar bezeg we şahsyýet goşup biler. Tekst urmagy Multfilmiň at kartalarynyň köpüsinde, arka tarapdan tapawutlandyrýan goýy çyzgyly harplar bar. Bu effekti tekst urmagy arkaly döredip bilerin. Uzak wagtlap bu emläk diňe -webkit-prefiksi arkaly elýeterli bolupdy, ýöne bu häzirki zaman brauzerlerinde goldanýandygyny aňladýar.
tekst urmagy iki häsiýetiň stenografiýasydyr. Birinjisi, tekst-urmak ini, aýratyn harplaryň töwereginde kontur çyzýar, ikinjisi, tekstiň urmagy reňkini dolandyrýar. “Näme gurjak bolsa” üçin sary tekste 4px gök urgy goşdum: reňk: # eff0cd; -webkit-text-stroke: 4px # 7890b5; tekst urmagy: 4px # 7890b5;
Urgular kölegeler bilen birleşdirilende has peýdaly bolup biler, şonuň üçin “Ösmek, ulalmak, gutarmak” üçin bu üç ölçegli tekst effektini döretmek üçin zordan bulaşyk 1px kölege inçe 3px urgy goşdum: reňk: # fbb999; tekst-kölege: 3px 5px 1px # 5160b1; -webkit-text-stroke: 3px # 984336; tekst urmagy: 3px # 984336;
Boýag tertibi Tekst urgusyny ulanmak hemişe garaşylýan netijäni bermeýär, esasanam inçe harplar we has galyň urgylar bilen, sebäbi adaty ýagdaýda brauzer doldurgyçdan urýar. Gynansagam, CSS henizem eskizde edişim ýaly insultyň ýerleşdirilmegini sazlamaga rugsat bermeýär. Şeýle-de bolsa, boýag sargyt häsiýetiniň doldurgyjyň öňünde däl-de, urgyny yzda goýmaga mümkinçilik berýän gymmatlyklary bar.
boýag tertibi: insult ilki urmagy, soň bolsa doldurmagy reňkleýär, boýag tertibi: doldurmak tersine: reňk: # fbb999; boýag tertibi: doldurmak; tekst-kölege: 3px 5px 1px # 5160b1; text-stroke-color: # 984336; text-stroke-width: 3px;
Netijeli urgy harplary okalýar, agram goşýar we kölegeler we boýag tertibi bilen birleşdirilende tekiz tekstiň hakyky barlygyny berýär. Tekstiň içindäki maglumatlar Multfilmiň köp sanly kartoçkasy harplara teksturany, gradiýentleri ýa-da suratly jikme-jiklikleri goşmak bilen tekiz reňkden çykýar. Käwagt bu dokumadyr, beýleki wagtlar inçe tonly üýtgeşiklik bilen gradient bolup biler. Webde, bu effekti tekstiň aňyrsynda fon suratyny ýa-da gradienti ulanyp, soň bolsa harplaryň görnüşine gysyp döredip bilerin. Bu bilelikde işleýän iki häsiýete daýanýar: fon-klip: tekst we tekst doldurmak-reňk: aýdyň.
Ilki bilen tekstiň aňyrsynda bir fon ulanýaryn. Bu bitmap ýa-da wektor şekili ýa-da CSS gradienti bolup biler. Mysal üçin, “Çalt Draw MakGraw” bölüminden “Baba Bait”, sözbaşynyň teksti garaňkydan ýagtylyga inçe ýokarky aşaky gradiýenti öz içine alýar: fon: çyzykly-gradient (0deg, # 667b6a, # 1d271a);
Soň bolsa, şol fonuny gliflere kesýärin we teksti aç-açan edýärin, şonuň üçin fonda görkezilýär: -webkit-background-clip: tekst; -webkit-text-fill-color: aýdyň;
Diňe şol iki setir bilen fon tekstiň aňyrsynda reňklenmeýär; tersine, onuň içine boýaldy. Bu usul urgy we kölegeler bilen birleşdirilende esasanam gowy işleýär. Kesilen gradient harpy reňk we tekstura bilen üpjün edýär, urgy gyralaryny ýiti saklaýar we kölege ony fonda ýokarlandyrýar. Bilelikde, azajyk CSS-den başga hiç zat ulanman, el bilen boýalan at kartalarynyň gatlak görnüşini döredýärler. Hemişe bolşy ýaly, kesilen teksti üns bilen synap görüň, sebäbi brauzeriň islegleri käwagt kölegelere we görkezilişe täsir edip biler. Teksti aýratyn nyşanlara bölmek Käwagt tutuş bir söz ýa-da sözbaşy düzmek islämok. Aýry-aýry harplary düzmek isleýärin - bir belgi ýerine ýetirmek, bir glif goşmaça agram bermek ýa-da birnäçe harpy özbaşdak janlandyrmak isleýärin. HTMLönekeý HTML we CSS-de muny amala aşyrmagyň ýekeje ygtybarly usuly bar: her bir nyşany öz aralyk elementine örtüň. Muny el bilen edip bilerdim, ýöne bu näzik, saklamak kyn we göçürme üýtgese çalt ýykylar. Munuň ýerine, harp başyna gözegçilik gerek bolanda, splt.js ýaly tekst bölýän kitaphanany ulanýaryn (başga çözgütler bar bolsa-da). Bu tekst düwünini alýar we sözleri ýa-da nyşanlary awtomatiki usulda örtýär, belligimi bulaşdyrman janlandyrmak we stil üçin goşmaça çeňňek berýär. Bu, HTML-ni okalýan we many taýdan saklaýan çemeleşme, şol bir wagtyň özünde, klassiki multfilmiň at kartalarynda görýän deň däl, häsiýetli tipografiýany täzeden döretmeli. Şeýle-de bolsa, bu çemeleşme gelýärelýeterlilik gowaklary, sebäbi ekran okyjylarynyň köpüsi tekst düwünlerini tertipli okaýarlar. Şeýlelikde:
Hum Süýji Hum
... garaşyşyňyz ýaly okaýar: Hum Süýji Hum
Emma bu:
H u m
... brauzere we ekran okaýjysyna baglylykda başgaça düşündirilip bilner. Käbirleri harplary birleşdirer we sözleri dogry okar. Beýlekiler, iň erbet ýagdaýda bolup biläýjek harplaryň arasynda durup bilerler: “H…” “U…” “M…”
Gynansagam, käbir bölüji çözgütler elmydama elýeterli netijäni bermeýär, şonuň üçin häzirki wagtda beta görnüşinde bolan splinter.js tekst ýazgymy ýazdym. Aýry-aýry hatlary üýtgetmek Toon Text Splitter-i işjeňleşdirmek üçin, bölmek isleýän elementime maglumat atributyny goşýaryn:
Hum Sweet Hum
Ilki bilen, ýazgym her sözi aýratyn harplara bölýär we ulanylýan synp we ARIA atributlary bilen aralyk elemente baglaýar:
Soňra skript bölünen elementiň başlangyç mazmunyny alýar we elýeterliligi saklamaga kömek etmek üçin aria atributy hökmünde goşýar:
Şol synp atributlary ulanylanda, men islän wagtym aýratyn nyşanlary düzüp bilerin.
Mysal üçin, “Hum Sweet Hum” üçin, harplarynyň başlangyçdan nädip daşlaşýandygyny köpeltmek isleýärin. Toon Text Splitter-i ulananymdan soň, dört sany dürli terjime bahasyny ulanyp, ýarym tötänleýin görnüşi döretmek üçin n-çaga saýlaýjylary: / * 4-nji, 8-nji, 12-nji ... * / .toon-char: nth-çaga (4n) {terjime: 0 -8px; } / * 1-nji, 5-nji, 9-njy ... * / .toon-char: nth-çaga (4n + 1) {terjime: 0 -4px; } / * 2-nji, 6-njy, 10-njy ... * / .toon-char: nth-çaga (4n + 2) {terjime: 0 4px; } / * 3-nji, 7-nji, 11-nji ... * / .toon-char: nth-çaga (4n + 3) {terjime: 0 8px; }
Translateöne terjime etmek, meniň tekstimi üýtgetmek üçin ulanyp boljak diňe bir häsiýetim.
Mundan başga-da has betbagt görünmek üçin şol aýratyn gahrymanlary öwrüp bilerdim: / * 4-nji, 8-nji, 12-nji ... * / .toon-line .toon-char: nth-çaga (4n) {aýlanmak: -4deg; } / * 1-nji, 5-nji, 9-njy ... * / .toon-char: nth-çaga (4n + 1) {aýlanmak: -8deg; } / * 2-nji, 6-njy, 10-njy ... * / .toon-char: nth-çaga (4n + 2) {aýlanmak: 4deg; } / * 3-nji, 7-nji, 11-nji ... * / .toon-char: nth-çaga (4n + 3) {aýlanmak: 8deg; }
Translateöne terjime etmek, meniň tekstimi üýtgetmek üçin ulanyp boljak diňe bir häsiýetim. Mundan başga-da has betbagt görünmek üçin şol aýratyn gahrymanlary öwrüp bilerdim: / * 4-nji, 8-nji, 12-nji ... * / .toon-line .toon-char: nth-çaga (4n) { aýlanmak: -4deg; }
/ * 1-nji, 5-nji, 9-njy ... * / .toon-char: nth-çaga (4n + 1) { aýlanmak: -8deg; }
/ * 2-nji, 6-njy, 10-njy ... * / .toon-char: n-çaga (4n + 2) { aýlanmak: 4deg; }
/ * 3-nji, 7-nji, 11-nji ... * / .toon-char: n-çaga (4n + 3) { aýlanmak: 8deg; }
Elbetde, şol gahrymanlary gyzyklandyrmak we tekst tekst stilindäki atlarymy janlandyrmak üçin animasiýa goşup bilerdim. Ilki bilen, nyşanlary aýlaýan açar çarçuwaly animasiýa döretdim:
@keyframes jiggle { 0%, 100% {öwürmek: aýlanmak (var (- esasy aýlanmak, 0deg)); } 25% {öwürmek: aýlanmak (hasaplamak (var (- esasy aýlanmak, 0deg) + 3deg)); } 50% {öwürmek: aýlanmak (hasaplamak (var (- esasy aýlanmak, 0deg) - 2deg)); } 75% {öwürmek: aýlanmak (hasaplamak (var (- esasy aýlanmak, 0deg) + 1deg)); } }
Toon Text Splitter tarapyndan döredilen aralyk elementlerine ulanmazdan ozal: .to-char { animasiýa: jiggle 3s çäksiz ýeňillik; öwrülişi: merkezi aşagy; }
Iň soňunda bolsa, aýlanyş mukdaryny we her bir nyşan jylawlap başlamazdan gijä goýmak: .toon-char: nth-çaga (4n) {- bazany aýlamak: -2deg; } .toon-char: nth-çaga (4n + 1) {- bazany aýlamak: -4deg; } .toon-char: nth-çaga (4n + 2) {- bazany aýlamak: 2deg; } .toon-char: nth-çaga (4n + 3) {- bazany aýlamak: 4deg; }
.toon-char: nth-çaga (4n) {animasiýa-gijikdirme: 0,1s; } .toon-char: nth-çaga (4n + 1) {animasiýa-gijikdirme: 0.3s; } .toon-char: nth-çaga (4n + 2) {animasiýa-gijikdirme: 0,5s; } .toon-char: nth-çaga (4n + 3) {animasiýa-gijikdirme: 0.7s; }
Täsir galdyrmak üçin bir çarçuwa Multfilm adynyň suratkeşlerinde täsir galdyrmak üçin bir ramka bardy we olaryň tipografiýasy surat çeken sungat eserleri ýaly möhümdi. Internetde-de edil şonuň ýaly. Gowy dizaýn edilen sözbaşy ýa-da gahrymansebite aýdyňlyk, häsiýet we ynam gerek - diňe solup giden doly giňlikdäki fon suraty däl. Birnäçe seresaplylyk bilen saýlanan CSS häsiýetleri - kölegeler, urgylar, kesilen fonlar we käbir çäklendirilen animasiýa bilen - şol bir täsiri döredip bileris. Tekst tekstini nostalgiki bolanym üçin däl-de, dizaýny bilgeşleýin bolany üçin gowy görýärin. Bilgeşleýin saýlap alyň we biraz gysga tekst tipografiýasy dizaýnlaryňyza zarba goşsun.
