<commit_before>
LIVEJOURNAL

--------------------------------------------

ВСТУПЛЕНИЕ

Мой доклад будет не столько практически-прикладным, сколько экспериментальным. Я всё время пытаюсь делать разные странные вещи, и в этот раз меня заинтересовали возможности оформления текста.

Зачем это вообще можеть быть нужно? Мы привыкли, что надписи

Когда мы говорим о тексте, первым делом вспоминаются цвет,

---( слайд )

размер,

---( слайд )

и шрифт.

---( слайд )

Слава кастомным шрифтам, сейчас уже практически не возникает необходимость делать надписи картинкой, потому что можно подключить свой шрифт и получить желаемое.

Цвет, размер и шрифт - это как-то маловато, если вспомнить, что HTML-элементам можно задавать рамки, какие угодно фоны и сложные тени. Текст на фоне всего этого богатства выглядит как-то печально.

Как быть, если мы хотим получить сложно оформленный текст? Я провела небольшое исследование, и сейчас расскажу вам о своих находках.

Вот, например, я хочу сделать рамку для текста, возьмем обычный text-shadow:

---( слайд с text-shadow )

Тext-shadow не умеет увеличиваться и вести себя как border или box-shadow, поэтому, чтобы сделать рамку, приходится рисовать несколько теней:

---( слайд с text-shadow врастопырку по hover )

Если их собрать вместе, получится тонкая рамка вокруг текста.

---( слайд с кодом )

Представьте, что вы хотите анимировать изменение цвета рамки - вам придется продублировать код по количеству шагов анимации.

Недостатки способа - хрупкость, невозможность сделать толстую рамку и конский код, который лучше всего делать с помощью препроцессоров.

С помощью text-shadow можно делать не только обводки, но и разные другие интересные штуки:

---( слайд со сложно рамкой )

---( слайд с размывающейся тенью )

(посмотреть что ещё есть)

Эти эффекты можно неплохо анимировать.

Говоря о тенях, можно вспомнить, что гуглошрифты в качестве экспериментальной возможности предлагают несколько стилей для оформления текста.

---( слайд с кодом подключения )

Не все из них одинаково хорошо поддерживаются, уточнить этот вопрос можно в списке спецэффектов, но в предлагаемом наборе есть несколько разных интересных штук, сделанных с помощью того же text-shadow.

---( слайд с демо 3-4 штуки )

Также для обводки текста можно использовать http://caniuse.com/#feat=text-stroke, но оно не поддерживается в FF и IE.

http://css-tricks.com/adding-stroke-to-web-text/

---( слайд с демо )

---( слайд с кодом )

Мы посмотрели на возможности обводки, а как насчет того, чтобы залить текст не сплошным текстом, а картинкой?

По такому случаю извлекаем из рукава свойство background-clip: text, которое в действии выглядит вот так:

---( слайд с background-clip: text )

Свойство было предложено ещё в 2008-м (https://www.webkit.org/blog/164/background-clip-text/), но до сих пор не получило широкую поддержку браузерами, и в браузерах без поддержки выглядит не очень:

---( слайд )

Проблема лишнего решается, например, с помощью свойств, специфичных для webkit:

---( слайд )

Но результат выглядит не очень. Если же захотеть анимировать заливку текста, тут возможностей не очень много. Можно или анимировать фон, либо просто в качестве заливки использовать анимированный GIF.
С анимацией фона есть некоторые проблемы. Например, в CSS-градиентах нельзя сделать плавную смену цветов или узора, можно только менять размер и положение фонового изображения:

---( слайд )

Есть ещё один слегка безумный способ сделать текст с заливкой. Плюс способа - любое HTML-содержимое, включая любые анимации и видео.

---( слайд с северным сиянием )

Так работает mix-blend-mode - свойство, управляющее наложением друг на друга элементов страницы.

Принцип работы следующий: мы создаем темный слой со светлой надписью, и применяем к нему режим наложения darken. Этот режим оставляет только светлые участки слоя, и скрывает все светлые, таким образом мы получаем слой с темной заливкой и дыркой в форме текста посередине.

Текст остается текстом, его можно копировать и можно менять на лету. Заливкой может быть всё, что угодно.

Недостатков минимум два: первый - недостаточная поддержка браузерами, второй - невозможность вырезать текст вокруг фона. То есть мы не можем сделать текст со сложным паттерном и наложить его поверх другого сложного фона (ПРОВЕРИТЬ).

Пользоваться прямо сейчас этим способом нельзя, но я предполагаю, что поддержка браузерами таки будет расти, и, возможно, этот способ может быть полезен в будущем.

Как мы видим, пара HTML+CSS предоставляет не очень широкие возможности оформления текста, и вот тут самое время вспомнить про SVG.

---( слайд c заголовком)

SVG - технология, прекрасная во многих отношениях. Отдельно я люблю её за равноправие текста и графических элементов. Тексту в SVG доступны все возможности оформления, включая заливки и обводки с градиентами и паттернами.

При этом это обычный текст, его можно выделить и скопировать, и он доступен для скринридеров.

---( слайд "просто текст" )

Для начала попробуем обводки:

---( слайд с обводками )

Обводки в этом случае тоже имеют определенные проблемы, но для их создания нужно всего пара строчек в CSS, и такие обводки без проблем можно перекрашивать и анимировать, не раздувая код.

---( слайд - пульсирующая обводка)

---( слайд - ползущая ЗАЛИВКА-паттерн обводки по наведению)

---( слайд с анимированным паттерном в обводке? )

Также обводка может быть не только сплошной, но и пунктирной, причем её параметрами можно также управлять через CSS, а анимация позволяет получить разные интересные эффекты:

---( слайд с бегущим пунктиром )

---( слайд с появляющейся обводкой )

---( слайд с разноцветным бегущим пунктиром )

Посмотрим на заливки: заливкой текста в SVG (как и у любой другой фигуры) может быть не только цвет, но также градиенты и паттерны. Паттерны могут содержать как обычные графические элементы, так и картинки, и всё это можно анимировать.

Причем цветами градиента можно управлять через CSS, и это будет плавная анимация:

---( слайд с анимированными цветами градиента, CSS)

Возможность управления градиентами в CSS ограничены, но если использовать SMIL, можно управлять большим числом параметров, например, радиусом, что позволяет делать более сложные конструкции:

---( слайд с исчезающим текстом )

Перейдем к паттернам. Паттерны позволят добавить тексту фон, который будет хорошо выглядеть на любых разрешениях. Кроме того, элементы паттерна можно до какой-то степени анимировать:

---( слайд с анимированным паттерном )

Проблема с паттернами состоит в том, что не все браузеры поддерживают трансформации внутри паттернов (УТОЧНИТЬ), но их до какой-то степени можно заменить обводками:

---( слайд с пульсирующими сердечками)
---( слайд с расходящимися кружками? )

Паттерны могут содержать не только фигуры, но и обычные картинки:

---( слайд с заливкой с картинкой цветы-закат?)

В том числе, анимированные:

---( слайд огонь/вода)

Выглядит немного диковато, но я уверена, что можно придумать и более изящные варианты использования. Правда, несколько смущает вес всей этой красоты.

Итак, SVG-текст предоставляет множество замечательных возможностей, но с анимацией содержимого у него как-то не очень.

(сюда или в маски?)
К слову, в SVG можно заворачивать даже видео, используя foreignObject, но ведёт себя эта конструкция довольно странно, а у нас есть другой способ сделать это (об этом чуть позже).


Но продолжим

---( слайд )
---( слайд )


---*---<commit_msg>Save changes<commit_after>
LIVEJOURNAL

--------------------------------------------

ВСТУПЛЕНИЕ

Мой доклад будет не столько практически-прикладным, сколько экспериментальным. Я всё время пытаюсь делать разные странные вещи, и в этот раз меня заинтересовали возможности оформления текста.

Зачем это вообще можеть быть нужно? Мы привыкли, что надписи

Когда мы говорим о тексте, первым делом вспоминаются цвет,

---( слайд )

размер,

---( слайд )

и шрифт.

---( слайд )

Слава кастомным шрифтам, сейчас уже практически не возникает необходимость делать надписи картинкой, потому что можно подключить свой шрифт и получить желаемое.

Цвет, размер и шрифт - это как-то маловато, если вспомнить, что HTML-элементам можно задавать рамки, какие угодно фоны и сложные тени. Текст на фоне всего этого богатства выглядит как-то печально.

Как быть, если мы хотим получить сложно оформленный текст? Я провела небольшое исследование, и сейчас расскажу вам о своих находках.

Вот, например, я хочу сделать рамку для текста, возьмем обычный text-shadow:

---( слайд с text-shadow )

Тext-shadow не умеет увеличиваться и вести себя как border или box-shadow, поэтому, чтобы сделать рамку, приходится рисовать несколько теней:

---( слайд с text-shadow врастопырку по hover )

Если их собрать вместе, получится тонкая рамка вокруг текста.

---( слайд с кодом )

Представьте, что вы хотите анимировать изменение цвета рамки - вам придется продублировать код по количеству шагов анимации.

Недостатки способа - хрупкость, невозможность сделать толстую рамку и конский код, который лучше всего делать с помощью препроцессоров.

С помощью text-shadow можно делать не только обводки, но и разные другие интересные штуки:

---( слайд со сложно рамкой )

---( слайд с размывающейся тенью )

(посмотреть что ещё есть)

Эти эффекты можно неплохо анимировать.

Говоря о тенях, можно вспомнить, что гуглошрифты в качестве экспериментальной возможности предлагают несколько стилей для оформления текста.

---( слайд с кодом подключения )

Не все из них одинаково хорошо поддерживаются, уточнить этот вопрос можно в списке спецэффектов, но в предлагаемом наборе есть несколько разных интересных штук, сделанных с помощью того же text-shadow.

---( слайд с демо 3-4 штуки )

Также для обводки текста можно использовать http://caniuse.com/#feat=text-stroke, но оно не поддерживается в FF и IE.

http://css-tricks.com/adding-stroke-to-web-text/

---( слайд с демо )

---( слайд с кодом )

Мы посмотрели на возможности обводки, а как насчет того, чтобы залить текст не сплошным текстом, а картинкой?

По такому случаю извлекаем из рукава свойство background-clip: text, которое в действии выглядит вот так:

---( слайд с background-clip: text )

Свойство было предложено ещё в 2008-м (https://www.webkit.org/blog/164/background-clip-text/), но до сих пор не получило широкую поддержку браузерами, и в браузерах без поддержки выглядит не очень:

---( слайд )

Проблема лишнего решается, например, с помощью свойств, специфичных для webkit:

---( слайд )

Но результат выглядит не очень. Если же захотеть анимировать заливку текста, тут возможностей не очень много. Можно или анимировать фон, либо просто в качестве заливки использовать анимированный GIF.
С анимацией фона есть некоторые проблемы. Например, в CSS-градиентах нельзя сделать плавную смену цветов или узора, можно только менять размер и положение фонового изображения:

---( слайд )

Есть ещё один слегка безумный способ сделать текст с заливкой. Плюс способа - любое HTML-содержимое, включая любые анимации и видео.

---( слайд с северным сиянием )

Так работает mix-blend-mode - свойство, управляющее наложением друг на друга элементов страницы.

Принцип работы следующий: мы создаем темный слой со светлой надписью, и применяем к нему режим наложения darken. Этот режим оставляет только светлые участки слоя, и скрывает все светлые, таким образом мы получаем слой с темной заливкой и дыркой в форме текста посередине.

Текст остается текстом, его можно копировать и можно менять на лету. Заливкой может быть всё, что угодно.

Недостатков минимум два: первый - недостаточная поддержка браузерами, второй - невозможность вырезать текст вокруг фона. То есть мы не можем сделать текст со сложным паттерном и наложить его поверх другого сложного фона (ПРОВЕРИТЬ).

Пользоваться прямо сейчас этим способом нельзя, но я предполагаю, что поддержка браузерами таки будет расти, и, возможно, этот способ может быть полезен в будущем.

Как мы видим, пара HTML+CSS предоставляет не очень широкие возможности оформления текста, и вот тут самое время вспомнить про SVG.

---( слайд c заголовком)

SVG - технология, прекрасная во многих отношениях. Отдельно я люблю её за равноправие текста и графических элементов. Тексту в SVG доступны все возможности оформления, включая заливки и обводки с градиентами и паттернами.

При этом это обычный текст, его можно выделить и скопировать, и он доступен для скринридеров.

---( слайд "просто текст" )

Для начала попробуем обводки:

---( слайд с обводками )

Обводки в этом случае тоже имеют определенные проблемы, но для их создания нужно всего пара строчек в CSS, и такие обводки без проблем можно перекрашивать и анимировать, не раздувая код.

---( слайд - пульсирующая обводка)

---( слайд - ползущая ЗАЛИВКА-паттерн обводки по наведению)

---( слайд с анимированным паттерном в обводке? )

Также обводка может быть не только сплошной, но и пунктирной, причем её параметрами можно также управлять через CSS, а анимация позволяет получить разные интересные эффекты:

---( слайд с бегущим пунктиром )

---( слайд с появляющейся обводкой )

---( слайд с разноцветным бегущим пунктиром )

Посмотрим на заливки: заливкой текста в SVG (как и у любой другой фигуры) может быть не только цвет, но также градиенты и паттерны. Паттерны могут содержать как обычные графические элементы, так и картинки, и всё это можно анимировать.

Причем цветами градиента можно управлять через CSS, и это будет плавная анимация:

---( слайд с анимированными цветами градиента, CSS)

Возможность управления градиентами в CSS ограничены, но если использовать SMIL, можно управлять большим числом параметров, например, радиусом, что позволяет делать более сложные конструкции:

---( слайд с исчезающим текстом )

Перейдем к паттернам. Паттерны позволят добавить тексту фон, который будет хорошо выглядеть на любых разрешениях. Кроме того, элементы паттерна можно до какой-то степени анимировать:

---( слайд с анимированным паттерном )

Проблема с паттернами состоит в том, что не все браузеры поддерживают трансформации внутри паттернов (УТОЧНИТЬ), но их до какой-то степени можно заменить обводками:

---( слайд с пульсирующими сердечками)
---( слайд с расходящимися кружками? )

Паттерны могут содержать не только фигуры, но и обычные картинки:

---( слайд с заливкой с картинкой цветы-закат?)

В том числе, анимированные:

---( слайд огонь/вода)

Выглядит немного диковато, но я уверена, что можно придумать и более изящные варианты использования. Правда, несколько смущает вес всей этой красоты.

Итак, SVG-текст предоставляет множество замечательных возможностей, но с анимацией содержимого у него как-то не очень.

Но за что я особенно люблю SVG, так это за возможность сделать одно и тоже несколькими способами. Чтобы текст выглядел текстом, ему совсем необязательно быть именно текстом, он может быть, например, частью маски, а это уже совсем другие интересные возможности.

В SVG есть два способа обрезки содержимого, это mask и clip-path. Они делают одно и тоже, но по-разному. Clip-path обрезает содержимое следуя только контурам фигур, цвета и обводки не учитываются. Маски же обрезают содержимое учитывая и цвет заливки, и её обводки. Маски работают также, как мы привыкли видеть их в фотошопе, имея возможность управлять степенью видимости слоя с помощью более светлых или более темных участков.

Маски могут содержать в себе растровые изображения, что может быть полезно, например для получения сложных контуров с размытыми краями. Также сделать маску с мягкими краями можно с помощью SVG градиентов.

Но вернемся к тексту: и mask, и clip-path могут содержать в себе текст, а это означает, что можно сделать элемент с нужной нам заливкой, обрезать его по маске и получить тот же самый текст с разноцветной заливкой, но без ограничений, которые накладывают паттерны.

Как видите, результат выглядит также, как обычный текст с заливкой:

---( слайд с картинкой обрезанной по маске, мб с дополнительным контуром )

А теперь анимируем обрезаемый маской контент:

---( слайд с вращающейся заливкой )

---( слайд с жалюзи )

Как мы видим, обрезаемый контент можно анимировать как угодно, доступны любые транформации.

К слову, в SVG можно заворачивать даже видео, используя foreignObject, но ведёт себя эта конструкция довольно странно, а у нас есть другой способ сделать это (об этом чуть позже).

Правда, в случае с масками текст нельзя просто выделить и скопировать, потому что содержимое маски недоступно, но можно наложить поверх прозрачную копию кода, и это решит проблему.

Обратите внимание: текст с fill: none не копируется, только с fill: transparent.

Все способы с SVG имеют один общий недостаток: это поведение текста в SVG. Содержимое SVG отрисовывается на бесконечном холсте, тут нет понятия краев, поэтому текст не перенесется при встрече с краем видимой области не перенесется, а продолжит движение в выбранном направлении.

Можно имитировать строчки с помощью text-path,

НЕДОСТАТКИ SVG-текста!


( в маски?)

---( слайд )

---( слайд )

---( слайд )

---( слайд )

---( слайд )

---( слайд )



---*---
{'fraction_non_alphanumeric': 0.06169423676929417, 'fraction_numerical': 0.0010596338376405486, 'mean_word_length': 4.307091533895657, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '541833', 'n_tokens_mistral': 7195, 'n_tokens_neox': 8378, 'n_words': 2286}