После почти 20 лет развития, нынешняя веб-типографика, с поддержкой функций OpenType, находится в непосредственной близости от типографского качества в реальном мире. Но есть еще одна область графического дизайна, где мы до сих пор используем растровые замены вместо использования родного текста: акцидентные шрифты, искусство расположения букв иллюстративными, великолепными, драматическими, игривыми, экспериментальными или неожиданными способами.
Эффект шрифта liquid (демо)
Отображение текста в HTML
Конечно, мы можем выбрать из тысяч веб-шрифтов и эффектов и использовать CSS для шрифта, некоторые с широкой поддержкой браузера (например, падающие тени и 3D-преобразования) и другие, которые являются экспериментальными (как background-clip и text-stroke), но в основном это. Если мы хотим действительно иметь незаурядную типографику на сайте, мы, как правило, вставляем ее в виде изображения.
Woodtype, стиль, созданный с SVG фильтрами (демо)
Недостатки использования изображений вместо шрифта очевидны: размер файла, отсутствие возможности частых изменений или пользовательский контент, доступность, время производства активов и т.д.
Было бы замечательно, если бы мы моделировать буквы так же, как мы обычно моделируем текст с помощью CSS. Применение границ с различными цветами? Добавить внутренние и внешние наклоны? Добавить узоры, текстуры и 3D-эффекты? Использовать несколько цветов и искаженный шрифт?
Сложные SVG фильтры: CSS для шрифта
Большинство уже возможно: хитрость заключается в том, чтобы дать свободу магии SVG фильтров. SVG фильтры (и CSS фильтры), как правило, считаются способом оживить растровые изображения с помощью эффектов размытия или манипуляций с цветом. SVG фильтр может быть набором директив, чтобы добавить еще один визуальный слой поверх обычного текста. С помощью свойства filter CSS, эти эффекты могут быть использованы за пределами SVG и применены непосредственно к содержимому HTML.
3D эффект vintage (демо)
Говоря о фильтрах CSS и SVG можно немного запутаться: SVG фильтры обозначены в SVG элементе filter и, как правило, применяется в SVG документе. CSS фильтры могут быть применены к любому элементу HTML с помощью свойства filter. CSS фильтры, такие как blur, contrast и hue-rotate являются копиями для часто используемых эффектов SVG фильтров. Кроме того, спецификация позволяет ссылаться на определенные пользователем фильтры из SVG. Еще один момент путаницы – собственный тег -ms- filter, который устарел в Internet Explorer (IE) 9, и был удален в IE 10.
Эта статья в основном имеет дело с первым случаем: SVG фильтры, используемые в SVG документе, встроенном на HTML странице, но позже мы поэкспериментируем с SVG фильтрами, применяемыми к содержимому HTML.
Использование feImage для заполнения текста с повторяющимся узором (демо)
Иллюстрации в этой статье взяты из демо эффектов SVG фильтра, применяемого к тексту. Нажмите на любой из них, чтобы увидеть оригинал. Я называю их “сложные” SVG фильтры, потому что они созданы путем объединения нескольких эффектов. И хотя вид букв значительно изменился, текст все также доступен и может быть скопирован. Так как SVG фильтры поддерживаются в каждом современном браузере, эти эффекты могут отображаться в браузерах, начиная с IE 10.
Эффект sketchy (демо)
Понять SVG фильтры – сложная задача. Даже простые эффекты, такие как тени, требуют сложного, подробного синтаксиса. Некоторые фильтры, такие как feColorMatrix и feComposite, трудно понять без глубокого понимания математики и теории цвета. Эта статья не будет уроком по изучению SVG фильтров. Вместо этого я опишу набор стандартных блоков для достижения определенных эффектов, но объяснений будет мало, так как я буду ориентироваться на документирование отдельных шагов, которые составляют эффект. Вы в основном будете читать о “как”.
Некоторые вариации эффектов poster (демо)
Создание фильтра
Ниже сложный SVG фильтр в действии. Этот фильтр состоит из эффекта старого текста, и мы используем это для пошагового руководства:
Рисунок grungy wall (демо)
Давайте разобьем этот эффект на блоки:
- зеленый текст;
- красная экструзия;
- текст и экструзия разделены прозрачным пробелом;
- текст выглядит старым и шероховатым.
Наш эффект SVG фильтра будет создан путем объединения нескольких небольших модулей, так называемых “примитивы фильтра”. Каждый блок создан из набора одного или нескольких примитивов, которые затем объединяются в единый продукт. Этот процесс легче понять в виде графика.
Этапы процесса, которые создают сложный фильтр.
Добавление фильтра
Мы начнем с шаблонного SVG, который содержит пустой фильтр и текст:
<svg version="1.1" id="Ebene_1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.filtered{
filter: url(#myfilter);
…
}
]]>
</style>
<filter id="myfilter">
<!-- filter stuff happening here -->
</filter>
</defs>
<g class="filtered">
<text x="0" y="200" transform="rotate(-12)">Petrol</text>
</g>
</svg>Элемент фильтра
Мы начнем с тега filter. Между его началом и концом, мы вставим все правила трансформации, цвета, растровой манипуляции и т.д. Фильтр может быть применен к цели в качестве атрибута или с помощью CSS. Цель, как правило, это элемент в SVG, но позже мы узнаем о еще одном варианте: применение SVG фильтров к HTML элементам.
Атрибуты существуют для контроля элемента filter:
- х и у позиции (по умолчанию -10%);
- ширина и высота (по умолчанию 120%);
- ID, который будет необходим позже;
- filterRes, что предопределяет разрешение (устаревший со спецификацией “Filter Effects Module Level 1“);
- relative (objectBoundingBox по умолчанию) или absolute (userSpaceOnUse) filterUnits.
Немного о примитивах фильтра
Как мы узнали, примитивы фильтра являются строительными блоками фильтров SVG. Чтобы иметь какой-нибудь эффект, SVG фильтр должен содержать по меньшей мере один примитив. Примитив, как правило, имеет один или два результата (in, in2) и один результат (result). Примитивы существуют для размытия, движения, заполнения, смешения или искажения.
Спецификация позволяет нам взять несколько атрибутов из фильтрованных элементов в качестве источника ввода. Так как большинство из них не надежны во всех браузерах, в этой статье мы будем придерживаться SourceGraphic (элемент нефильтрованного источника с цветами, строками, образцами заполнения и т.д.) и SourceAlpha (непрозрачная область альфа-канала), которые имеют очень хорошую поддержку браузера.
Как уплотнить вводимый текст
Первый примитив фильтра, с которым мы столкнемся – feMorphology, примитив предназначен для расширения (operator=”dilate”) или тонкий (operator=”erode”) вход – поэтому, идеально подходит для создания контуров и границ.
Вот как мы бы уплотним SourceAlpha четырьмя пикселями:
<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="BEVEL_10" />
Создание экструзии
Следующим шагом является создание 3D экструзии результата из последнего примитива. Встречайте feConvolveMatrix. Этот примитив фильтра является одним из самых могущественных и сложных. Его основной целью является то, чтобы вы могли создать свой собственный фильтр. Короче говоря, вы должны определить растр пиксель (матрица ядра), что изменяет пиксель в соответствии со значениями соседних пикселей. Таким образом, становится возможным создавать свои собственные эффекты фильтра, такие как размытие или резкость, или создать экструзию.
Вот feConvolveMatrix для создания 45-градусной, 3-пиксельной глубокий экструзии. Атрибут order определяет ширину и высоту, чтобы примитив знал применять матрицу 3×3 или 9×1:
<feConvolveMatrix order="3,3" kernelMatrix= "1 0 0 0 1 0 0 0 1" in="BEVEL_10" result="BEVEL_20" />
Помните, что IE 11 и Microsoft Edge (в момент написания статьи) не могут справиться с матрицами более 8×8 пикселей, и они не очень хорошо справляются с многострочной матрицей, поэтому удаление всего “возврата каретки” перед развертыванием этого код будет лучшим, что можно сделать.
Примитив будет применен в равной степени слева, сверху, справа и снизу. Так как мы хотим получить экструзию только справа и снизу, мы должны сместить результат. Два атрибута определяют начало эффекта, targetX и targetY. К сожалению, IE интерпретирует их вразрез со всеми другими браузерами. Поэтому, чтобы сохранить совместимость во всех браузерах, мы отрегулируем смещение другим примитивом фильтра, feOffset.
Смещение
Как следует из названия, feOffset принимает ввод и смещает его:
<feOffset dx="4" dy="4" in="BEVEL_20" result="BEVEL_30"/>
Обрезка экструдированной части
feComposite является одним из немногих примитивов фильтра, который принимает два ввода. Затем он объединяет их, применяя метод сложения двух изображений, называемый Porter-Duff compositing. feComposite может быть использован, чтобы замаскировать или вырезать элементы. Вот как вычесть вывод feMorphology из вывода feConvolveMatrix:
<feComposite operator="out" in="BEVEL_20" in2="BEVEL_10" result="BEVEL_30"/>
Окраска экструзии
Это двухступенчатый процесс:
Во-первых, мы создаем цветную область с feFlood. Этот примитив просто выпустит прямоугольник размером с область фильтра в цвете, который мы обозначим:
Мы вырежем часть прозрачного BEVEL_30 с еще одним feComposite:
<feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" />
Смешивание наклона и графики в один вывод feMerge делает это, смешивает наклон и графику в один вывод:
<feMerge result="BEVEL_50"> <feMergeNode in="BEVEL_40" /> <feMergeNode in="SourceGraphic" /> </feMerge>
Выглядит очень похоже на желаемый результат. Давайте сделаем это немного более реалистичным, придав старый вид.
Добавление фрактальной текстуры
feTurbulence является одним из самых забавных примитивов. Тем не менее, он может расплавить ваш многоядерный процессор и сделать так, что ваши вентиляторы будут вращаться как турбореактивные двигатели Боинга 747. Используйте его с умом, особенно на мобильных устройствах, потому что это примитив может быть действительно, действительно плохо повлиять на производительность рендеринга.
Как feFlood, feTurbulence выводит заполненный прямоугольник, но использует шумную, неструктурированную текстуру.
У нас есть несколько значений, чтобы изменить внешний вид и ритм текстуры. Таким образом, мы можем создавать поверхности, которые выглядят, как дерево, песок, акварель или бетон. Эти параметры оказывают непосредственное влияние на эффективность фильтра, поэтому тщательно тестируйте. Вот, как создать узор, напоминающий штрихи:
<feTurbulence baseFrequency=".05,.004" width="200%" height="200%" top="-50%" type="fractalNoise" numOctaves="4" seed="0" result="FRACTAL-TEXTURE_10" />
По умолчанию, feTurbulence выводит цветную текстуру – не то, что мы хотим. Нам нужна серая альфа-карта; и немного контраста тоже. Давайте запустим его через feColorMatrix, чтобы увеличить контраст и в то же время преобразовать его в оттенки серого:
<feColorMatrix type="matrix" values= "0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.2 1.1" in="FRACTAL-TEXTURE_10" result="FRACTAL-TEXTURE_20" />
Последнее, что нужно сделать, это сложить текстурированную альфа в формы букв с нашим feComposite:
Сделано!
Как применять SVG фильтры к SVG содержимому
Есть два способа применения фильтров SVG к текстовому элементу SVG:
1. С помощью CSS
.filtered {
filter: url(#filter);
}2. С помощью атрибута
<text filter="url(#filter)">Some text</text>
Применение SVG фильтров к HTML содержимому
Одной из самых интересных особенностей фильтров является то, что возможно встроить SVG, определить в нем фильтр, а затем применить его к любому HTML элементу с CSS:
filter: url(#mySVGfilter);
На момент написания, Blink и WebKit требуют, чтобы это было добавлено:
-webkit-filter: url(#mySVGfilter);
В теории звучит легко, на практике сложнее:
- SVG фильтры в HTML содержимом в настоящее время поддерживаются в WebKit, Firefox и Blink. IE и Microsoft Edge покажут нефильтрованный элемент, поэтому проверьте вид умолчанию.
- SVG, который содержит фильтр не может быть установлен на display: none. Тем не менее, вы можете установить его visibility: hidden.
- Иногда размер SVG имеет прямое влияние на то, сколько из целевого элемента фильтруется.
- Я сказал, что WebKit, Blink и Firefox понимают этот синтаксис? Сафари (и его младший брат мобильный Safari) – частный случай. Вы можете получить большинство из этих демо, работающих в Safari, но это очень мучительный процесс. На момент написания, я не могу рекомендовать использование SVG фильтров в содержании HTML в текущей версии Safari (8.0.6). Результаты непредсказуемы, и техника не пуленепробиваема. А если Safari не удастся Сафари предоставить фильтр для какой-то причине, он не отобразит HTML цель вообще, а это кошмар доступности. Как правило, вы увеличиваете свои шансы на то, что Safari отобразит фильтр с абсолютным позиционированием и фиксированным размером вашей цели. В качестве доказательства концепции, я создал эффект фильтра “pop”, оптимизированный под настольный Safari. Применение feImage к HTML элементам, кажется невозможным в Safari.
Предыдущие демо, примененные к HTML содержимому
В этих демо, обертки устанавливаются на contenteditable = “true для удобного редактирования текста. (Помните, что эти демо являются экспериментальными и не будут работать в Safari, IE или Edge.)
- Текст, заполненный изображениями
- Экструдированный и заполненый узором
- Экструдированный и с подсветкой
- Шероховатый вид с использованием фрактальных фильтров
- feTurbulence для достижения эффекта разлитой воды
- Цветные поп-арт эффекты
- Эскизный стиль
Структурирование фильтра
В зависимости от его сложности, фильтр может быстро стать чем-то запутанным. Во время авторинга, вы можете добавлять и удалять правила, изменять их порядок и значения, и вскоре вы растеряетесь. Вот некоторые правила, которые я составил для себя, которые могут мне помочь отслеживать то, что происходит. Люди и проекты отличаются друг от друга; то, что кажется логичным и структурированным для меня может быть хаотичным и непонятным для вас, так что отнеситесь к этим рекомендациям с сомнением.
Классификация
Я группирую примитивы фильтров в модули в зависимости от их функциональности – например, “граница”, “заполнение”, “наклон” и т.д. В начале и в конце модуля, я добавил комментарий с названием этой группы.
Название
Хорошие названия помогут вам структурировать ваш фильтр и отслеживать то, что происходит внутри и за пределами примитива. После экспериментов с БЭМ подобными схемами, я, наконец, остановился на очень простой структуре названия:
NAME-OF-GROUP_order-number
Например, у вас есть BEVEL_10, BEVEL_20, OUTLINE_10 и так далее. Я начинаю с 10 и увеличиваю на 10, чтобы было легче изменить порядок примитивов или добавить примитив между или в начале группы. Я предпочитаю полные cap, потому что они выделяются и помогают мне сканировать источник быстрее.
Всегда описывайте вход и результат
Хотя это не совсем необходимо, я всегда описываю “вход” и “результат”. (Если не указано, вывод примитива будет вводом его преемника.)
Блоки
Давайте посмотрим на некоторые отдельные методы достижения определенных эффектов. Комбинируя эти блоки, мы можем создать новые сложные эффекты фильтра.
Строка
<!-- 1. Thicken the input with feMorphology: --> <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thickened" /> <!-- 2. Cut off the SourceAlpha --> <feComposite operator="out" in="SourceAlpha" in2="thickened" />
Не гарантировано, что этот метод будет хорошо выглядеть. Особенно при применении dilate в сочетании с большими значениями radius, результат может выглядеть хуже, чем в геометрии, созданной с помощью stroke-width. В зависимости от ситуации, лучшей альтернативой было бы хранить текст в элементе symbol, а затем вставить его в случае необходимости с помощью use, и уплотнить образец с CSS собственностью stroke-width. Помните, что stroke-width не может быть применен к содержимому HTML.
Разорванный вид
<!-- 1. Thicken the input with feMorphology: --> <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thickened" /> <!-- 2. Cut off the SourceAlpha --> <feComposite operator="out" in="SourceAlpha" in2="thickened" />
<!-- 1. Create a colored filled area --> <feFlood flood-color="#F79308" result="COLOR" /> <!-- 2. Cut off the SourceAlpha --> <feComposite operator="in" in="COLOR" in2="SourceAlpha" />
Следует отметить, что, помимо feFlood, feColorMatrix – другой способ изменения цвета источника входа, даже если это сложнее понять.
Смещение
<!-- Offset the input graphic by the amount defined in its "dx" and "dy" attributes: --> <feOffset in="SourceGraphic" dx="10" dy="10" />
Экструзия
<!-- Define a convolve matrix that applies a bevel. --> <!-- Order defines the depth of the extrusion; angle is defined by the position of "1" in the matrix. Here we see a 45-degree, 4-pixel deep extrusion: --> <feConvolveMatrix order="4,4" kernelMatrix=" 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1" in="SourceAlpha" result="BEVEL" /> <!-- offset extrusion: --> <feOffset dx="2" dy ="2" in="BEVEL" result="OFFSET" /> <!-- merge offset with Source: --> <feMerge> <feMergeNode in="OFFSET" /> <feMergeNode in="SourceGraphic" /> </feMerge>
Заполнение шумом
Примитив фильтра feTurbulence создаст шумную текстуру, применив так называемый алгоритм шума Перлина (изобретенный Кен Перлин во время его работы на TRON в 1981 году). Это создаст прямоугольник, заполненный шумом, который выглядит как то, что вы могли видеть на старых телевизорах поздно ночью до того, как кабельное телевидение было изобретено.
Вид структуры шума может быть изменен по нескольким параметрам:
- type в состоянии по умолчанию будет производет жидкую текстуру.
- type может быть установлен на fractalNoise, который выдаст песчаный результат.
- baseFrequency контролирует повторение шаблона х и у.
- numOctaves повысит уровень детализации и должен иметь низкое значение, если вопрос в производительности.
- Число для начала рандомизации определяется seed.
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="5" seed="2" />
Заливка изображения
Цель feImage в том, чтобы заполнить цель текстурой. Если мы хотим применить повторяющийся узор, он должен быть использован в сочетании с feTile.
<!-- The following code will create a 100 × 200-pixel square filled with "myfill.svg": --> <feImage xlink:href="myfill.svg" x="0" y="0" width="100" height="200" result="IMAGEFILL"/> <!-- We then use this fill as an input for feTile, creating a repeating pattern this way: --> <feTile in="IMAGEFILL" resulte="TILEPATTERN"/> <!-- Now we will use feComposite to "cut off" SourceAlpha's transparent areas from the fill: --> <feComposite operator="in" in="TILEPATTERN" in2="SourceAlpha" />
Хорошая новость по поводу фильтра – спецификация позволяет использовать любой элемент SVG в качестве входа и создать из него заливку узора. Так, в теории, можно создать узоры из символов, групп и фрагментов в вашем SVG, а затем применить их в качестве текстуры, даже к HTML элементам. К сожалению, из-за старого бага, Firefox принимает только внешние ресурсы в качестве входных. Если вы предпочитаете, чтобы все было самодостаточным и хотите избежать дополнительного запроса HTTP, есть надежда: вставьте заливку узора как UTF-8 данные URI:
<feImage xlink:href= 'data:image/svg+xml;charset=utf-8, <svg width="100" height="100"><rect width="50" height="50 /></svg>' />
Некоторые браузеры не понимают UTF-8 данные URI, когда они не URL кодированы, поэтому сделайте URL кодирование по умолчанию:
<feImage xlink: href='data:image/svg+xml; charset=utf-8,%3Csvg%20width%3D %22100%22%20height%3D%22100% 22%3E%3Crect%20width%3D%2250% 22%20height%3D%2250%20%2F%3E %3C%2Fsvg%3E' />
Если вы хотите применить feImage к содержимому HTML, помните, что размер имеет значение. SVG, который содержит фильтр должен покрыть площадь, где он применяется. Самый простой способ добиться этого – сделать его абсолютно позиционированным ребенком внутри элемента блока:
<style>
h1{
position: relative;
filter: url(#myImageFilter);
}
h1 svg{
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
<h1>
My Filtered Text
<svg>
<filter id="myImageFilter">…</filter>
</svg>
</h1>Эффект освещения
Это еще один эффект из разряда “ничего себе”, который быстро надоедает при частом использовании. Этот фильтр имеет серьезное влияние на производительность, поэтому используйте его с умом.
<!--We create a heightmap by blurring the source: -->
<feGaussianBlur stdDeviation="5" in="SourceAlpha" result="BLUR"/>
<!-- We then define a lighting effect with a point light
that is positioned at virtual 3D
coordinates x: 40px, y: -30px, z: 200px: -->
<feSpecularLighting surfaceScale="6" specularConstant="1"
specularExponent="30" lighting-color="#white" in="BLUR"
result="SPECULAR">
<fePointLight x="40" y="-30" z="200" />
</feSpecularLighting>
<!-- We cut off the parts that overlap the source graphic… -->
<feComposite operator="in" in="SPECULAR"
in2="SourceAlpha" result="COMPOSITE"/>
<!-- … and then merge source graphic and lighting effect: -->
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="COMPOSITE"/>
</feMerge>Вывод
Существует пробел между чистым макетом CSS и пользовательскими элементами дизайна, созданных в таких программных обеспечениях, как Photoshop или Illustrator. Внешние активы встроенные в качестве фонового изображения и SVG символов всегда будут иметь свое место в дизайне веб-сайтов. Но сложные SVG фильтры дают нам большую независимость от посторонних средств проектирования заполняют этот пробел, позволяя нам создавать визуальные стили непосредственно в браузере.
В этой статье мы видели, как SVG фильтры помогают нам создавать игривую, декоративную веб-типографику. Но это не значит, что мы должны останавливаться на достигнутом. Вскоре поддержка браузера станет достаточной для использования этих эффектов на каждом элементе HTML также легко, как мы используем CSS сегодня. Даже если эффекты ведут себя иначе, чем родные техники CSS (SVG фильтр повлияет не только на элемент, но и на всех детей), будет интересно посмотреть, как изобретательные веб-дизайнеры используют эти методы в ближайшем будущем.
Ресурсы из этой статьи:
- Sophisticated Filter Effects, GitHub
- The repository of demos
- Sophisticated Filter Effects, Codepen
- Play around with the code.
