Откако завршив проект кој бараше од мене да научам сè што можам за CSS и SVG анимациите, почнав да ја пишувам оваа серија за Smashing Animations и „How Classic Cartoons Inspire Modern CSS“. За да ја заокружам оваа година, сакам да ви покажам како да користите модерна CSS за да го создадете тој елемент што ги прави Toon Titles толку влијателни: нивната типографија. Наслов Дизајн на уметнички дела Во немиот период од 1920-тите и раните 1930-ти, типографијата на насловната картичка на филмот создаваше расположение, ја поставуваше сцената и ја потсети публиката на видот на филмот што платиле да го гледаат.
Картичките за наслов на цртаните филмови исто така беа брендирање, расположение и поставување на сцената, склопени во едно. Во раните години, кога големите буџети на студиото беа поголеми, овие насловни картички често беа илустративни и сликарски.
Но, кога телевизијата цветаше во текот на 1950-тите, буџетите паднаа, а картичките дизајнирани од уметници како Лоренс „Арт“ Гобл усвоија нов визуелен јазик, станувајќи пографик, стилизиран и помалку сложен. Забелешка: Лоренс „Арт“ Гобл е еден од често занемарените херои на американската анимација од средината на векот. Тој првенствено работеше за Хана-Барбера за време на нејзините највлијателни години од 1950-тите и 1960-тите. Гобл не беше аниматор на ликови. Неговата улога беше да создаде атмосфера, па затоа дизајнираше средини за The Flintstones, Huckleberry Hound, Quick Draw McGraw и Yogi Bear, како и почетните насловни картички кои го дадоа тонот. Неговите насловни картички, со слики со преклопено лого, помогнаа да се дефинира иконскиот изглед на Хана-Барбера. Уметничките дела на Гобл за ликови како Quick Draw McGraw и Yogi Bear беа ефективни на помалите ТВ екрани. Наместо да репродуцира кадар од цртаниот филм, тој се фокусираше на презентирање на единствена, силна идеја - често во силуета - што ја доловува нејзината суштина. Во „The Buzzin’ Bear“, Јоги зуе во хеликоптер. Тој отскокнува, со кошница за сликање во рака, во „Мечка на пикник“, а за неговата „Приза во борбата против стравот“, Јоги го кутии насловниот текст.
Со малку или никакво движење на кое требаше да се потпреме, единечните кадри на Гобл мораа да создадат расположение, да ја постават сцената и да опишат приказна. Тие го направија тоа користејќи рамни бои, графички форми и типографија која често беше интегрирана во уметничкото дело.
Како дизајнери кои работат на веб, насловите на Toon можат да нè научат многу за тоа како да ја пренесеме личноста на брендот, да оставиме прв впечаток и да поставиме очекувања за нечие искуство со користење на производ или веб-локација. Можеме да научиме од техниките на уметниците за создавање ефективни банери, заглавија на целните страници, па дури и добри оригинални екрани. Типографија на насловот Toon Картичките со наслов на цртан филм покажуваат како спојувањето на типот со слики го дава ударот што му треба на заглавието или на херојот. Со неколку трикови за текстуални сенки, текстуални и трансформации, модерниот CSS ви овозможува да ја искористите истата енергија.
Генератор на наслови на текст Toon На дел од пишувањето на оваа статија, сфатив дека би било корисно да имам алатка за генерирање на текст стилизиран како насловите на цртаните филмови што толку многу ги сакам. Така направив еден. My Toon Text Title Generator ви овозможува да експериментирате со бои, потези и повеќе текстуални сенки. Можете да го прилагодите редоследот на бојата, да примените проред на буквите, да го прегледате вашиот текст во избор на примероци на фонтови, а потоа да го копирате генерираниот CSS директно на вашата таблата со исечоци за да го користите во проект. Toon Наслов CSS Можете едноставно да го копирате-залепите CSS што ви го дава Toon 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; текст-сенка: -5 пиксели5px 0 #260e1e, /* Сенка 1 */ 0 0 15 px #e9ce96, /* Сенка 2 */ 0 0 30 px #e9ce96, /* Сенка 3 */ 0 0 30px #e9ce96; /* Сенка 4 */
Овие сенки покажуваат дека користењето на текстуална сенка не е само создавање на светлосни ефекти, бидејќи тие можат да бидат и украсни и да додадат личност. Текст мозочен удар Многу картички за наслов на цртаните филмови имаат букви со задебелен преглед што ги прави да се издвојуваат од позадината. Можам да го рекреирам овој ефект користејќи текст-потези. Долго време, овој имот беше достапен само преку префиксот -webkit-, но тоа исто така значи дека сега е поддржан во современите прелистувачи.
text-stroke е стенографија за две својства. Првиот, текст-потези-ширина, црта контура околу поединечни букви, додека вториот, текст-потези-боја, ја контролира неговата боја. За „Whatever Goes Pup“, додадов сина црта од 4 пиксели на жолтиот текст: боја: #eff0cd; -webkit-text-stroke: 4px #7890b5; текст-потези: 4px #7890b5;
Потезите можат да бидат особено корисни кога се комбинираат со сенки, така што за „Расте, расте, исчезна“, додадов тенок потег од 3 px на едвај заматена сенка од 1 px за да го создадам овој тродимензионален текстуален ефект: боја: #fbb999; текст-сенка: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; текст-мозочен удар: 3px #984336;
Ред на боја Употребата на текстуален удар не секогаш го дава очекуваниот резултат, особено со потенки букви и подебели потези, бидејќи по дифолт прелистувачот црта удар над пополнувањето. За жал, CSS сè уште не ми дозволува да ја приспособам поставеноста на ударот како што често правам во Sketch. Сепак, својствата paint-order има вредности што ми дозволуваат да го ставам ударот зад, наместо пред, полнењето.
paint-order: stroke прво го слика ударот, потоа полнењето, додека paint-order: fill го прави спротивното: боја: #fbb999; боја-ред: пополнете; текст-сенка: 3px 5px 1px #5160b1; текст-мозочен удар-боја:#984336; текст-потези-ширина: 3px;
Ефективниот потег ги одржува буквите читливи, додава тежина и - кога се комбинира со сенки и редослед на боја - дава вистинско присуство на рамен текст. Позадини во текстот Многу картички за наслов на цртаните ги надминуваат рамните бои со додавање текстура, градиенти или илустрирани детали на буквите. Понекогаш тоа е текстура, друг пат може да биде градиент со суптилно тонско поместување. На интернет, можам да го рекреирам овој ефект со користење на слика за заднина или градиент зад текстот, а потоа ќе го исечам во форма на буквите. Ова се потпира на две својства кои работат заедно: позадина-клип: текст и текст-пополнување-боја: транспарентна.
Прво, нанесувам позадина зад текстот. Ова може да биде битмапа или векторска слика или градиент на CSS. За овој пример од епизодата Quick Draw McGraw „Baba Bait“, насловниот текст вклучува суптилен градиент одозгора до дното од темно кон светло: позадина: линеарен градиент (0 степени, #667b6a, #1d271a);
Следно, ја клипувам таа позадина на хиероглифите и го правам текстот транспарентен, така што позадината се прикажува преку: -веб-кит-позадина-клип: текст; -webkit-text-fill-color: транспарентен;
Само со тие два реда, позадината повеќе не е насликана зад текстот; наместо тоа, тој е насликан во него. Оваа техника работи особено добро кога се комбинира со удари и сенки. Исечениот градиент ги дава буквите со боја и текстура, ударот ги задржува неговите рабови остри, а сенката го издигнува од позадината. Заедно, тие повторно создаваат слоевит изглед на рачно насликани насловни картички користејќи ништо повеќе од малку CSS. Како и секогаш, внимателно тестирајте го исечениот текст, бидејќи чудните прелистувачи понекогаш можат да влијаат на сенките и прикажувањето. Поделба на текст на поединечни знаци Понекогаш не сакам да стилизирам цел збор или наслов. Сакам да стилизирам поединечни букви - да наведам лик на своето место, да му дадам дополнителна тежина на еден знак или да анимизирам неколку букви независно. Во обичниот HTML и CSS, постои само еден сигурен начин да го направите тоа: завиткајте го секој знак во својот елемент за распон. Можев да го направам тоа рачно, но тоа ќе биде кревко, тешко за одржување и брзо ќе се распадне кога ќе се смени копијата. Наместо тоа, кога ми треба контрола по буква, користам библиотека за разделување текст како splt.js (иако се достапни други решенија). Ова зазема текстуален јазол и автоматски ги обвиткува зборовите или знаците, давајќи ми дополнителни куки за анимирање и стилизирање без да ми се меша ознаката. Тоа е пристап што го одржува мојот HTML читлив и семантички, а истовремено ми ја дава ситно-гранулираната контрола што ми е потребна за да ја рекреирам нерамномерната, карактеристична типографија што ја гледате во класичните насловни картички на цртаните филмови. Сепак, овој пристап доаѓа сопредупредувања за пристапност, бидејќи повеќето читачи на екран ги читаат текстуалните јазли по редослед. Значи ова:
Пумп Слатко Хум
…чита како што очекувате: Слатко потпевнувам
Но ова:
H u м
…може да се толкува различно во зависност од прелистувачот и читачот на екранот. Некои ќе ги спојат буквите и ќе ги читаат зборовите правилно. Други може да паузираат помеѓу буквите, што во најлошото сценарио може да звучи како: „Х…“ „У…“ „М…“
За жал, некои решенија за разделување не даваат секогаш достапен резултат, па затоа напишав свој разделник на текст, splinter.js, кој моментално е во бета верзија. Трансформирање на индивидуални букви За да го активирам мојот Toon Text Splitter, додавам атрибут на податоци на елементот што сакам да го поделам:
Пумпнувам Слатко Хум
Прво, мојата скрипта го одделува секој збор на поединечни букви и ги обвива во елемент на распон со применети атрибути на класа и ARIA:
Скриптата потоа ја зема почетната содржина на поделениот елемент и ја додава како атрибут на арија за да помогне во одржувањето на пристапноста:
Со применетите атрибути на класата, тогаш можам да стилизирам поединечни знаци како што ќе изберам.
На пример, за „Hum Sweet Hum“, сакам да реплицирам како неговите букви се оддалечуваат од основната линија. Откако го користев мојот Toon Text Splitter, применив четири различни вредности за преведување користејќи неколку избирачи на :nth-child за да создадам полу-случаен изглед: /* 4-ти, 8-ми, 12-ти... */ .toon-char:nth-child(4n) { translate: 0 -8px; } /* 1-ви, 5-ти, 9-ти... */ .toon-char:nth-child(4n+1) { translate: 0 -4px; } /* 2-ри, 6-ти, 10-ти... */ .toon-char:nth-child(4n+2) { translate: 0 4px; } /* 3-ти, 7-ми, 11-ти... */ .toon-char:nth-child(4n+3) { translate: 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: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 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)); } }
Пред да го примените на елементите на распон создадени од мојот разделувач на текст Toon: .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,1s; } .toon-char:nth-child(4n+1) {анимација-одложување: 0,3s; } .toon-char:nth-child(4n+2) {анимација-одложување: 0,5s; } .toon-char:nth-child(4n+3) {анимација-одложување: 0,7s; }
Една рамка за да оставите впечаток Уметниците со наслови на цртани имаа една рамка за да остават впечаток, а нивната типографија беше исто толку важна како и уметничкото дело што го сликаа. Истото важи и на веб. Добро дизајниран заглавие или херојобласта има потреба од јасност, карактер и самодоверба - не само избледена слика во позадина со целосна ширина. Со неколку внимателно избрани својства на CSS - сенки, потези, исечени позадини и одредена воздржана анимација - можеме да го рекреираме истото влијание. Го сакам тон текстот не затоа што сум носталгичен, туку затоа што неговиот дизајн е намерен. Направете смислени избори и дозволете малата текстуална типографија да додаде удар на вашите дизајни.
