Pēc projekta pabeigšanas, kurā man bija jāiemācās viss par CSS un SVG animācijām, es sāku rakstīt šo sēriju par Smashing Animations un "Kā klasiskās multfilmas iedvesmo mūsdienu CSS". Noslēdzot šo gadu, es vēlos jums parādīt, kā izmantot mūsdienu CSS, lai izveidotu elementu, kas padara Toon Titles tik ietekmīgus: to tipogrāfiju. Nosaukums Mākslas darbu dizains 20. gadsimta 20. gadu un 30. gadu sākuma klusajā laikmetā filmas titulkartītes tipogrāfija radīja noskaņu, veidoja ainu un atgādināja skatītājiem par filmas veidu, par kuru viņi ir maksājuši.
Multfilmu titulkartes bija arī zīmols, noskaņojums un ainas iestatīšana, un tas viss tika apvienots vienā. Pirmajos gados, kad lielāko studiju budžeti bija lielāki, šīs titulkartītes bieži bija ilustratīvi un gleznieciski.
Taču, kad 1950. gados uzplauka televīzija, budžeti samazinājās, un tādu mākslinieku kā Lorenss “Arts” Goble izstrādātās kartes pārņēma jaunu vizuālo valodu, kļūstot grafiskāk, stilizētāk un mazāk sarežģītākas. Piezīme. Lorenss “Arts” Goble ir viens no bieži ignorētajiem gadsimta vidus amerikāņu animācijas varoņiem. Viņš galvenokārt strādāja Hanna-Barbera ietekmīgākajos 1950. un 1960. gados. Goble nebija varoņu animators. Viņa uzdevums bija radīt atmosfēru, tāpēc viņš veidoja vidi The Flintstones, Huckleberry Hound, Quick Draw McGraw un Yogi Bear, kā arī sākuma titulkartes, kas noteica toni. Viņa titulkartes, kurās bija attēlotas gleznas ar logotipu, palīdzēja definēt Hannas-Barberas ikonisko izskatu. Goble mākslas darbi tādiem varoņiem kā Quick Draw McGraw un Yogi Bear bija efektīvi mazākos TV ekrānos. Tā vietā, lai reproducētu karikatūras kadru, viņš koncentrējās uz vienas, spēcīgas idejas prezentēšanu — bieži vien siluetā —, kas atspoguļo tās būtību. Filmā “The Buzzin’ Bear” Jogi zummē ar helikopteru. Viņš atlec, turēdams bildes grozu rokā, filmā “Lācis piknikā”, un “Prize Fight Fright” Jogi ievieto virsraksta tekstu.
Ar nelielu kustību vai bez tās, uz ko paļauties, Goble atsevišķiem kadriem bija jārada noskaņa, jāizveido aina un jāapraksta stāsts. Viņi to darīja, izmantojot plakanas krāsas, grafiskas formas un tipogrāfiju, kas bieži tika integrēta mākslas darbā.
Kā dizaineriem, kas strādā tīmeklī, rīku nosaukumi var mums daudz iemācīt par to, kā izteikt zīmola personību, atstāt pirmo iespaidu un noteikt cerības uz kāda produkta vai vietnes lietošanas pieredzi. Mēs varam mācīties no mākslinieku paņēmieniem, lai izveidotu efektīvus reklāmkarogus, galveno lapu galvenes un pat vecmodīgus uzplaiksnījumu ekrānus. Toon virsraksta tipogrāfija Multfilmu virsrakstu kartītes parāda, kā veida sapludināšana ar attēliem nodrošina galvenei vai varonim nepieciešamo perforatoru. Izmantojot dažus teksta ēnošanas, teksta vilkšanas un pārveidošanas trikus, mūsdienu CSS ļauj izmantot šo pašu enerģiju.
Toon teksta virsrakstu ģenerators Rakstot šo rakstu, es sapratu, ka būtu noderīgs rīks teksta ģenerēšanai, kas veidots tā, kā man tik ļoti patīk multfilmu nosaukumi. Tāpēc es uztaisīju vienu. My Toon teksta virsrakstu ģenerators ļauj eksperimentēt ar krāsām, triepieniem un vairākām teksta ēnām. Varat pielāgot krāsu secību, lietot burtu atstarpes, priekšskatīt tekstu fontu paraugā un pēc tam kopēt ģenerēto CSS tieši starpliktuvē, lai to izmantotu projektā. Toon Title CSS Varat vienkārši nokopēt un ielīmēt CSS, ko jums nodrošina Toon teksta virsrakstu ģenerators. Bet aplūkosim tuvāk, ko tas dara. Teksta ēna Apskatiet veidu šajā nosaukumā no Ogija Dogija epizodes “Yuk-Yuk Duck” ar gaiši dzeltenajiem burtiem un tumšo, cieto, nobīdīto ēnu, kas to paceļ no fona un rada dziļuma ilūziju.
Jūs droši vien jau zināt, ka teksta ēna pieņem četras vērtības: (1) horizontālās un (2) vertikālās nobīdes, (3) izplūšana un (4) krāsa, kas var būt vienkrāsaina vai daļēji caurspīdīga. Šīs nobīdes vērtības var būt pozitīvas vai negatīvas, tāpēc es varu replicēt “Yuk-Yuk Duck”, izmantojot cietu ēnu, kas novilkta uz leju un pa labi: krāsa: #f7f76d; teksta ēna: 5 pikseļi 5 pikseļi 0 #1e1904;
No otras puses, šim nosaukumam “Pint Giant” ir atšķirīga sajūta ar tā negatīvo daļēji maigo ēnu: krāsa: #c2a872; teksta ēna: -7 pikseļi 5 pikseļi 0 #b100e, 0–5 pikseļi 10 pikseļi #546c6f;
Lai pievienotu papildu dziļumu un radītu interesantākus efektus, varu slāņot vairākas ēnas. “Let’s Duck Out” es apvienoju četras ēnas: pirmo viengabalainu ēnu ar negatīvu horizontālu nobīdi, lai paceltu tekstu no fona, kam seko pakāpeniski maigākas ēnas, lai ap to radītu izplūšanu. krāsa: #6F4D80; teksta ēna: -5 pikseļi5px 0 #260e1e, /* 1. ēna */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30 pikseļi #e9ce96; /* Shadow 4 */
Šīs ēnas parāda, ka teksta ēnas izmantošana nenozīmē tikai apgaismojuma efektu radīšanu, jo tās var būt arī dekoratīvas un piešķirt personību. Teksta insults Daudzās multfilmu titulkartītēs ir burti ar treknām kontūrām, kas tās izceļas no fona. Šo efektu varu atjaunot, izmantojot teksta vilkšanu. Ilgu laiku šis īpašums bija pieejams tikai ar prefiksu -webkit-, taču tas arī nozīmē, ka tagad tas tiek atbalstīts visās mūsdienu pārlūkprogrammās.
text-stroke ir divu rekvizītu saīsinājums. Pirmais, teksta gājiena platums, zīmē kontūru ap atsevišķiem burtiem, bet otrais, teksta gājiena krāsa, kontrolē tā krāsu. Sadaļā “Whatever Goes Pup” dzeltenajam tekstam pievienoju 4 pikseļu zilu svītru: krāsa: #eff0cd; -webkit-text-stroke: 4px #7890b5; teksta gājiens: 4px #7890b5;
Sitieni var būt īpaši noderīgi, ja tie ir apvienoti ar ēnām, tāpēc sadaļā “Pieaug, aug, pazuda” es pievienoju plānu 3 pikseļu vilkumu tik tikko izplūdušai 1 pikseļu ēnai, lai izveidotu šo trīsdimensiju teksta efektu: krāsa: #fbb999; teksta ēna: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; teksta gājiens: 3px #984336;
Krāsu pasūtījums Teksta vilkšanas izmantošana ne vienmēr nodrošina gaidīto rezultātu, jo īpaši ar plānākiem burtiem un biezākiem triepieniem, jo pēc noklusējuma pārlūkprogramma velk svītru virs aizpildījuma. Diemžēl CSS joprojām neļauj man pielāgot insulta izvietojumu, kā es to bieži daru programmā Sketch. Tomēr krāsas pasūtījuma rekvizītam ir vērtības, kas ļauj man virzienu novietot aiz aizpildījuma, nevis priekšā.
krāsošanas secība: insults vispirms nokrāso triepienu, pēc tam aizpildījumu, savukārt krāsošanas secība: aizpildīšana darbojas pretēji: krāsa: #fbb999; krāsas pasūtījums: pildījums; teksta ēna: 3px 5px 1px #5160b1; text-stroke-color:#984336; teksta gājiena platums: 3 pikseļi;
Efektīvs triepiens saglabā burtu lasāmību, palielina svaru un, apvienojumā ar ēnām un krāsu secību, piešķir plakanam tekstam patiesu izskatu. Foni teksta iekšpusē Daudzas multfilmu titulkartes ir plašākas nekā vienkrāsainas, burtiem pievienojot tekstūru, gradientus vai ilustrētas detaļas. Dažreiz tā ir tekstūra, citreiz tā var būt gradients ar smalku toņu nobīdi. Tīmeklī es varu atjaunot šo efektu, aiz teksta izmantojot fona attēlu vai gradientu un pēc tam apgriežot to burtu formā. Tas ir balstīts uz diviem rekvizītiem, kas darbojas kopā: fona klips: teksts un teksta aizpildīšanas krāsa: caurspīdīgs.
Pirmkārt, es aiz teksta izmantoju fonu. Tas var būt bitkartes vai vektora attēls vai CSS gradients. Šajā piemērā no Quick Draw McGraw epizodes “Baba Bait” virsraksta tekstā ir iekļauts smalks augšas–apakšas gradients no tumšas līdz gaišai: fons: lineārs gradients(0deg, #667b6a, #1d271a);
Pēc tam es apgriežu šo fonu līdz glifiem un padaru tekstu caurspīdīgu, lai fons būtu redzams cauri: -webkit-background-clip: teksts; -webkit-text-fill-color: caurspīdīgs;
Tikai ar šīm divām rindām fons vairs netiek krāsots aiz teksta; tā vietā tas ir iekrāsots tajā. Šis paņēmiens īpaši labi darbojas, ja to apvieno ar triepieniem un ēnām. Apgriezts gradients piešķir burtiem krāsu un tekstūru, triepiens saglabā tā malas asas, un ēna paceļ to no fona. Kopā viņi atjauno ar rokām apgleznotu titulkartīšu daudzslāņu izskatu, izmantojot tikai nelielu CSS. Kā vienmēr, rūpīgi pārbaudiet izgriezto tekstu, jo pārlūkprogrammas dīvainības dažkārt var ietekmēt ēnas un renderēšanu. Teksta sadalīšana atsevišķās rakstzīmēs Dažreiz es nevēlos veidot visu vārdu vai virsrakstu. Es vēlos pielāgot atsevišķus burtus — iebīdīt rakstzīmi vietā, piešķirt vienam glifam papildu nozīmi vai animēt dažus burtus atsevišķi. Vienkāršā HTML un CSS formātā ir tikai viens uzticams veids, kā to izdarīt: ietīt katru rakstzīmi savā span elementā. Es to varētu izdarīt manuāli, taču tas būtu trausls, grūti uzturējams un ātri sabruks, kad kopija mainās. Tā vietā, ja man ir nepieciešama katra burta kontrole, es izmantoju teksta sadalīšanas bibliotēku, piemēram, splt.js (lai gan ir pieejami arī citi risinājumi). Tas aizņem teksta mezglu un automātiski aplauza vārdus vai rakstzīmes, dodot man papildu iespējas animēt un veidot stilu, nesajaucot marķējumu. Tā ir pieeja, kas nodrošina manu HTML lasāmību un semantisku, vienlaikus sniedzot man nepieciešamo kontroli, lai atjaunotu nevienmērīgo, raksturīgo tipogrāfiju, ko redzat klasiskajās multfilmu titulkartītēs. Tomēr šī pieeja nāk arpieejamības brīdinājumi, jo vairums ekrāna lasītāju teksta mezglus lasa secībā. Tātad šis:
Hum Sweet Hum
…lasa, kā jūs gaidījāt: Hum Sweet Hum
Bet šis:
H jūs m
…var interpretēt atšķirīgi atkarībā no pārlūkprogrammas un ekrāna lasītāja. Daži burtus savienos un vārdus lasīs pareizi. Citi var pauzēt starp burtiem, kas sliktākajā gadījumā var izklausīties šādi: “H…” “U…” “M…”
Diemžēl daži sadalīšanas risinājumi nesniedz vienmēr pieejamu rezultātu, tāpēc esmu uzrakstījis savu teksta sadalītāju splinter.js, kas pašlaik ir beta versijā. Atsevišķu vēstuļu pārveidošana Lai aktivizētu savu Toon teksta sadalītāju, elementam, kuru vēlos sadalīt, pievienoju datu atribūtu:
Hum Sweet Hum
Pirmkārt, mans skripts katru vārdu atdala atsevišķos burtos un ieskauj tos elementā span, izmantojot klases un ARIA atribūtus:
Pēc tam skripts ņem sākotnējo sadalītā elementa saturu un pievieno to kā aria atribūtu, lai palīdzētu saglabāt pieejamību:
Izmantojot šos klases atribūtus, es pēc tam varu veidot atsevišķas rakstzīmes pēc savas izvēles.
Piemēram, “Hum Sweet Hum” es vēlos atkārtot, kā tā burti novirzās prom no bāzes līnijas. Pēc sava Toon teksta sadalītāja izmantošanas es izmantoju četras dažādas tulkošanas vērtības, izmantojot vairākus :nth-child atlasītājus, lai izveidotu daļēji nejaušu izskatu: /* 4., 8., 12.... */ .toon-char:nth-child(4n) { tulkot: 0 -8px; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { tulkot: 0 -4px; } /* 2., 6., 10... */ .toon-char:nth-child(4n+2) { tulkot: 0 4px; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { tulkot: 0 8px; }
Bet tulkošana ir tikai viens līdzeklis, ko varu izmantot, lai pārveidotu savu ton tekstu.
Es varētu arī pagriezt šīs atsevišķās rakstzīmes, lai iegūtu vēl haotiskāku izskatu: /* 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) { pagriezt: 4°; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { pagriezt: 8°; }
Bet tulkošana ir tikai viens līdzeklis, ko varu izmantot, lai pārveidotu savu ton tekstu. Es varētu arī pagriezt šīs atsevišķās rakstzīmes, lai iegūtu vēl haotiskāku izskatu: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { pagriezt: -4 grādiem; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { pagriezt: -8 grādiem; }
/* 2., 6., 10... */ .toon-char:nth-child(4n+2) { pagriezt par 4 grādiem; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { pagriezt par 8 grādiem; }
Un, protams, es varētu pievienot animācijas, lai izkustinātu šos varoņus un atdzīvinātu savus teksta stila nosaukumus. Pirmkārt, es izveidoju atslēgas kadra animāciju, kas rotē rakstzīmes:
@keyframes jiggle { 0%, 100% { transform: rotate(var(--base-rotate, 0deg)); } 25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Pirms lietojat to span elementiem, ko izveidojis mans teksta sadalītājs Toon: .toon-char { animācija: jiggle 3s bezgalīga atvieglošana iekšā-out; transformācijas izcelsme: centrs apakšā; }
Un visbeidzot, iestatiet rotācijas apjomu un aizkavi, pirms katra rakstzīme sāk ņirgāties: .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) { animācijas aizkave: 0,1 s; } .toon-char:nth-child(4n+1) { animācijas aizkave: 0,3 s; } .toon-char:nth-child(4n+2) { animācijas aizkave: 0,5 s; } .toon-char:nth-child(4n+3) { animācijas aizkave: 0,7 s; }
Viens rāmis, lai radītu iespaidu Karikatūras nosaukumu māksliniekiem bija viens rāmis, lai radītu iespaidu, un viņu tipogrāfija bija tikpat svarīga kā gleznotais mākslas darbs. Tas pats attiecas uz tīmekli. Labi izstrādāta galvene vai varonisapgabalam ir nepieciešama skaidrība, raksturs un pārliecība — nevis vienkārši izbalējis pilna platuma fona attēls. Izmantojot dažus rūpīgi izvēlētus CSS rekvizītus — ēnas, triepienus, apgrieztus fonus un nedaudz atturīgu animāciju — mēs varam atjaunot to pašu efektu. Man patīk teksts ne tāpēc, ka man ir nostalģija, bet gan tāpēc, ka tā dizains ir apzināts. Izdariet apzinātu izvēli un ļaujiet nelielai teksta tipogrāfijai piešķirt jūsu noformējumam izteiksmīgumu.
