После завершения проекта, который требовал от меня узнать все, что я мог, о CSS и SVG-анимации, я начал писать серию статей о Smashing Animations и «Как классические мультфильмы вдохновляют современный CSS». В завершение этого года я хочу показать вам, как использовать современный CSS для создания элемента, который делает заголовки мультяшек такими впечатляющими: их типографики. Название Художественное оформление В эпоху немого кино 1920-х и начала 30-х годов типографика титульной карточки фильма создавала настроение, настраивала сцену и напоминала зрителям о типе фильма, за просмотр которого они заплатили.
Заголовки мультфильмов также были фирменным знаком, настроением и сценой - все в одном лице. В первые годы, когда бюджеты крупных студий были больше, эти титульные карточки часто были иллюстративными и живописными.
Но когда в 1950-х годах произошел бум телевидения, бюджеты сократились, и открытки, созданные такими художниками, как Лоуренс «Арт» Гобл, приняли новый визуальный язык, став более графичным, стилизованным и менее сложным. Примечание: Лоуренс «Арт» Гобл — один из часто упускаемых из виду героев американской анимации середины века. В основном он работал на Ханну-Барбера в самые влиятельные годы ее деятельности - 1950-е и 1960-е годы. Гобл не был аниматором персонажей. Его роль заключалась в создании атмосферы, поэтому он разработал окружение для «Флинстоунов», «Гекльберри Хаунд», «Квик Дро МакГроу» и «Медведь Йоги», а также вступительные титульные карточки, которые задавали тон. Его титульные карточки, на которых изображены картины с наложенным логотипом, помогли определить культовый образ Ханны-Барбера. Обложки Гобла таких персонажей, как Квик Дро МакГроу и Медведь Йоги, были эффективны на небольших экранах телевизоров. Вместо того, чтобы воспроизводить кадр из мультфильма, он сосредоточился на представлении одной сильной идеи — часто в виде силуэта — которая отражала бы ее суть. В «Жужжащем медведе» Йог пролетает на вертолете. Он отскакивает с корзиной для пикника в руке в «Медведь на пикнике», а в своем «Призовом бою испуг» Йоги помещает текст заголовка.
Поскольку движения было мало или вообще не было, отдельные кадры Гобла должны были создавать настроение, задавать сцену и описывать историю. Они сделали это, используя плоские цвета, графические формы и типографику, которая часто использовалась в произведениях искусства.
Как дизайнерам, работающим в Интернете, мультяшные заголовки могут многому научить нас тому, как передать индивидуальность бренда, произвести первое впечатление и установить ожидания в отношении чьего-либо опыта использования продукта или веб-сайта. Мы можем поучиться у художников методам создания эффективных баннеров, заголовков целевых страниц и даже старых добрых заставок. Типография названия мультяшки Заголовки мультфильмов показывают, как объединение шрифта с изображениями дает эффект, который нужен заголовку или герою. Благодаря нескольким трюкам с тенью текста, обводкой текста и преобразованием современный CSS позволяет вам использовать ту же энергию.
Генератор текстовых заголовков Toon В процессе написания этой статьи я понял, что было бы полезно иметь инструмент для создания текста в стиле названий мультфильмов, которые я так люблю. Итак, я сделал один. Генератор текстовых заголовков My Toon позволяет экспериментировать с цветами, обводками и несколькими тенями текста. Вы можете настроить порядок рисования, применить интервал между буквами, просмотреть текст с помощью набора образцов шрифтов, а затем скопировать сгенерированный CSS прямо в буфер обмена для использования в проекте. CSS-заголовок мультяшки Вы можете просто скопировать и вставить CSS, который предоставляет вам генератор текстовых заголовков Toon. Но давайте посмотрим поближе, что он делает. Тень текста Посмотрите на шрифт в этом заголовке из эпизода Оги Догги «Yuk-Yuk Duck» с его бледно-желтыми буквами и темной, жесткой, смещенной тенью, которая поднимает его над фоном и создает иллюзию глубины.
Вы, вероятно, уже знаете, что text-shadow принимает четыре значения: (1) горизонтальное и (2) вертикальное смещение, (3) размытие и (4) цвет, который может быть сплошным или полупрозрачным. Эти значения смещения могут быть положительными или отрицательными, поэтому я могу воспроизвести «Юк-Юк Утка», используя резкую тень, натянутую вниз и вправо: цвет: #f7f76d; текстовая тень: 5 пикселей 5 пикселей 0 #1e1904;
С другой стороны, название «Пинтовый гигант» имеет другое ощущение из-за его отрицательной полумягкой тени: цвет: #c2a872; текстовая тень: -7px 5px 0 #b100e, 0–5 пикселей 10 пикселей #546c6f;
Чтобы добавить дополнительную глубину и создать более интересные эффекты, я могу наложить несколько теней. Для «Let’s Duck Out» я комбинирую четыре тени: первую — сплошную тень с отрицательным горизонтальным смещением, чтобы приподнять текст над фоном, а затем постепенно смягчающие тени, чтобы создать размытие вокруг него: цвет: #6F4D80; текстовая тень: -5 пикселей5px 0 #260e1e, /* Тень 1 */ 0 0 15px #e9ce96, /* Тень 2 */ 0 0 30px #e9ce96, /* Тень 3 */ 0 0 30 пикселей #e9ce96; /* Тень 4 */
Эти тени показывают, что использование text-shadow — это не только создание световых эффектов, они также могут быть декоративными и добавлять индивидуальности. Текстовый штрих На многих титульных карточках мультфильмов буквы выделены жирным контуром, что выделяет их на фоне. Я могу воссоздать этот эффект, используя текстовый штрих. Долгое время это свойство было доступно только через префикс -webkit-, но это также означает, что теперь оно поддерживается во всех современных браузерах.
text-stroke — это сокращение для двух свойств. Первый, text-stroke-width, рисует контур вокруг отдельных букв, а второй, text-stroke-color, управляет его цветом. Для «Whatever Goes Pup» я добавил к желтому тексту синюю обводку толщиной 4 пикселя: цвет: #eff0cd; -webkit-text-stroke: 4px #7890b5; текстовый штрих: 4 пикселя #7890b5;
Обводки могут быть особенно полезны, когда они сочетаются с тенями, поэтому для «Растущего, Растущего, Ушедшего» я добавил тонкую обводку толщиной 3 пикселя к едва размытой тени толщиной 1 пиксель, чтобы создать эффект трехмерного текста: цвет: #fbb999; текстовая тень: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; текстовый штрих: 3 пикселя #984336;
Заказ краски Использование обводки текста не всегда дает ожидаемый результат, особенно с более тонкими буквами и более толстыми штрихами, поскольку по умолчанию браузер рисует обводку поверх заливки. К сожалению, CSS до сих пор не позволяет мне настраивать расположение обводки, как я это часто делаю в Sketch. Однако свойство Paint-order имеет значения, которые позволяют мне размещать обводку позади, а не перед заливкой.
Paint-order: Stroke сначала рисует обводку, затем заливку, тогда как Paint-order: fill делает обратное: цвет: #fbb999; порядок рисования: заливка; текстовая тень: 3px 5px 1px #5160b1; цвет текста: #984336; ширина текста: 3 пикселя;
Эффективный штрих делает буквы читабельными, добавляет вес и — в сочетании с тенями и порядком рисования — придает плоскому тексту реальное присутствие. Фон внутри текста Многие титульные карточки мультфильмов выходят за рамки простого цвета, добавляя к надписям текстуру, градиенты или иллюстрированные детали. Иногда это текстура, иногда градиент с тонким тональным сдвигом. В Интернете я могу воссоздать этот эффект, используя фоновое изображение или градиент позади текста, а затем обрезав его по форме букв. Это основано на совместной работе двух свойств: 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 есть только один надежный способ сделать это: обернуть каждый символ в отдельный элемент span. Я мог бы сделать это вручную, но это было бы хрупко, сложно поддерживать и быстро разваливалось бы при изменении копии. Вместо этого, когда мне нужен побуквенный контроль, я использую библиотеку разделения текста, например splt.js (хотя доступны и другие решения). При этом берется текстовый узел и автоматически оборачиваются слова или символы, что дает мне дополнительные возможности для анимации и стиля, не испортив разметку. Это подход, который сохраняет мой HTML-код читабельным и семантическим, в то же время предоставляя мне детальный контроль, необходимый для воссоздания неровной, характерной типографики, которую вы видите в заставках классических мультфильмов. Однако этот подход сопровождаетсяПредостережения относительно специальных возможностей, поскольку большинство программ чтения с экрана читают текстовые узлы по порядку. Итак, это:
Хм, сладкий хм
…читается так, как и следовало ожидать: Гул, сладкий гул
Но это:
Ч ты м
…может интерпретироваться по-разному в зависимости от браузера и программы чтения с экрана. Некоторые соединят буквы и правильно прочитают слова. Другие могут делать паузы между буквами, что в худшем случае может звучать так: «Х…» «У…» «М…»
К сожалению, некоторые решения для разделения не всегда дают доступный результат, поэтому я написал свой собственный разделитель текста splinter.js, который сейчас находится в стадии бета-тестирования. Преобразование отдельных букв Чтобы активировать мой Toon Text Splitter, я добавляю атрибут data- к элементу, который хочу разделить:
Хм, сладкий хм
Во-первых, мой скрипт разделяет каждое слово на отдельные буквы и помещает их в элемент span с применением атрибутов class и ARIA:
Затем скрипт берет исходное содержимое разделенного элемента и добавляет его в качестве атрибута 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 покачивание { 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 Text Splitter: .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 — теней, обводок, обрезанного фона и некоторой сдержанной анимации — мы можем воссоздать тот же эффект. Я люблю мультяшный текст не потому, что испытываю ностальгию, а потому, что его дизайн продуман. Делайте обдуманный выбор и позвольте небольшой мультяшной текстовой типографике добавить выразительности вашим проектам.
