Додати фільтри SVG з CSS

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

Те, як фільтр застосовується до SVG, насправді через CSS, кажучи, який ідентифікатор фільтр має. Використовуючи ту саму ідею, фільтр може бути застосований до звичайного тексту, наприклад. Хороша частина полягає в тому, що ви можете додати деякі великі графічні погляди на ваш текст, який був би раніше можливий, застосовуючи ряд фільтрів Photoshop та збереження як зображення. Використовуючи фільтр SVG, текст залишається доступним та вибирається, оскільки він все ще просто регулярний текстовий елемент на вашій сторінці.

Код тут створить карту переміщення до тексту, яке також містить альфа-карту, щоб зробити це з'являтися водянистою та відповідати темі сторінки. Тоді буде створено ще один фільтр, який робить меню, як водяні краплі, які трохи палите разом, але розкладу, як вони рухаються далі. Знову ж таки це зберігає тему цієї конкретної сторінки та показує два творчі способи застосування SVG фільтрів до іншого вмісту.

Зацікавлене навчання більше про SVG? Погляньте на нашу статтю Все, що потрібно знати про SVG в Інтернеті . Крім того, додайте певний інтерес до своїх сайтів одним з цих класних Приклади анімації CSS .

• Завантажте файли Для цього навчального посібника з файлів

01. Початок роботи

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

 & lt; div class = "bg" & gt;
& lt; div class = "середній" & gt;
& lt; h2 class = "заголовок" & gt; під водою
Пригодницький парк & lt; / h2 & gt;
& lt; div class = "intro_block" & gt; 

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

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

 & lt; h3 class = "підзаголовок" & 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; фільтр ID = "переміщенняфільтр" & gt;
& lt; fetrurbulence тип = "турбулентність"
basefrequency = "0.004" numococtaves =
"2" результат = "турбулентність" / & gt;
& lt; / фільтр & gt;
& lt; / svg & gt; 

04. Приховати SVG

Перейти до page.css Файл зараз, і перш за все код CSS для решти сторінки буде там, де буде йти наші нові CSS. Тут SVG встановлено, щоб не відображати на сторінці взагалі. Заголовок два теги встановлено, щоб мати правильний шрифт, що застосовується до нього.

 SVG {
Дисплей: Ні;
}
h2 {
Шрифт-розмір: 5.5VW;
Шрифт-Сім'я: "Крит круглий", Serif;
} 

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

Точний висота лінії Встановлено до нуля, тому що пізніше заголовок буде анімовані, тому, маючи контроль над його масштабуванням на сторінці, важливо. Також дається деяка підкладка, щоб вона сидить з правильною кількістю простору навколо нього, а колір змінюється.

 .HEADLINE {
Лінійна висота: 0;
Дисплей: inline-block;
Прокладка: 70px;
Колір: #ccfff; 

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

При завершенні заголовка класу, наступний рядок застосовує переміщенняфільтр Ідентифікатор у SVG до тексту. Точний translate3d Гарантує, що текст стає апаратним прискореним. Шкала трохи змінюється, щоб забезпечити, щоб при застосуванні переміщення він виглядає правильно.

 Фільтр: URL-адреса (#displactionfilter);
Трансформація: перекладач3d (0, 0, 0);
Трансформування: масштабний (1.8) ротаційний (-2deg);
} 

07. Зробіть його витісненням

Якщо ви перевіряєте фільтр на цьому етапі турбулентність повністю замінює текст. Це легко виправити. Поверніться до коду фільтра на сторінці index.html. Це приймає турбулентність і вихідну графіку, яка є текстом, і застосовує його як фільтр зсуву. Спробуйте змінити базову частоту та кількість октав у турбулентності.

 & lt; fedisplacementmap in2 = "турбулентність" in = "
SOUBERGRAPHIC "шкала =" 30 "xchannelselector =" r "
ychannelselector = "g" результат = "disp" / & gt; 

08. Пом'якшити краї

Кромки виглядають трохи жорстким для водного ефекту. Це можна вилікувати з гауссовим розмиттям. Додайте код після карті переміщення. Коли ви оновлюєте сторінку, він, безумовно, розмитий текст, але витіснення пройшло. Знову ж таки, це елементи, які можуть бути закріплені на шляху до створення ефекту.

 & lt; fegaussianblur in = "sovergraphic"
stddeviation = "15" результат = "blr" / & gt; 

09. Композит два

Додайте композитну лінію тут нижче попереднього гауссового розмиття. Ви побачите, що це поєднує розмивання та переміщення разом, а також створює водянистий напівпрозорий ефект до тексту. Він пройшов якийсь спосіб пом'якшити краї, але недостатньо. Було б добре, якщо в цьому було додано оригінальний розмиток.

 & lt; fexposite in = "blr" in2 = "disp" оператор = "в" результат = "comp" / & gt; 

10. Об'єднайте розмиття

Операція злиття дозволяє остаточний результат композиту, який буде об'єднаний з ефектом розмивання. Тепер це схоже на те, що він підходить з фоновим зображенням і, здається, підходить до ліній світла, що надходить через воду. Найкраща частина тексту полягає в тому, що вона все ще вибирається, а частина сторінки, на відміну від, якщо ви створили це у Photoshop.

 & lt; femerge результат = "фінальний" & gt;
& lt; femerergenode in = "blr" / & gt;
& lt; femergenode in = "comp" / & gt;
& lt; / femerge & gt; 

11. Створіть анімацію

Повернутися до page.css Файл і додати в ключові кадри, як показано тут. Це лише розширить розмір шрифту з нульової вертикальної ширини до вертикальної ширини 5,5. На початку це буде застосовано до заголовка, щоб текстові ваги вгору і на місці на екрані. Оскільки текст рухається, зміщення також зміниться по довжині, даючи водянистий пульсацію.

 @Keyframes Scaler {
від {
Шрифт-розмір: 0VW;
}
до {
Шрифт-розмір: 5.5VW;
}
} 

12. Зміна стилю H2

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

 H2 {
Лінійна висота: 0;
Шрифт-розмір: 0VW;
Анімація-назва: Scaler;
Анімація-тривалість: 4s;
Режим анімації: Forwards;
Шрифт-Сім'я: "Крит круглий", Serif;
} 

13. Додати навігацію

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

& lt; nav class = "меню" & gt;
& lt; Вхідний тип = "прапорця" Href = "#" клас =
"Меню-Відкрити" NAME = "MENU-OPEN" ID = "
Відкрити "/ & gt;
& lt; Label Class = "Menu-Open-Button"
для = "меню-відкритий" & gt;
& lt; span class = "hamburger
hamburger-1 "& gt; & lt; / span & gt;
& lt; span class = "hamburger
hamburger-2 "& gt; & lt; / span & gt;
& lt; span class = "hamburger
hamburger-3 "& gt; & lt; / span & gt;
& lt; / label & gt; 

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

Тепер можуть бути додані інші навігаційні елементи. Це також використовує дивовижну бібліотеку значків з відкритим вихідним кодом, яке було додано до розділу голови, щоб посилатися з CDN цієї бібліотеки. Кожне меню круговий елемент матиме значок всередині нього.

 & lt; href = "#" class = "пункт меню" & gt; & lt; i class = "fa
fa-car "& gt; & lt; / i & gt; & lt; / a & gt;
& lt; href = "#" class = "пункт меню" & gt; & lt; i
клас = "fa-ship" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; href = "#" class = "пункт меню" & gt; & lt; i
Class = "fa fa-map" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; href = "#" class = "пункт меню" & gt; & lt; i
Class = "Fa-Suitcase" & gt; & lt; / i & gt; & lt; / a & gt;
& lt; / Nav & GT; 

15. Додайте новий фільтр

Інший фільтр буде додано для цього ефекту. У SVG додайте цей код після завершення фільтрувального тегу коду, доданого раніше. Тут ефекти створюються дуже схожим на раніше. Це дозволить меню виглядати як липкі краплі рідини, що рухаються.

 & lt; фільтр ID = "затінений-blob" & gt;
& lt; fegaussianblur in = "sovergraphic"
Результат = "blur" stddeviation = "20" / & gt;
& lt; feacolormatrix in = "blur" mode =
"Матриця" значення = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7 "
Результат = "blob" / & gt;
& lt; fegaussianblur in = "blob"
stddeviation = "3" результат = "тінь" / & gt;
& lt; feacolormatrix in = "shadow" mode =
"Матриця" значення = "0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 1 -0.2 "
Результат = "тінь" / & gt; 

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

Залишок фільтра додано тут, який завершує ефект, який буде розміщений на кожному колі пунктів меню. Це призведе до того, що елементи матимуть ефект Liquid Blob. Збережіть цю сторінку, а потім перейдіть до файлу "design.css".

 & lt; feoffset in = "тінь" dx = "0" dy = "2"
результат = "тінь" / & gt;
& lt; fexomosite in2 = "тінь" in = "blob"
Результат = "blob" / & gt;
& lt; fexomposite in2 = "blob"
In = "soverngraphic" результат = "змішувати" / & gt;
& lt; / фільтр & gt; 

17. Нанесіть фільтр

Тепер код CSS тепер може бути доданий до іншого design.css , просто зберегти всю навігацію CSS разом у тому ж місці. Деякий код додано, але тут фільтр застосовується до меню, який буде фіксованим меню, так що він постійно присутній на екрані.

 .menu {
Фільтр: URL ("# flower-blob");
Позиція: фіксована;
прокладка: 20px;
підкладка ліворуч: 80px;
Ширина: 650px;
Висота: 150px;
коробка: кордон-коробка;
Шрифт-розмір: 20px;
Текст-вирівнювання: ліворуч;
} 

18. Зробіть роботу меню

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

 .Menu-Open {
Дисплей: Ні;
}
.menu-pettor: hover {
фон: # 47959F;
Колір: # B2F0F8;
}
.Menu-purpt: Nth-Child (3), .Menu-purpt: nth-
Дитина (4), .Menu-purpt: Nth-Child (5) ,.Menu-
Пункт: Nth-Child (6) {
Тривалість переходу: 400 мс;
} 

19. Додайте гамбургер

Значок бургер підвищений над іншими елементами, змінюючи його z-індекс . Меню зростає, коли користувач надходить над цим, і натискання меню тепер отримає бургер, щоб анімувати з трьох ліній бургер до "X", вказуючи параметр, щоб видалити меню.

 .Menu-Open-кнопка {
Z-індекс: 2;
Перехід-синхронізація: кубічний-
Безір (0,175, 0,885, 0,32, 1,275);
Тривалість переходу: 400 мс;
Трансформування: шкала (1.1, 1.1) Перекладач3d
(0, 0, 0);
курсор: покажчик;
}
.menu-open-кнопка: hover {
Трансформація: шкала (1,2, 1,2) перекладу3д
(0, 0, 0);
}

20. Перемістіть елементи

Перший пункт меню насправді є третьою дитиною меню, оскільки до нього є прапорець, а також гамбургер. Додавання цього Вмикає перший елемент меню, щоб перейти до положення, коли меню натискається користувачем. Кожен елемент меню вийде з трохи довше.

.Menu-Opn: Checked + .Menu-Open-кнопка {
Функція переходу: лінійна;
Тривалість переходу: 400 мс;
Трансформація: шкала (0,8, 0,8) translate3D
(0, 0, 0);
}
.Menu-open: перевірено ~ .menu-purpe {
Перехід-синхронізація: кубічний-
Безір (0,165, 0,84, 0,44, 1);
}
.Menu-open: перевірено ~ .menu-purpt: Nth-Child (3) {
Тривалість переходу: 390 мс;
Трансформація: перекладач3d (110px, 0, 0);
} 

21. Зверніться до руху, що залишився

Елементи, що залишилися меню, вийшли з різними швидкостями. Це дає змогу елементам дотримуватися на ранніх стадіях анімації, яка дасть блокування рідкого вигляду, використовуючи фільтр SVG. Збережіть документи та перегляньте готові результати у вашому браузері.

 .Menu-Opn: перевірено ~ .Menu-purpt: Nth-Child (4) {
Тривалість переходу: 490 мс;
Трансформація: перекладач3d (220px, 0, 0);
}
.menu-open: перевірено ~ .Menu-purpt: Nth-Child (5) {
Тривалість переходу: 590 мс;
Трансформація: перекладач3d (330px, 0, 0);
}
.Menu-open: перевірено ~ .Menu-purpt: Nth-Child (6) {
Тривалість переходу: 690 мс;
Трансформація: перекладач3d (440px, 0, 0);
} 

Ця стаття була опублікована в журналі Creative Web-дизайну Веб-дизайнер . Купити проблему 283 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

• Анімація SVG з JavaScript
• Повне керівництво до SVG
• Навантажувач SVG анімації з GSAP