CSS жана SVG анимациялары тууралуу баарын үйрөнүшүм керек болгон долбоорду аяктагандан кийин, мен бул серияларды Smashing Animations жана "Классикалык мультфильмдер заманбап CSS-ке кантип шыктандырат" жөнүндө жаза баштадым. Бул жылды жыйынтыктоо үчүн, мен сизге Toon Titles абдан таасирдүү болгон элементти түзүү үчүн заманбап CSSти кантип колдонууну көрсөткүм келет: алардын типографиясы. Аталышы Artwork Design 1920-жылдардын жана 30-жылдардын башында унчукпай турган доордо тасманын аталыш картасынын типографиясы маанайды жаратып, көрүнүштү түзүп, көрүүчүлөргө алар көрүүгө акча төлөгөн тасманын түрүн эске салды.
Мультфильмдин аталышы карталары да брендинг, маанай жана көрүнүштү чагылдырган, бардыгы бир түргө бириктирилген. Алгачкы жылдарда, негизги студиялардын бюджеттери чоңойгондо, бул титулдук карталар көбүнчө иллюстративдик жана живопистүү болчу.
Бирок 1950-жылдары телекөрсөтүү гүлдөп турганда, бюджеттер азайып, Лоуренс "Арт" Гобл сыяктуу сүрөтчүлөр тарабынан иштелип чыккан карталар жаңы визуалдык тилди кабыл алып, графикалык, стилдештирилген жана азыраак татаал болуп калды. Эскертүү: Лоуренс "Арт" Гобл - кылымдын орто чениндеги америкалык анимациянын көз жаздымда калган каармандарынын бири. Ал биринчи кезекте 1950 жана 1960-жылдардагы эң таасирдүү жылдарында Ханна-Барберада иштеген. Гобл каармандардын аниматору болгон эмес. Анын ролу атмосфераны түзүү болгон, ошондуктан ал "Флинтстондор", "Хеклберри Таза", "Тез тартуу МакГроу" жана "Иоги Аюу" үчүн чөйрөлөрдү, ошондой эле тонду аныктаган ачуучу титул карталарын иштеп чыккан. Анын логотип менен капталган сүрөттөрү камтылган титулдук карталары Ханна-Барберанын көрүнүктүү көрүнүшүн аныктоого жардам берген. Quick Draw МакГроу жана Йоги Аюу сыяктуу каармандар үчүн Гоблдын чыгармалары кичирээк телеэкрандарда натыйжалуу болгон. Мультфильмдеги кадрды кайра чыгаруунун ордуна, ал анын маңызын чагылдырган бирдиктүү, күчтүү идеяны - көбүнчө силуэтте көрсөтүүгө басым жасады. "Аюу аюу" тасмасында Йоги тик учакта ызылдап баратат. Ал "Пикниктеги аюу" тасмасында пик-а-ник куржунун кармап, секирип кетет жана "Коркунучтуу сыйлык үчүн" Йоги теманын текстин кутучага салат.
Кыймылы аз же такыр жок болгондуктан, Гоблдун жалгыз кадрлары маанайды жаратып, окуяны коюп, окуяны сүрөттөшү керек болчу. Алар муну жалпак түстөрдү, графикалык фигураларды жана көбүнчө көркөм чыгармага бириктирилген типографияны колдонуп жасашкан.
Вебде иштеген дизайнерлер катары, тоон аталыштары бизге бренддин инсандыгын кантип жеткирүү, биринчи таасир калтыруу жана кимдир бирөөнүн продукт же веб-сайтты колдонуу тажрыйбасын күтүү боюнча көп нерселерди үйрөтөт. Биз сүрөтчүлөрдүн ыкмаларынан эффективдүү баннерлерди, десант-баракчалардын баштарын жана ал тургай жакшы сплэш-экрандарды түзүүнү үйрөнө алабыз. Toon Title Typography Мультфильмдин аталышы карталары түрүн сүрөттөр менен бириктирүү баш сөзгө же баатырга кандай сокку берерин көрсөтөт. Бир нече тексттик көлөкө, текстти штрих жана трансформация трюктары менен заманбап CSS сизге ошол эле энергияны колдонууга мүмкүндүк берет.
Toon Text Title Generator Бул макаланы жазып жатып, мен абдан жакшы көргөн мультфильмдердин аталыштары сыяктуу стилде текстти түзүү үчүн куралга ээ болуу пайдалуу болорун түшүндүм. Ошентип мен бирөөнү жасадым. My Toon Text Title Generator сизге түстөр, штрихтер жана бир нече текст көлөкөсү менен эксперимент жүргүзүүгө мүмкүндүк берет. Сиз боёк тартибин тууралап, тамга аралыктарын колдонсоңуз, текстиңизди үлгү шрифттеринин тандоосунда алдын ала карап чыгып, андан кийин долбоордо колдонуу үчүн түзүлгөн CSSти түз алмашуу буфериңизге көчүрө аласыз. Toon Title 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, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Бул көлөкөлөр тексттик көлөкөнү колдонуу жарык эффекттерин түзүү гана эмес экенин көрсөтүп турат, анткени алар кооздук жана инсандыкты кошо алат. Text Stroke Көптөгөн мультфильмдердин аталышы карталарында кара контуру бар тамгалар бар, бул аларды фондон айырмалап турат. Мен бул эффектти текстти штрих аркылуу кайра түзө алам. Узак убакыт бою бул мүлк -webkit- префикси аркылуу гана жеткиликтүү болгон, бирок бул азыр заманбап браузерлерде колдоого алынганын билдирет.
текст штрих эки касиеттин стенографиясы. Биринчиси, тексттин штрихинин туурасы, жеке тамгалардын айланасында контур тартат, ал эми экинчиси, тексттин штрих-түсү анын түсүн көзөмөлдөйт. "Whatever Goes Pup" үчүн мен сары текстке 4px көк штрих коштум: түс: #eff0cd; -webkit-text-stroke: 4px #7890b5; текст штрих: 4px #7890b5;
Штрихтер өзгөчө көлөкөлөр менен айкалышканда пайдалуу болушу мүмкүн, ошондуктан "Өсүүдө, Өсүүдө, Өтүүдө" үчүн мен бул үч өлчөмдүү текст эффектин түзүү үчүн эптеп бүдөмүк 1px көлөкөгө ичке 3px штрих коштум: түс: #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-текст-толтуруу-түсү: ачык;
Ушул эки сап менен гана фон тексттин артына боёлбойт; анын ордуна, анын ичинде боёлгон. Бул ыкма штрихтер жана көлөкөлөр менен айкалышканда өзгөчө жакшы иштейт. Кесилген градиент тамганы түс жана текстура менен камсыз кылат, штрих анын четтерин курч кармап турат, ал эми көлөкө аны фондон көтөрөт. Бирге, алар кол менен боёлгон титулдук карталардын катмарлуу көрүнүшүн бир аз CSS колдонуу менен кайра жаратышат. Адаттагыдай эле, кесилген текстти кылдаттык менен текшериңиз, анткени серепчинин кызыктары кээде көлөкө жана рендерингге таасир этиши мүмкүн. Текстти жеке символдорго бөлүү Кээде мен бүтүндөй бир сөздү же аталышты стилдештиргим келбейт. Мен жеке тамгаларды стилдештиргим келет — каарманды ордуна түртүп, бир глифке кошумча салмак берип же бир нече тамганы өз алдынча жандандыргым келет. Жөнөкөй HTML жана CSS тилдеринде муну жасоонун бир гана ишенимдүү жолу бар: ар бир символду өзүнүн span элементине ороп алыңыз. Мен муну кол менен кыла алмакмын, бирок ал морт, сактоо кыйын жана көчүрүү өзгөргөндө тез бузулуп калат. Анын ордуна, мага ар бир тамганы көзөмөлдөө керек болгондо, мен splt.js сыяктуу текстти бөлүүчү китепкананы колдоном (бирок башка чечимдер бар). Бул текст түйүнүн алып, автоматтык түрдө сөздөрдү же символдорду ороп, менин белгилөөлөрдү бузбастан жандуу жана стилдештирүү үчүн кошумча илгичтерди берет. Бул менин HTML тилимди окула турган жана семантикалык сактаган ыкма, ошол эле учурда классикалык мультфильмдердин аталышы карталарында көрүлгөн тегиз эмес, мүнөздүү типографияны кайра жаратышым керек болгон так башкарууну берет. Бирок, бул ыкма менен келетжеткиликтүүлүк эскертүүлөрү, анткени көпчүлүк экранды окурмандар текст түйүндөрүн ирети менен окушат. Ошентип, бул:
Hum Sweet Hum
... сиз күткөндөй окуйт: Hum Sweet Hum
Бирок бул:
H у м
... браузерге жана экранды окууга жараша ар кандай чечмелениши мүмкүн. Кээ бирлери тамгаларды бириктирип, сөздөрдү туура окушат. Башкалар каттардын ортосунда тыным кылышы мүмкүн, бул эң начар сценарийде төмөнкүдөй угулушу мүмкүн: “Н…” “У…” “М…”
Тилекке каршы, айрым бөлүү чечимдери ар дайым жеткиликтүү натыйжа бербейт, ошондуктан мен өзүмдүн текст бөлгүчүмдү, splinter.js жаздым, ал учурда бета версиясында. Жеке тамгаларды которуу Toon Text Splitter'ди иштетүү үчүн, мен бөлгүм келген элементке data-атрибут кошом:
Hum Sweet Hum
Биринчиден, менин сценарийим ар бир сөздү өзүнчө тамгаларга бөлүп, класс жана 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; }
Бирок translate - бул менин мультфильмдин текстин өзгөртүү үчүн колдоно турган бир гана касиет.
Мен дагы башаламан көрүнүш үчүн ошол жеке каармандарды айланта алам: /* 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; }
Бирок translate - бул менин мультфильмдин текстин өзгөртүү үчүн колдоно турган бир гана касиет. Мен дагы башаламан көрүнүш үчүн ошол жеке каармандарды айланта алам: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { айлануу: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { айлануу: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { айлануу: 4deg; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { айлануу: 8 градус; }
Анан, албетте, мен бул каармандарды силкилдетүү үчүн анимацияларды кошуп, тексттин стилиндеги аталыштарымды жандыра алмакмын. Биринчиден, мен каармандарды айландыруучу негизги кадр анимациясын түздүм:
@keyframes jiggle { 0%, 100% { айландыруу: айлантуу(var(--базаны айлантуу, 0deg)); } 25% { айландыруу: айлантуу(калк(var(--базалык айлантуу, 0дег) + 3дег)); } 50% { айландыруу: айлантуу(калк(var(--базалык айлантуу, 0дег) - 2дег)); } 75% { айландыруу: айлантуу(калк(var(--базалык айлантуу, 0дег) + 1дег)); } }
Аны менин Toon Text Splitter тарабынан түзүлгөн span элементтерине колдонуудан мурун: .toon-char { анимация: 3с чексиз жеңил-желпи чыгуу; transform-origin: борбордук түбү; }
Акыр-аягы, айландыруу көлөмүн жана ар бир белги силкип баштаганга чейин кечиктирүүнү орнотуу: .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 касиеттери менен - көлөкөлөр, штрихтер, кесилген фондор жана кээ бир чектелген анимация - биз ошол эле таасирди кайра жарата алабыз. Мен текстти ностальгиям үчүн эмес, анын дизайны атайылап жасалгандыктан жакшы көрөм. Атайылап тандоо жасаңыз жана кичинекей тексттик типографияга дизайндарыңызга сокку кошууга мүмкүнчүлүк бериңиз.
