Добавить фильтры SVG с CSS

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

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

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

Заинтересованы в обучении больше о SVG? Посмотрите на нашу статью на Все, что вам нужно знать о SVG в Интернете Отказ В качестве альтернативы, добавьте интерес к вашим сайтам одним из этих крутых Примеры анимации CSS Отказ

• Загрузите файлы Для этого учебника от Filicalo

01. Начните

Во-первых, вам необходимо загрузить файлы проекта, используя ссылку непосредственно выше. Как только вы сделали это, перетащите Начните Папка проекта на ваш код IDE и открыть index.html. страница. Вы увидите, что есть какой-то страница содержимого уже написано. Секция заголовка должна быть создана, и это будет содержать заголовок, которая будет затронута фильтром SVG. Добавьте код здесь, просто внутри тело тег.

 & lt; class = "BG" & GT;
& lt; class = "Средний" и GT;
& lt; h2 class = "заголовок" и GT; под водой
Приключенческий парк & lt; / h2 & gt;
& lt; class = "INTRO_BLOCK" & GT; 

02. Закройте заголовок

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

 & lt; h3 class = "Subhead" & GT; Опыт океана
& lt; BR & GT; как никогда раньше и LT; / H3 & GT;
& lt; p class = "Intro" & gt; под водой
Парк приключений - это опыт
отрицать что-нибудь, что вы когда-либо имеете
имел. Путешествовать на глубины
океан и гулять среди
Морская жизнь! & Lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Создать фильтр SVG

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

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & gt;
& lt; filter id = "смещение" и gt;
& lt; тип фетабурбелетия = "турбулентность"
basefrequency = "0,004" numoctaves =
«2» результат = «Турбулентность» / & GT;
& lt; / filter & gt;
& lt; / svg & gt; 

04. Скрыть SVG

Перейти к Page.csss Файл сейчас, и, прежде всего, код CSS для остальной части страницы будет там, где пойдет наши новые CSS. Здесь SVG настроен на не отображение на странице вообще. Заголовок два тега установлен, чтобы иметь право на него вправо.

 SVG {
Дисплей: нет;
}
H2 {
Размер шрифта: 5,5 Вт;
Семья шрифта: «Крит раунд», Serif;
} 

05. Добавить в заголовок

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

. {
Высота линии: 0;
Дисплей: встроенный блок;
прокладки: 70px;
Цвет: #ccffff; 

06. Завершите заголовок

В завершении класса заголовок, следующая строка применяет смещение ID в SVG к тексту. То переводить3d. гарантирует, что текст становится аппаратному ускоренным. Шкала слегка изменяется, чтобы обеспечить применение смещения, это выглядит правильно.

 Фильтр: URL (#DisplaceFilter);
Преобразование: Translate3D (0, 0, 0);
Преобразование: масштабирование (1.8) ротати (-2DEG);
} 

07. Сделай это смещением

Если вы проверяете фильтр на этом этапе турбулентность полностью заменяет текст. Это легко исправить. Вернитесь в код фильтра на странице index.html. Это принимает турбулентность и исходный график, который является текстом, и применяет его как фильтр смещения. Попробуйте изменить базовую частоту и количество октав в турбулентности.

 & lt; fedisplacementmap in2 = "Турбулентность" в = "
Учебная «шкала =» 30 "xchannelselector =" R "
ychannelselector = "G" Результат = "disp" / & gt; 

08. Смягчить края

Края выглядят немного жестко для водяного эффекта. Это можно вылечить с гауссовым размытом. Добавьте код после карты смещения. Когда вы обновляете страницу, она определенно размытая текст, но перемещение исчезло. Опять же, это элементы, которые могут быть закреплены на пути к созданию эффекта.

 & lt; fegaussianblur in = "sourcegraphic"
stddViation = "15" результат = "BLR" / & GT; 

09. Составят два

Добавьте композиционную линию здесь ниже предыдущего гауссовского размытия. Вы увидите, что это объединяет размытие и смещение вместе, а также создает водный полупрозрачный эффект к тексту. Он пошел какой-то способ смягчить края, но недостаточно. Было бы хорошо, если в этом можно было добавить оригинальный размытие.

 & lt; fexoMposite in = "BLR" in2 = "disp" respeate = "в" результате = "comp" / & gt; 

10. объединить размытие

Операция слияния позволяет объединить окончательный результат композита с эффектом размытия. Теперь это выглядит так, чтобы он подходит с фоновым изображением и, похоже, вписывается с линиями света, проходящего через воду. Лучшая часть о тексте является то, что она все еще выбирается и часть страницы, в отличие от того, если вы создали это в Photoshop.

.
& lt; Фермовый желес в = "BLR" / & GT;
& lt; Фермовый железой в = "комп" / & gt;
& lt; / femerge & gt; 

11. Создать анимацию

Вернуться к Page.csss Файл и добавьте в ключевые кадры, как показано здесь. Это просто расширит размер шрифта от нулевой вертикальной ширины до 5,5 вертикальной ширины. В начале это будет применено к заголовку, так что текст весытся вверх и на месте на экране. По мере движения текста перемещение также изменится по длине, давая водяную пульсацию.

 @keyFrames Scaler {
из {
Размер шрифта: 0VW;
}
к {
Размер шрифта: 5,5 Вт;
}
} 

12. Измените стиль H2

То H2. Стиль был ранее добавлен на шаге 4. Замените этот код этим новым кодом, который добавляет анимацию CSS в течение четырех секунд к заголовку. Анимация останавливается и держит на последнем ключевом кадре. Сохраните это и проверьте его в браузере, чтобы увидеть текстовое RIFLING на место.

 H2 {
Высота линии: 0;
Размер шрифта: 0VW;
Имя анимации: Scaler;
Анимация-продолжительность: 4S;
Режим анимации-заполнения: вперед;
Семья шрифта: «Крит раунд», Serif;
} 

13. Добавить навигацию

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

& lt; nav class = "Меню" и GT;
& lt; тип ввода = "флажок" href = "#" Class =
«Menu-Open» имя = «Меню открыть» ID = "меню
открыть »/ & gt;
& lt; класс метки = "кнопка" меню "
для = «меню - открыть» и GT;
& lt; span class = "Гамбургер
hamburger-1 "& gt; & lt; / span & gt;
& lt; span class = "Гамбургер
Hamburger-2 "& gt; & lt; / span & gt;
& lt; span class = "Гамбургер
hamburger-3 "& gt; & lt; / span & gt;
& lt; / mabell & gt; 

14. Завершите навигацию

Теперь оставшиеся навигационные элементы могут быть добавлены. Это также использует шрифт Awesome Icon Source Source Library, которая была добавлена ​​в заголовок для ссылки с CDN этой библиотеки. Каждый меню круглый элемент будет иметь значок внутри него.

 & lt; href = "#" Class = "Пункт меню" и GT; & lt; i class = "FA
Fa-Car "& gt; & lt; / a & gt;
& lt; href = "#" Class = "MENU - элемент" & gt; & lt; я
CLASS = "FA FA-SHOP" & GT; & LT; / I & GT; & lt; / a & gt;
& lt; href = "#" Class = "MENU - элемент" & gt; & lt; я
Class = "FA FA-карта" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; href = "#" Class = "MENU - элемент" & gt; & lt; я
Class = "FA FA-чемодан" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; / nav & gt; 

15. Добавьте новый фильтр

Другой фильтр будет добавлен для этого эффекта. В SVG добавьте этот код после тега закрытия фильтра кода, добавленного ранее. Здесь эффекты создаются очень похожими на ранее. Это позволит меню выглядеть как липкие капли жидкости, движущихся на части.

 & lt; filter id = "Shaded-Blob" и GT;
& lt; fegaussianblur in = "sourcegraphic"
Результат = «размытие» stddViation = "20" / & gt;
& lt; feColormatrix in = "Blur" Режим =
«Матрица» значения = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 0 18 -7 "
Результат = "BLOB" / & GT;
& lt; fegaussianblur in = "Blob"
stddviation = "3" результат = "тень" / & gt;
& lt; feColormatrix in = "тень" режим =
«Матрица» значения = "0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 1 -0,2 "
Результат = "тень" / & gt; 

16. Завершите фильтр

Остальная часть фильтра добавляется здесь, что завершает эффект, который будет размещен на каждом круге пунктов меню. Это приведет к тому, что элементы могут добавить эффект жидкости. Сохраните эту страницу, а затем переключитесь к файлу «Design.css».

 & lt; feoffset in = "Тень" dx = "0" dy = "2"
Результат = "тень" / & gt;
& lt; fexomposite in2 = "тень" в = "BLOB"
Результат = "Blob" / & gt;
& lt; fexomposite in2 = "Blob"
in = "sourcegraphic" результат = "смесь" / & gt;
& lt; / filter & gt; 

17. Примените фильтр

CSS-код теперь может быть добавлен к другому design.csss. просто держать все навигационные CSS вместе в одном месте. Некоторый код был добавлен, но здесь фильтр применяется к меню, который будет фиксированным меню, так что он всегда присутствует на экране.

 .menu {
Фильтр: URL («# Shaded-Blob»);
Положение: исправлено;
Padding-Top: 20px;
Пальки слева: 80px;
Ширина: 650px;
Высота: 150px;
Размеры коробки: пограничная коробка;
Размер шрифта: 20px;
Выравнивание текста: слева;
} 

18. Сделайте меню работать

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

. Menu-Open {
Дисплей: нет;
}
.menu-item: hover {
Фон: # 47959F;
Цвет: # B2F0F8;
}
.Menu-item: Nth-Child (3), .menu-item: nth-
Ребенок (4), .Menu-item: Nth-Child (5), .Menu-
Пункт: Nth-Child (6) {
Продолжительность перехода: 400 мс;
} 

19. Добавьте гамбургер

Значок бургера поднимается над другими элементами, изменив его Z-индекс Отказ Меню вырастет, когда пользователь охватывает это, и нажав на меню, теперь получит бургер, чтобы анимировать от трех строк бургера в «X», указывающий на опцию удалить меню.

. Menu-Open-кнопка {
Z-индекс: 2;
Transition-Timing-функция: Cubic-
Безье (0,175, 0,885, 0,32, 1,275);
Продолжительность перехода: 400 мс;
Преобразование: масштаб (1.1, 1.1) Translate3D
(0, 0, 0);
Курсор: Указатель;
}
.menu-open-кнопка: hover {
Преобразование: масштаб (1.2, 1.2) Translate3D
(0, 0, 0);
}

20. Переместите элементы

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

.Menu-Open: Checked + .Menu-Open-кнопка {
Функция времени перехода: линейный;
Продолжительность перехода: 400 мс;
Преобразование: масштаб (0,8, 0,8) Translate3D
(0, 0, 0);
}
.menu-Open: проверено ~ .menu-item {
Transition-Timing-функция: Cubic-
Безье (0,165, 0,84, 0,44, 1);
}
.Menu-Open: Checked ~ .Menu-item: Nth-Child (3) {
Переход - продолжительность: 390 мс;
Преобразование: Translate3D (110px, 0, 0);
} 

21. Обратитесь в оставшееся движение

Оставшиеся элементы меню перемещены с разными скоростями. Это позволяет элементам объединяться на ранних этапах анимации, что даст жидкости Blobby Lique, используя фильтр SVG. Сохраните документы и посмотрите готовые результаты в вашем браузере.

. Menu-Open: Checked ~ .Menu-item: Nth-Child (4) {
Переход-продолжительность: 490 мс;
Преобразование: Translate3D (220px, 0, 0);
}
.Menu-Open: Checked ~ .Menu-item: Nth-Child (5) {
Переход-длительность: 590 мс;
Преобразование: translate3d (330px, 0, 0);
}
.Menu-Open: Checked ~ .Menu-item: Nth-Child (6) {
Продолжительность перехода: 690 мс;
Преобразование: Translate3D (440px, 0, 0);
} 

Эта статья была первоначально опубликована в Creative Web Design Magazine Веб-дизайнер Отказ Купить проблему 283 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• Animate SVG с JavaScript
• Полное руководство по SVG
• Superchark SVG анимации с GSAP