Mendan CSS va SVG animatsiyalari haqida hamma narsani oʻrganishim kerak boʻlgan loyihani tugatgandan soʻng, Smashing Animations va “Klassik multfilmlar zamonaviy CSS-ni qanday ilhomlantirishi” haqidagi ushbu turkumni yozishni boshladim. Bu yilni yakunlash uchun men sizga Toon Titles-ni juda ta'sirli qiladigan elementni yaratish uchun zamonaviy CSS-dan qanday foydalanishni ko'rsatmoqchiman: ularning tipografiyasi. Sarlavha San'at asari dizayni 1920-yillar va 30-yillarning boshidagi jimjitlik davrida film nomi kartasining tipografiyasi kayfiyatni yaratdi, sahnani o'rnatdi va tomoshabinlarga ular ko'rish uchun pul to'lagan film turini eslatdi.
Multfilmlar sarlavhasi kartalari ham brend, kayfiyat va sahna ko'rinishlaridan iborat bo'lib, ularning barchasi bir joyga jamlangan. Dastlabki yillarda, asosiy studiya byudjetlari kattaroq bo'lganida, bu sarlavha kartalari ko'pincha tasviriy va tasviriy edi.
Ammo 1950-yillarda televidenie gullab-yashnaganida, byudjetlar pasayib ketdi va Lourens "Art" Goble kabi rassomlar tomonidan yaratilgan kartalar yangi vizual tilni o'zlashtirib, yanada grafik, stilize va kamroq murakkab bo'lib qoldi. Eslatma: Lourens "Art" Gobl - asr o'rtalarida Amerika animatsiyasining ko'pincha e'tibordan chetda qoladigan qahramonlaridan biri. U birinchi navbatda Xanna-Barbera uchun 1950 va 1960 yillardagi eng nufuzli yillarida ishlagan. Gobl personajlar animatori emas edi. Uning roli atmosferani yaratish edi, shuning uchun u The Flintstones, Huckleberry Hound, Quick Draw McGraw va Yogi Bear uchun muhitlarni ishlab chiqdi, shuningdek, ohangni o'rnatadigan ochilish sarlavhalari kartalarini yaratdi. Uning logotipli rasmlari bo'lgan sarlavha kartalari Xanna-Barberaning ramziy qiyofasini aniqlashga yordam berdi. Goblening Quick Draw McGraw va Yogi Bear kabi personajlar uchun asarlari kichikroq televizor ekranlarida samarali bo'ldi. Multfilmdagi kadrni takrorlash o'rniga, u asosiy e'tiborni uning mohiyatini aks ettiruvchi yagona kuchli g'oyani - ko'pincha siluetda - taqdim etishga qaratdi. "Buzzin' Bear" filmida Yogi vertolyotda o'tadi. U “Piknikdagi ayiq” filmida qo‘lida piktogramma savatchasi bilan uzoqlashadi va “Qo‘rquv mukofoti” uchun Yogi sarlavha matnini qutiga soladi.
Tayanish uchun juda oz yoki hech qanday harakatsiz, Goblning yagona ramkalari kayfiyatni yaratishi, sahnani o'rnatishi va hikoyani tasvirlashi kerak edi. Ular buni san'at asariga tez-tez kiritilgan tekis ranglar, grafik shakllar va tipografiya yordamida amalga oshirdilar.
Internetda ishlaydigan dizaynerlar sifatida toon nomlari bizga brendning shaxsiyatini qanday etkazish, birinchi taassurot qoldirish va mahsulot yoki veb-saytdan foydalanish tajribasini kutish haqida ko'p narsalarni o'rgatishi mumkin. Biz rassomlarning samarali bannerlar, ochilish sahifalari sarlavhalari va hatto yaxshi eskirgan ekranlarni yaratish usullarini o'rganishimiz mumkin. Toon Title Tipografiyasi Multfilm sarlavhalari kartalari tasvirlar bilan turni birlashtirish sarlavha yoki qahramonga qanday zarba berishini ko'rsatadi. Bir nechta matn soyasi, matn chizig'i va o'zgartirish usullari bilan zamonaviy CSS sizga xuddi shu energiyadan foydalanish imkonini beradi.
Toon matn sarlavhasi generatori Ushbu maqolani yozish jarayonida men juda yaxshi ko'rgan multfilm sarlavhalari kabi uslubdagi matn yaratish uchun vositaga ega bo'lish foydali bo'lishini angladim. Shunday qilib, men bitta qildim. My Toon Text Title Generator sizga ranglar, chiziqlar va bir nechta matn soyalari bilan tajriba o'tkazish imkonini beradi. Siz bo'yash tartibini sozlashingiz, harflar oralig'ini qo'llashingiz, namuna shriftlari tanlovida matningizni oldindan ko'rishingiz va keyin loyihada foydalanish uchun yaratilgan CSS-ni to'g'ridan-to'g'ri clipboardga nusxalashingiz mumkin. Toon Title CSS Toon Text Title Generator sizga taqdim etgan CSS-ni shunchaki nusxa ko'chirishingiz va joylashtirishingiz mumkin. Ammo keling, nima qilishini batafsil ko'rib chiqaylik. Matn soyasi Augie Doggie-ning "Yuk-Yuk o'rdak" epizodidagi ushbu sarlavhadagi turga qarang, uning och sariq harflari va qorong'i, qattiq, ofset soyasi fondan olib tashlaydi va chuqurlik illyuziyasini yaratadi.
Matn soyasi to'rtta qiymatni qabul qilishini bilsangiz kerak: (1) gorizontal va (2) vertikal ofsetlar, (3) loyqalik va (4) qattiq yoki yarim shaffof bo'lishi mumkin bo'lgan rang. Ushbu ofset qiymatlari ijobiy yoki salbiy bo'lishi mumkin, shuning uchun pastga va o'ngga tortilgan qattiq soya yordamida "Yuk-Yuk o'rdak" ni takrorlashim mumkin: rang: #f7f76d; matn soyasi: 5px 5px 0 #1e1904;
Boshqa tomondan, bu "Pint Giant" sarlavhasi o'zining salbiy yarim yumshoq soyasi bilan boshqacha tuyg'uga ega: rang: #c2a872; matn soyasi: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Qo'shimcha chuqurlik qo'shish va yanada qiziqarli effektlarni yaratish uchun men bir nechta soyalarni qatlamlashim mumkin. "Let's Duck Out" uchun men to'rtta soyani birlashtiraman: birinchisi, matnni fondan olib tashlash uchun salbiy gorizontal ofsetli qattiq soya, keyin esa atrofni xiralashtirish uchun asta-sekin yumshoqroq soyalar: rang: #6F4D80; matn soyasi: -5px5px 0 #260e1e, /* Soya 1 */ 0 0 15px #e9ce96, /* Soya 2 */ 0 0 30px #e9ce96, /* Soya 3 */ 0 0 30px #e9ce96; /* Soya 4 */
Ushbu soyalar matn soyasidan foydalanish nafaqat yorug'lik effektlarini yaratish ekanligini ko'rsatadi, chunki ular dekorativ bo'lishi va shaxsiyatni qo'shishi mumkin. Matn zarbasi Ko'pgina multfilm sarlavhalari kartalarida qalin konturli harflar mavjud bo'lib, ular fondan ajralib turadi. Men bu effektni matn zarbasi yordamida qayta yaratishim mumkin. Uzoq vaqt davomida bu xususiyat faqat -webkit- prefiksi orqali mavjud edi, ammo bu ayni paytda u zamonaviy brauzerlarda qo'llab-quvvatlanayotganini anglatadi.
matn konturi ikkita xususiyatning qisqartmasi. Birinchisi, matn chizig'i kengligi alohida harflar atrofida kontur chizadi, ikkinchisi, matn chizig'i rangi esa uning rangini boshqaradi. "Whatever Goes Pup" uchun men sariq matnga 4px ko'k chiziq qo'shdim: rang: #eff0cd; -webkit-text-stroke: 4px #7890b5; matn chizig'i: 4px #7890b5;
Chiziqlar, ayniqsa, soyalar bilan birlashtirilganda foydali bo'lishi mumkin, shuning uchun "O'sish, o'sish, ketish" uchun men ushbu uch o'lchamli matn effektini yaratish uchun zo'rg'a xiralashgan 1px soyaga nozik 3px chiziq qo'shdim: rang: #fbb999; matn soyasi: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; matn chizig'i: 3px #984336;
Bo'yoq tartibi Matn chizig'idan foydalanish har doim ham kutilgan natijani bermaydi, ayniqsa ingichka harflar va qalinroq chiziqlar bilan, chunki sukut bo'yicha brauzer to'ldirish ustiga chiziq chizadi. Afsuski, CSS menga Sketch-da tez-tez bo'lgani kabi, konturning joylashishini sozlashimga ruxsat bermaydi. Biroq, bo'yoq-tartibi xususiyati menga shtrixni plomba oldidan emas, orqasida joylashtirishga imkon beruvchi qadriyatlarga ega.
paint-order: stroke avval chiziqni, keyin to'ldirishni bo'yaydi, bo'yoq tartibi: to'ldirish esa buning aksini qiladi: rang: #fbb999; bo'yoq tartibi: to'ldirish; matn soyasi: 3px 5px 1px #5160b1; matn chizig'i rangi: #984336; matn chizig'i kengligi: 3px;
Samarali zarba harflarni o'qilishi mumkin bo'ladi, og'irlik qo'shadi va soyalar va bo'yoq tartibi bilan birlashganda - tekis matnning haqiqiy mavjudligini beradi. Matn ichidagi fonlar Ko'pgina multfilm sarlavhalari kartalari harflarga tekstura, gradientlar yoki tasvirlangan tafsilotlarni qo'shish orqali tekis rangdan tashqariga chiqadi. Ba'zan bu tekstura bo'lsa, boshqa paytlarda nozik ohangli siljishli gradient bo'lishi mumkin. Internetda matn orqasidagi fon tasviri yoki gradientdan foydalanib, keyin uni harflar shakliga kesib olish orqali ushbu effektni qayta yaratishim mumkin. Bu birgalikda ishlaydigan ikkita xususiyatga tayanadi: fon-klip: matn va matnni to'ldirish-rang: shaffof.
Birinchidan, men matn orqasida fonni qo'llayman. Bu bitmap yoki vektor tasviri yoki CSS gradienti bo'lishi mumkin. Quick Draw McGraw epizodidagi "Baba Bait" misolida sarlavha matni qorong'udan yorug'likka qadar nozik yuqoridan pastgacha gradientni o'z ichiga oladi: fon: chiziqli-gradient (0deg, #667b6a, #1d271a);
Keyin, men fonni gliflarga qirqib, matnni shaffof qilaman, shunda fon quyidagicha ko'rinadi: -webkit-fon-klip: matn; -webkit-matn-to'ldirish-rang: shaffof;
Faqat shu ikki qator bilan fon endi matn orqasiga bo'yalmaydi; Buning o'rniga, uning ichida bo'yalgan. Ushbu uslub, ayniqsa, zarbalar va soyalar bilan birlashtirilganda yaxshi ishlaydi. Kesilgan gradient harfni rang va tekstura bilan ta'minlaydi, chiziq uning qirralarini aniq saqlaydi va soya uni fondan ko'taradi. Birgalikda ular CSS-dan boshqa hech narsa ishlatmasdan qo'lda bo'yalgan sarlavha kartalarining qatlamli ko'rinishini qayta yaratadilar. Har doimgidek, kesilgan matnni diqqat bilan sinab ko'ring, chunki brauzerning g'ayrioddiyligi ba'zan soyalar va renderga ta'sir qilishi mumkin. Matnni alohida belgilarga bo'lish Ba'zan men butun so'z yoki sarlavhani uslublashni xohlamayman. Men individual harflarga uslub yaratmoqchiman - belgini joyiga qo'yish, bitta glifga qo'shimcha og'irlik berish yoki bir nechta harflarni mustaqil ravishda jonlantirish. Oddiy HTML va CSS-da buni amalga oshirishning faqat bitta ishonchli usuli bor: har bir belgini o'z span elementiga o'rash. Men buni qo'lda qilishim mumkin edi, lekin bu mo'rt, parvarish qilish qiyin va nusxa o'zgartirilganda tezda parchalanib ketadi. Buning o'rniga, har bir harfni boshqarish kerak bo'lganda, men splt.js kabi matnni ajratish kutubxonasidan foydalanaman (boshqa echimlar mavjud bo'lsa ham). Bu matn tugunini oladi va avtomatik ravishda so'zlarni yoki belgilarni o'rab oladi, bu menga belgilashimni buzmasdan jonlantirish va uslublash uchun qo'shimcha ilgaklar beradi. Bu mening HTML-ni o‘qilishi va semantikligini ta’minlaydigan yondashuv, shu bilan birga men klassik multfilm sarlavhalari kartalarida ko‘riladigan notekis, xarakterli tipografiyani qayta yaratishim kerak bo‘lgan nozik nazoratni beradi. Biroq, bu yondashuv bilan birga keladifoydalanish imkoniyati bo'yicha ogohlantirishlar, chunki aksariyat ekran o'quvchilari matn tugunlarini tartibda o'qiydilar. Shunday qilib, bu:
Hum Sweet Hum
... siz kutgandek o'qiydi: Xum Shirin Hum
Lekin bu:
H u m
…brauzer va ekranni o‘quvchiga qarab turlicha talqin qilinishi mumkin. Ba'zilar harflarni birlashtiradi va so'zlarni to'g'ri o'qiydi. Boshqalar esa, eng yomon stsenariyda shunday ko'rinishi mumkin bo'lgan harflar orasida pauza qilishi mumkin: “H…” “U…” “M…”
Afsuski, ba'zi ajratish yechimlari har doim ham foydalanish mumkin bo'lgan natijani bermaydi, shuning uchun men o'zimning matn ajratuvchi splinter.js ni yozdim, u hozirda beta-versiyada. Individual harflarni o'zgartirish Toon Text Splitter-ni faollashtirish uchun men ajratmoqchi bo'lgan elementga ma'lumotlar atributini qo'shaman:
Hum Sweet Hum
Birinchidan, mening skriptim har bir so'zni alohida harflarga ajratadi va ularni sinf va ARIA atributlari qo'llanilgan holda span elementiga o'radi:
Keyin skript ajratilgan elementning dastlabki mazmunini oladi va mavjudlikni saqlashga yordam berish uchun uni ariya atributi sifatida qo'shadi:
Ushbu sinf atributlari qo'llanilganda, men o'zim tanlaganimdek individual belgilarni shakllantirishim mumkin.
Misol uchun, "Hum Sweet Hum" uchun men uning harflari asosiy chiziqdan qanday siljishini takrorlashni xohlayman. Toon Text Splitter-dan foydalangandan so'ng, men yarim tasodifiy ko'rinish yaratish uchun bir nechta :nth-child selektorlari yordamida to'rt xil tarjima qiymatini qo'lladim: /* 4, 8, 12... */ .toon-char:nth-child(4n) { tarjima qilish: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) {tarjima: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) {tarjima: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {tarjima: 0 8px; }
Lekin translate men toon matnimni o'zgartirish uchun foydalanishim mumkin bo'lgan yagona xususiyatdir.
Bundan ham xaotik ko'rinish uchun o'sha individual belgilarni aylantirishim mumkin: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { aylantirish: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) {aylantirish: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) {aylantirish: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {aylantirish: 8deg; }
Lekin translate men toon matnimni o'zgartirish uchun foydalanishim mumkin bo'lgan yagona xususiyatdir. Bundan ham xaotik ko'rinish uchun o'sha individual belgilarni aylantirishim mumkin: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { aylantirish: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { aylantirish: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { aylantirish: 4 daraja; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { aylantirish: 8 daraja; }
Va, albatta, men o'sha belgilarni chalg'itish uchun animatsiyalarni qo'shishim va matn uslubidagi nomlarni jonlantirishim mumkin. Birinchidan, men belgilarni aylantiruvchi asosiy kadr animatsiyasini yaratdim:
@keyframes jiggle { 0%, 100% { o'zgartirish: aylantirish (var(--base-rotate, 0deg)); } 25% { aylantirish: aylantirish (hisoblash (var(--tayanch-aylantirish, 0deg) + 3deg)); } 50% { o'zgartirish: aylantirish (hisoblash (var(--base-aylantirish, 0deg) - 2deg)); } 75% { aylantirish: aylantirish (hisoblash (var(--tayanch-aylantirish, 0deg) + 1deg)); } }
Uni Toon Text Splitter tomonidan yaratilgan span elementlariga qo'llashdan oldin: .toon-char { animatsiya: jiggle 3s cheksiz qulaylik; transform-kelib chiqishi: markaziy pastki; }
Va nihoyat, har bir belgi tebranish boshlanishidan oldin aylanish miqdorini va kechikishni o'rnatish: .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) {animatsiya-kechikish: 0,1s; } .toon-char:nth-child(4n+1) {animatsiya kechikishi: 0,3s; } .toon-char:nth-child(4n+2) {animatsiya kechikishi: 0,5s; } .toon-char:nth-child(4n+3) {animatsiya kechikishi: 0,7s; }
Taassurot qoldirish uchun bitta ramka Multfilm sarlavhali rassomlar taassurot qoldirish uchun bitta ramkaga ega edilar va ularning tipografiyasi ular chizgan san'at asari kabi muhim edi. Internetda ham xuddi shunday. Yaxshi ishlab chiqilgan sarlavha yoki qahramonHudud aniqlik, xarakter va ishonchga muhtoj - shunchaki xira to'liq kenglikdagi fon tasviri emas. Ehtiyotkorlik bilan tanlangan bir nechta CSS xususiyatlari - soyalar, chiziqlar, kesilgan fonlar va ba'zi cheklangan animatsiya bilan biz xuddi shunday ta'sirni qayta yaratishimiz mumkin. Men toon matnini nostaljikligim uchun emas, balki uning dizayni qasddan qilinganligi uchun yaxshi ko'raman. Qasddan tanlov qiling va matnli tipografiya sizning dizaynlaringizga o'z hissasini qo'shishiga imkon bering.
