CSS және SVG анимациялары туралы бәрін білуді талап ететін жобаны аяқтағаннан кейін мен Smashing Animations және «Классикалық мультфильмдер заманауи CSS-ті қалай шабыттандырады» туралы осы серияны жаза бастадым. Осы жылды қорытындылау үшін мен сізге Toon Titles-ді соншалықты әсерлі ететін элементті жасау үшін заманауи CSS-ті қалай пайдалану керектігін көрсеткім келеді: олардың типографиясы. Тақырып Өнер туындысының дизайны 1920-шы жылдардың үнсіз дәуірінде және 30-жылдардың басында фильмнің титул картасының типографиясы көңіл-күйді тудырды, көріністі белгіледі және көрермендерге олар көру үшін төлейтін фильм түрін еске түсірді.
Мультфильмнің титулдық карталары да бренд, көңіл-күй және көріністі белгілеу болды, барлығы бір жерде. Бастапқы жылдары, негізгі студия бюджеттері үлкен болған кезде, бұл титулдық карталар көбінесе иллюстрациялық және суретші болды.
Бірақ 1950 жылдары теледидар өркендеген кезде, бюджеттер азайып, Лоуренс «Арт» Гобл сияқты суретшілер жасаған карталар графикалық, стильдендірілген және күрделірек бола отырып, жаңа көрнекі тілді қабылдады. Ескертпе: Лоуренс «Арт» Гобл - ғасырдың ортасындағы американдық анимацияның жиі назардан тыс қалған кейіпкерлерінің бірі. Ол ең алдымен 1950 және 1960 жылдардағы ең ықпалды жылдары Ханна-Барберада жұмыс істеді. Гобл кейіпкерлердің аниматоры емес еді. Оның рөлі атмосфераны құру болды, сондықтан ол The Flintstones, Huckleberry Hound, Quick Draw McGraw және Yogi Bear үшін орталарды, сондай-ақ әуенді белгілейтін ашылатын атау карталарын жасады. Оның логотипі бар картиналары бар титулдық карталары Ханна-Барбераның көрнекті келбетін анықтауға көмектесті. Гоблдың Quick Draw McGraw және Yogi Bear сияқты кейіпкерлерге арналған туындылары шағын теледидар экрандарында тиімді болды. Мультфильмдегі кадрды қайта шығарудың орнына, ол оның мәнін ашатын жалғыз, күшті идеяны - көбінесе силуэтте - ұсынуға назар аударды. «Аюлы қонжық» фильмінде Йоги тікұшақта ызылдап өтеді. Ол «Пикниктегі аю» фильмінде қолында пик-а-ник себетімен секіреді және «Жүлделік жекпе-жек» үшін Йоги тақырып мәтінін қорапқа салады.
Қозғалысы аз немесе мүлдем жоқ болғандықтан, Гоблдың жалғыз кадрлары көңіл-күйді тудыруы, көріністі орнатуы және оқиғаны сипаттауы керек болды. Олар мұны көркем шығармаға жиі біріктірілген жалпақ түстерді, графикалық пішіндерді және типографияны қолдана отырып жасады.
Интернетте жұмыс істейтін дизайнерлер ретінде, тоон атаулары бізге брендтің жеке басын қалай жеткізуге, алғашқы әсер қалдыруға және біреудің өнімді немесе веб-сайтты пайдалану тәжірибесін күту туралы көп нәрсені үйрете алады. Біз суретшілердің тиімді баннерлер, қондыру беттерінің тақырыптары және тіпті жақсы сән экрандарын жасау әдістерінен үйрене аламыз. Toon атауы типографиясы Мультфильм тақырыптарының карталары түрді кескінмен біріктіру тақырыпқа немесе кейіпкерге қажет соққыны қалай беретінін көрсетеді. Бірнеше мәтіндік көлеңке, мәтінді сызу және түрлендіру трюктері бар заманауи CSS сол энергияны пайдалануға мүмкіндік береді.
Toon мәтін тақырыбының генераторы Осы мақаланы жазу барысында мен өзім жақсы көретін мультфильм атаулары сияқты стильде мәтін құруға арналған құралдың пайдалы болатынын түсіндім. Сондықтан мен біреуін жасадым. My Toon Text Title Generator сізге түстермен, штрихтармен және бірнеше мәтін көлеңкелерімен тәжірибе жасауға мүмкіндік береді. Бояу ретін реттеуге, әріптер аралығын қолдануға, үлгі қаріптер таңдауында мәтінді алдын ала қарауға, содан кейін жобада пайдалану үшін жасалған CSS-ті тікелей алмасу буферіне көшіруге болады. Toon тақырыбы CSS Toon Text Title Generator сізге беретін CSS-ті жай ғана көшіріп қоюға болады. Бірақ оның не істейтінін толығырақ қарастырайық. Мәтін көлеңкесі Оджи Доггидің «Юк-Юк үйрек» эпизодының осы тақырыптағы түрін қараңыз, оның бозғылт сары әріптері және оны фоннан алып тастайтын және тереңдік елесін жасайтын күңгірт, қатты, офсеттік көлеңкесі бар.
Мәтіндік көлеңке төрт мәнді қабылдайтынын білетін шығарсыз: (1) көлденең және (2) тік ауытқулар, (3) бұлыңғыр және (4) тұтас немесе жартылай мөлдір болуы мүмкін түс. Бұл офсеттік мәндер оң немесе теріс болуы мүмкін, сондықтан мен төмен және оңға қарай тартылған қатты көлеңке арқылы «Юк-Юк үйректерін» қайталай аламын: түсі: #f7f76d; мәтіндік көлеңке: 5px 5px 0 #1e1904;
Екінші жағынан, бұл «Pint Giant» атауы теріс жартылай жұмсақ көлеңкесімен басқа сезімге ие: түсі: #c2a872; мәтіндік көлеңке: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Қосымша тереңдік қосу және қызықты әсерлер жасау үшін мен бірнеше көлеңкелерді қабаттай аламын. «Let’s Duck Out» үшін мен төрт көлеңкені біріктіремін: мәтінді фоннан алып тастау үшін бірінші теріс көлденең ығысуы бар тұтас көлеңке, одан кейін айналасында бұлыңғырлық жасау үшін біртіндеп жұмсақ көлеңкелер: түсі: #6F4D80; мәтіндік көлеңке: -5px5px 0 #260e1e, /* 1 көлеңке */ 0 0 15px #e9ce96, /* 2 көлеңке */ 0 0 30px #e9ce96, /* Көлеңке 3 */ 0 0 30px #e9ce96; /* 4 көлеңке */
Бұл көлеңкелер мәтіндік көлеңкені пайдалану тек жарық әсерлерін жасау ғана емес екенін көрсетеді, өйткені олар сәндік болуы және тұлғаны қосуы мүмкін. Мәтін штрихы Көптеген мультфильм тақырыптары карталарында фоннан ерекшеленетін қалың контуры бар әріптер бар. Мен бұл әсерді мәтіндік штрих арқылы қайта жасай аламын. Ұзақ уақыт бойы бұл сипат тек -webkit- префиксі арқылы қол жетімді болды, бірақ бұл сонымен қатар оған қазіргі заманғы браузерлерде қолдау көрсетілетінін білдіреді.
мәтін штрихы – екі қасиеттің стенографиясы. Біріншісі, мәтін штрих-ені, жеке әріптердің айналасында контур салады, ал екіншісі, мәтін штрих-түсі оның түсін басқарады. "Whatever Goes Pup" үшін мен сары мәтінге 4px көк штрих қостым: түсі: #eff0cd; -webkit-text-stroke: 4px #7890b5; мәтін штрихы: 4px #7890b5;
Штрихтар әсіресе көлеңкелермен үйлескенде пайдалы болуы мүмкін, сондықтан «Өсуде, өсуде, жоғалуда» мен осы үш өлшемді мәтін әсерін жасау үшін бұлыңғыр 1 пиксель көлеңкеге жұқа 3 пиксель штрихын қостым: түсі: #fbb999; мәтін көлеңкесі: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; мәтін штрихы: 3px #984336;
Бояу тәртібі Мәтіндік штрихты пайдалану әрқашан күтілетін нәтиже бермейді, әсіресе жіңішке әріптер мен қалың штрихтармен, өйткені әдепкі бойынша браузер толтырудың үстіне штрих салады. Өкінішке орай, CSS әлі де Sketch-те жиі жасайтындай штрихты орналастыруды реттеуге мүмкіндік бермейді. Дегенмен, бояу реті сипатында штрихты толтырудың алдына емес, артына қоюға мүмкіндік беретін мәндер бар.
paint-order: штрих алдымен штрихты, содан кейін толтыруды бояйды, ал paint-order: fill керісінше жасайды: түсі: #fbb999; бояу реті: толтыру; мәтін көлеңкесі: 3px 5px 1px #5160b1; text-stroke-color:#984336; мәтін штрихының ені: 3px;
Тиімді штрих әріптерді оқылатын етіп сақтайды, салмақ қосады және көлеңкелермен және бояу ретімен үйлескенде — тегіс мәтіннің нақты болуын береді. Мәтін ішіндегі фон Көптеген мультфильм тақырыптарының карталары әріпке текстураны, градиенттерді немесе суреттелген мәліметтерді қосу арқылы тегіс түстен асып түседі. Кейде бұл текстура, басқа уақытта бұл нәзік тональдық ауысуы бар градиент болуы мүмкін. Интернетте бұл әсерді мәтіннің артындағы фондық суретті немесе градиентті пайдаланып, содан кейін оны әріптердің пішініне қию арқылы қайта жасай аламын. Бұл бірге жұмыс істейтін екі сипатқа негізделген: background-clip: text және text-fill-color: transparent.
Алдымен мәтіннің артына фон қолданамын. Бұл нүктелік кескін немесе векторлық кескін немесе CSS градиенті болуы мүмкін. Quick Draw McGraw эпизодындағы «Baba Bait» мысалы үшін тақырып мәтіні қараңғыдан ашыққа қарай жоғарыдан төменге нәзік градиентті қамтиды: фон: сызықтық-градиент(0deg, #667b6a, #1d271a);
Содан кейін мен бұл фонды глифтерге қиып аламын және фон келесідей көрінетіндей етіп мәтінді мөлдір етемін: -webkit-background-clip: мәтін; -webkit-text-fill-color: мөлдір;
Тек осы екі жолдың көмегімен фон енді мәтіннің артына боялмайды; орнына ол оның ішінде боялған. Бұл әдіс әсіресе штрихтармен және көлеңкелермен үйлескенде жақсы жұмыс істейді. Қиырылған градиент әріпті түс пен текстурамен қамтамасыз етеді, штрих оның жиектерін анық сақтайды, ал көлеңке оны фонда көтереді. Бірге олар қолмен боялған тақырыптық карталардың көп қабатты көрінісін кішкене CSS арқылы қайта жасайды. Әдеттегідей, кесілген мәтінді мұқият сынап көріңіз, өйткені шолғыштың құмарлығы кейде көлеңкелер мен көрсетуге әсер етуі мүмкін. Мәтінді жеке таңбаларға бөлу Кейде мен толық сөзді немесе тақырыпты стильдегім келмейді. Мен жеке әріптерді мәнерлендіргім келеді — кейіпкерді орнына итеру, бір глифке қосымша салмақ беру немесе бірнеше әріпті дербес жандандыру. Қарапайым HTML және CSS-де мұны істеудің бір ғана сенімді жолы бар: әрбір таңбаны өз аралық элементіне ораңыз. Мен мұны қолмен жасай алар едім, бірақ бұл нәзік, күтім жасау қиын болады және көшірме өзгерген кезде тез бұзылады. Оның орнына, әр әріпті басқару қажет болғанда, мен splt.js сияқты мәтінді бөлу кітапханасын пайдаланамын (бірақ басқа шешімдер қол жетімді). Бұл мәтіндік түйінді алады және сөздерді немесе таңбаларды автоматты түрде орап, маған белгілеуімді бұзбай, жандандыру және стильдеу үшін қосымша ілмектерді береді. Бұл менің HTML-ді оқылатын және семантикалық сақтайтын әдіс, сонымен бірге маған классикалық мультфильм тақырыптары карталарында көретін біркелкі емес, сипатқа ие типографияны қайта жасауым керек егжей-тегжейлі басқаруды береді. Дегенмен, бұл тәсіл бірге келедіқол жетімділік туралы ескертулер, өйткені экранды оқу құралдарының көпшілігі мәтін түйіндерін ретімен оқиды. Сонымен, бұл:
Тәтті гуіл
... сіз күткендей оқиды: Тәтті хум
Бірақ бұл:
H u м
…шолғышқа және экранды оқу құралына байланысты әртүрлі түсіндірілуі мүмкін. Кейбіреулер әріптерді біріктіріп, сөздерді дұрыс оқиды. Басқалары әріптер арасында үзіліс жасай алады, бұл ең нашар сценарийде келесідей көрінуі мүмкін: “H…” “U…” “M…”
Өкінішке орай, кейбір бөлу шешімдері әрқашан қол жетімді нәтиже бермейді, сондықтан мен қазір бета нұсқасында тұрған splinter.js мәтіндік бөлгішімді жаздым. Жеке әріптерді түрлендіру Toon Text Splitter-ді белсендіру үшін мен бөлгім келетін элементке деректер төлсипатын қосамын:
Тәтті гуіл
Біріншіден, менің сценарийім әрбір сөзді жеке әріптерге бөледі және оларды сынып және ARIA атрибуттары қолданылған span элементіне орады:
Содан кейін сценарий бөлінген элементтің бастапқы мазмұнын алады және қол жетімділікті сақтауға көмектесу үшін оны ария төлсипаты ретінде қосады:
Сол сынып атрибуттары қолданылғанда, мен жеке таңбаларды өз қалауымша мәнерлей аламын.
Мысалы, «Hum Sweet Hum» үшін мен оның әріптерінің негізгі сызықтан қалай ауысатынын қайталағым келеді. Toon Text Splitter-ді пайдаланғаннан кейін, мен жартылай кездейсоқ көріністі жасау үшін бірнеше :nth-child селекторлары арқылы төрт түрлі аудару мәнін қолдандым: /* 4, 8, 12... */ .toon-char:nth-child(4n) { аудару: 0 -8px; } /* 1-ші, 5-ші, 9-шы... */ .toon-char:nth-child(4n+1) {аудару: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { аудару: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {аудару: 0 8px; }
Бірақ аударма - бұл мультфильм мәтінін түрлендіру үшін пайдалануға болатын бір ғана сипат.
Мен сол жеке кейіпкерлерді одан да хаотикалық көрініс үшін айналдыра аламын: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { бұру: -4deg; } /* 1-ші, 5-ші, 9-шы... */ .toon-char:nth-child(4n+1) {rotate: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) {rotate: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {rotate: 8deg; }
Бірақ аударма - бұл мультфильм мәтінін түрлендіру үшін пайдалануға болатын бір ғана сипат. Мен сол жеке кейіпкерлерді одан да хаотикалық көрініс үшін айналдыра аламын: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { айналдыру: -4°; }
/* 1-ші, 5-ші, 9-шы... */ .toon-char:nth-child(4n+1) { айналдыру: -8 градус; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { айналдыру: 4°; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { айналдыру: 8 градус; }
Және, әрине, мен сол кейіпкерлерді дірілдеу үшін анимациялар қосып, мәтін стиліндегі тақырыптарды жандандыра аламын. Біріншіден, мен кейіпкерлерді айналдыратын негізгі кадр анимациясын жасадым:
@keyframes дірілдеу { 0%, 100% { түрлендіру: бұру(var(--базалық айналдыру, 0deg)); } 25% { түрлендіру: бұру(калк(var(--базалық айналдыру, 0deg) + 3deg)); } 50% { түрлендіру: бұру(калк(var(--базалық айналдыру, 0deg) - 2deg)); } 75% { түрлендіру: бұру(калк(var(--базалық айналдыру, 0deg) + 1deg)); } }
Оны Toon Text Splitter арқылы жасалған аралық элементтеріне қолданбас бұрын: .toon-char { анимация: дірілдеу 3s шексіз жеңілдету; түрлендіру-шығу: орталық төменгі; }
Соңында, әрбір таңба шайқалта бастағанға дейін айналу мөлшерін және кешіктіруді орнату: .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) { анимацияның кешігуі: 0,1 с; } .toon-char:nth-child(4n+1) { анимацияның кешігуі: 0,3 с; } .toon-char:nth-child(4n+2) { анимацияның кешігуі: 0,5с; } .toon-char:nth-child(4n+3) { анимацияның кешігуі: 0,7с; }
Әсер ету үшін бір кадр Мультфильмнің суретшілерінде әсер қалдыру үшін бір кадр болды және олардың типографиясы олар салған өнер туындылары сияқты маңызды болды. Интернетте де солай. Жақсы жобаланған тақырып немесе кейіпкераймақ анықтықты, сипат пен сенімділікті қажет етеді - бұл жай ғана толық енді өң суреті емес. Бірнеше мұқият таңдалған CSS сипаттарымен - көлеңкелер, штрихтар, кесілген фон және кейбір шектелген анимация - біз сол әсерді қайта жасай аламыз. Мен фильм мәтінін ностальгиялық болғандықтан емес, оның дизайны әдейі жасалғандықтан жақсы көремін. Әдейі таңдау жасаңыз және кішкентай мәтіндік типографияға сіздің дизайныңызға әсер ету мүмкіндігін беріңіз.
