Пас аз анҷом додани лоиҳае, ки аз ман талаб мекард, ки ҳама чизро дар бораи аниматсияҳои CSS ва SVG омӯзам, ман ба навиштани ин силсила дар бораи Smashing Animations ва "Чӣ тавр карикатураҳои классикӣ CSS-и муосирро илҳом мебахшанд" оғоз кардам. Барои ҷамъбасти ин сол, ман мехоҳам ба шумо нишон диҳам, ки чӣ гуна истифода бурдани CSS-и муосирро барои сохтани он унсуре, ки Toon Titles -ро хеле таъсирбахш мекунад: типографияи онҳо. Сарлавҳа Тарҳрезии асар Дар давраи хомӯшии солҳои 1920 ва ибтидои солҳои 30-ум, матбааи корти унвони филм кайфиятро ба вуҷуд овард, саҳнаро муқаррар кард ва ба тамошобинон намуди филмеро, ки барои дидани онҳо пардохта буданд, хотиррасон кард.
Кортҳои унвони мультфильмҳо инчунин бренди, рӯҳия ва танзими саҳна буданд, ки ҳама ба як печонида шудаанд. Дар солҳои аввал, вақте ки буҷаҳои асосии студияҳо калонтар буданд, ин кортҳои унвонӣ аксар вақт тасвирӣ ва рангоранг буданд.
Аммо вақте ки телевизион дар солҳои 1950-ум авҷ гирифт, буҷаҳо коҳиш ёфтанд ва кортҳое, ки рассомон ба монанди Лоуренс "Арт" Гобл таҳия кардаанд, забони нави визуалиро қабул карданд, ки бештар графикӣ, услубӣ ва мураккабтар шуданд. Эзоҳ: Лоуренс "Арт" Гобл яке аз қаҳрамонони аниматсияи миёнаи асримиёнагии Амрикост. Вай пеш аз ҳама барои Ҳанна-Барбера дар солҳои бонуфузтарин дар солҳои 1950 ва 1960 кор кардааст. Гобл аниматори қаҳрамон набуд. Нақши ӯ эҷоди муҳит буд, аз ин рӯ ӯ муҳитҳоро барои The Flintstones, Huckleberry Hound, Quick Draw McGraw ва Yogi Bear, инчунин кортҳои сарлавҳаи кушода, ки оҳангро муқаррар мекунанд, тарроҳӣ кард. Кортҳои унвонии ӯ, ки дорои расмҳои дорои логотипи болоӣ буданд, ба муайян кардани намуди барҷастаи Ҳанна-Барбер кӯмак карданд. Асарҳои Гобл барои қаҳрамонҳо ба монанди Quick Draw McGraw ва Yogi Bear дар экранҳои хурдтари телевизион самаранок буданд. Ба ҷои таҷдиди кадри мультфильм, ӯ ба пешниҳоди як идеяи қавӣ, аксар вақт дар силуэт, ки моҳияти онро инъикос мекард, тамаркуз кард. Дар филми "Хирс Баззин" Йоги дар чархбол ғазаб мекунад. Вай дар даст сабади аксбардорӣ дар "Хирс дар пикник" парида дур мешавад ва барои "Мубориза бо ҷоиза"-и худ Йоги матни сарлавҳаро қуттӣ мекунад.
Бо кам ё тамоман ҳаракат барои такя кардан, чаҳорчӯбаҳои ягонаи Гобл бояд рӯҳия эҷод кунанд, саҳнаро муқаррар кунанд ва ҳикояро тавсиф кунанд. Онҳо ин корро бо истифода аз рангҳои ҳамвор, шаклҳои графикӣ ва матбаа анҷом доданд, ки аксар вақт ба асари санъат ворид карда мешуданд.
Ҳамчун тарроҳоне, ки дар интернет кор мекунанд, унвонҳои тоон метавонанд ба мо дар бораи интишори шахсияти бренд, таассуроти аввалин ва интизории таҷрибаи касе бо истифода аз маҳсулот ё вебсайт омӯзанд. Мо метавонем аз усулҳои рассомон барои сохтани баннерҳои муассир, сарлавҳаҳои саҳифаи фурудгоҳ ва ҳатто экранҳои зебои лаппиш омӯзем. Typography Title Toon Кортҳои сарлавҳаи мультфильм нишон медиҳанд, ки чӣ гуна якҷоя кардани навъи тасвир бо тасвир зарбаи ба сарлавҳа ё қаҳрамон ниёз дорад. Бо як чанд ҳиллаҳои матн-соя, зарбаи матн ва ҳиллаҳои табдил, CSS-и муосир ба шумо имкон медиҳад, ки ҳамон энергияро истифода баред.
Генератори унвони матни Toon Ҳангоми навиштани ин мақола ман фаҳмидам, ки асбобе барои тавлиди матн ба мисли унвонҳои карикатурае, ки ман хеле дӯст медорам, муфид хоҳад буд. Пас ман якто кардам. Генератори сарлавҳаи матнии My Toon ба шумо имкон медиҳад, ки бо рангҳо, зарбаҳо ва сояҳои сершумори матн озмоиш кунед. Шумо метавонед тартиби рангро танзим кунед, фосилаи ҳарфҳоро истифода баред, матни худро дар интихоби ҳуруфҳои намунавӣ пешнамоиш кунед ва сипас CSS-и тавлидшударо мустақиман ба буфери худ нусхабардорӣ кунед, то дар лоиҳа истифода баред. Title CSS Шумо метавонед танҳо CSS-ро, ки Generator Text Title Generator ба шумо пешкаш мекунад, нусхабардорӣ кунед. Аммо биёед муфассалтар бубинем, ки он чӣ кор мекунад. Сояи матн Ба навъи ин унвон аз эпизоди Оҷи Догги "Дук Юк-Юк" нигаред, ки бо ҳарфҳои зарди саманд ва сояи торик, сахт ва офсетӣ, ки онро аз замина дур мекунад ва иллюзияи амиқро эҷод мекунад.
Эҳтимол шумо аллакай медонед, ки сояи матн чаҳор арзишро қабул мекунад: (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- дастрас буд, аммо ин инчунин маънои онро дорад, ки он ҳоло дар браузерҳои муосир дастгирӣ мешавад.
text-stroke стенографияи ду хосият аст. Якум, паҳнои матн, контурро дар атрофи ҳарфҳои инфиродӣ мекашад, дар ҳоле ки дуюм, ранги матни матн, ранги онро идора мекунад. Барои "Ҳар чӣ мешавад, сагбача" ман ба матни зард зарбаи кабуди 4px илова кардам: ранг: #eff0cd; -webkit-text-stroke: 4px # 7890b5; зарбаи матнӣ: 4px #7890b5;
Зарбаҳо метавонанд махсусан вақте муфид бошанд, ки онҳо бо сояҳо якҷоя мешаванд, аз ин рӯ барои "Рушд кардан, парвариш кардан, рафтан" ман зарбаи лоғар 3px ба сояи базӯр норавшан 1px илова кардам, то ин эффекти матни сеченакаро эҷод кунад: ранг: #fbb999; сояи матн: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px # 984336; матни зарбаи: 3px # 984336;
Тартиби ранг кардан Истифодаи зарбаи матнӣ на ҳамеша натиҷаи интизорравандаро медиҳад, махсусан бо ҳарфҳои бориктар ва зарбаҳои ғафс, зеро ба таври нобаёнӣ браузер бар болои пуркунӣ зарба мекашад. Мутаассифона, CSS то ҳол ба ман иҷоза намедиҳад, ки ҷойгиркунии зарбаро танзим кунам, чуноне ки ман аксар вақт дар Sketch мекунам. Бо вуҷуди ин, хосияти рангубор дорои арзишҳое мебошад, ки ба ман имкон медиҳанд, ки зарбаро на дар пеш, балки дар паси пур ҷойгир кунам.
Ранг-тартиби: зарба аввал зарбаро ранг мекунад, баъд пурро, дар сурате ки ранг-тартиби: пур акси онро иҷро мекунад: ранг: #fbb999; ранг кардан: пур кардан; сояи матн: 3px 5px 1px #5160b1; матн-расс-ранг: # 984336; паҳнои матн: 3px;
Инсулти муассир ҳарфҳоро хонданӣ нигоҳ медорад, вазн илова мекунад ва - ҳангоми якҷоя бо сояҳо ва тартиби ранг - мавҷудияти воқеии матни ҳамворро медиҳад. Замина дар дохили матн Бисёре аз кортҳои унвони мультфильмҳо бо илова кардани матн, градиентҳо ё тафсилоти тасвирӣ ба ҳарфҳо аз ранги ҳамвор берун мераванд. Баъзан ин матн аст, баъзан он метавонад градиент бо тағирёбии нозуки тонӣ бошад. Дар веб, ман метавонам ин эффектро бо истифода аз тасвири замина ё градиент дар паси матн дубора эҷод кунам ва сипас онро ба шакли ҳарфҳо буред. Ин ба ду хосияте, ки якҷоя кор мекунанд, такя мекунад: background-clip: text ва text-fill-color: transparent.
Аввалан, ман паси матн замина истифода мекунам. Ин метавонад тасвири bitmap ё вектор ё градиенти CSS бошад. Барои ин мисол аз эпизоди Quick Draw McGraw "Baba Bait", матни сарлавҳа градиенти нозуки боло аз поён аз торик то равшаниро дар бар мегирад: замина: градиенти хатӣ (0deg, #667b6a, #1d271a);
Баъдан, ман он заминаро ба глифҳо мебурам ва матнро шаффоф мегардонам, то замина тавассути: -webkit-background-clip: матн; -webkit-матн-пур-ранг: шаффоф;
Танҳо бо ин ду сатр пас замина дигар паси матн ранг карда намешавад; ба ҷои он, дар дохили он ранг карда шудааст. Ин техника махсусан ҳангоми якҷоя бо зарбаҳо ва сояҳо хуб кор мекунад. Градиенти буридашуда ҳарфро бо ранг ва матн таъмин мекунад, зарба кунҷҳои онро тез нигоҳ медорад ва соя онро аз замина баланд мекунад. Якҷоя, онҳо намуди қабати кортҳои унвонҳои дастӣ рангшударо бо истифода аз як чизи каме CSS дубора эҷод мекунанд. Мисли ҳамеша, матни буридашударо бодиққат санҷед, зеро ғаразҳои браузер баъзан метавонанд ба сояҳо ва намоиш таъсир расонанд. Тақсим кардани матн ба аломатҳои инфиродӣ Баъзан ман намехоҳам як калима ё сарлавҳаро услубӣ кунам. Ман мехоҳам ҳарфҳои инфиродиро услубӣ кунам - аломатро ба ҷои худ тела диҳам, ба як глиф вазни изофӣ диҳам ё мустақилона чанд ҳарфро анимат диҳам. Дар HTML ва CSS оддӣ, танҳо як роҳи боэътимоди ин кор вуҷуд дорад: ҳар як аломатро дар унсури span худ печонед. Ман ин корро дастӣ карда метавонам, аммо он ноустувор, нигоҳдорӣ душвор хоҳад буд ва ҳангоми тағир додани нусха ба зудӣ аз байн меравад. Ба ҷои ин, вақте ки ба ман назорати ҳар як ҳарф лозим аст, ман китобхонаи тақсимкунандаи матнро ба мисли splt.js истифода мебарам (гарчанде ки ҳалли дигар дастрас аст). Ин гиреҳи матнро мегирад ва ба таври худкор калимаҳо ё аломатҳоро мепечонад ва ба ман қалмоқҳои иловагӣ медиҳад, то аниматсионӣ ва услубро бидуни вайрон кардани аломатгузории ман. Ин равишест, ки HTML-и маро хондашаванда ва семантикӣ нигоҳ медорад ва дар ҳоле ки ба ман назорати дақиқ медиҳад, ман бояд типографияи нобаробар ва характеристикаро, ки шумо дар кортҳои унвонҳои мультфильмҳои классикӣ мебинед, дубора эҷод кунам. Бо вуҷуди ин, ин равиш бо он меоядогоҳии дастрасӣ, зеро аксари хонандагони экран гиреҳҳои матниро бо тартиб мехонанд. Пас ин:
Хум ширин Хум
... тавре мехонад, ки шумо интизор будед: Хум ширин Хум
Аммо ин:
H у м
...вобаста ба браузер ва хонандаи экран метавонад гуногун шарҳ дода шавад. Баъзеҳо ҳарфҳоро ба ҳам мепайвандад ва калимаҳоро дуруст мехонанд. Дигарон метавонанд дар байни ҳарфҳо таваққуф кунанд, ки дар сенарияи бадтарин метавонад чунин садо диҳад: “Ҳ…” “У…” “М…”
Мутаассифона, баъзе қарорҳои тақсимкунӣ натиҷаи ҳамеша дастрас намедиҳанд, аз ин рӯ ман splitter матнии худро, splinter.js, ки ҳоло дар бета аст, навиштам. Табдил додани ҳарфҳои инфиродӣ Барои фаъол кардани Toon Text Splitter, ман атрибути data-ро ба элементе, ки мехоҳам тақсим кунам, илова мекунам:
Hum Sweet Hum
Аввалан, скрипти ман ҳар як калимаро ба ҳарфҳои алоҳида ҷудо мекунад ва онҳоро дар як унсури span бо атрибутҳои синф ва ARIA истифода мебарад:
Сипас скрипт мундариҷаи ибтидоии унсури тақсимшударо мегирад ва онро ҳамчун атрибути ария илова мекунад, то дастрасиро нигоҳ дорад:
Бо истифода бурдани он атрибутҳои синф, ман метавонам аломатҳои инфиродиро тавре ки интихоб мекунам, услубӣ кунам.
Масалан, барои "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) {rotate: -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:нум-кудак(4n) { гардиш: -4deg; }
/* 1, 5, 9... */ .toon-char: кӯдаки нум (4n+1) { гардиш: -8deg; }
/* 2, 6, 10... */ .toon-char: кӯдаки нум (4n+2) { гардиш: 4deg; }
/* 3, 7, 11... */ .toon-char: кӯдаки нум (4n+3) { гардиш: 8 дараҷа; }
Ва, албатта, ман метавонам аниматсияҳо илова кунам, то ин аломатҳоро ҷӯр кунанд ва унвонҳои сабки матнии худро зинда гардонам. Аввалан, ман як аниматсияи чаҳорчӯбаи калидӣ сохтам, ки аломатҳоро давр мезанад:
@keyframes jiggle { 0%, 100% { табдил додан: гардиш (var(--база-ротат, 0deg)); } 25% {табдил додан: гардиш (ҳисоб (var(--база-гардон, 0deg) + 3deg)); } 50% { табдил додан: гардиш (ҳисоб (var(--база-гардон, 0deg) - 2deg)); } 75% {табдил додан: гардиш (ҳисоб (var(--база-гардон, 0deg) + 1deg)); } }
Пеш аз истифодаи он ба унсурҳои span, ки аз ҷониби ман Toon Text Splitter сохта шудааст: .toon-char { аниматсия: jiggle 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 - сояҳо, зарбаҳо, заминаҳои буридашуда ва баъзе аниматсияҳои маҳдуд - мо метавонем ҳамон таъсирро дубора эҷод кунем. Ман матни тӯлониро на аз он сабаб дӯст медорам, ки ман ҳасрат дорам, балки барои он ки тарҳи он қасдан аст. Интихоби қасдан анҷом диҳед ва бигзоред, ки матбааи матнии андаке ба тарроҳии шумо таъсир гузорад.
