svg (11)

Front-end воїн - Scroll Progress

Сьогодні ми розглянемо кілька методів демонстрації прогресу прокрутки веб- сторінки. Ця техніка використовується на багатьох сайтах, і не дарма; вона забезпечує контекстуальне розуміння кількості інформації даної сторінки. Коли користувач виконує про...

Codeguida · 13 грудня 2021 · 26

Тренди веб-розробки в 2017 році

Інтернет - це майбутнє! Саме так казали люди десятки років тому, і вони не помилилися - тепер інтернет це невід'ємна частина життя багатьох людей. Ваш сусід, колега, випадковий перехожий в метро - всі відвідують дюжину веб-сайтів за день. В кожного з...

Codeguida · 20 листопада 2021 · 2

Виріз в елементах: CSS чи SVG?

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

Codeguida · 08 вересня 2021 · 17

Введення в SVG анімацію за допомогою SMIL

На Sitepoint нещодавно був розміщений виклик - відтворити цю забавну GIF анімацію за допомогою HTML і CSS: Це виглядає дуже просто, але це важко зробити без великої кількості ключових кадрів. Я схилявся до SVG, але вже давно хотів дати можливість SM...

Codeguida · 05 квітня 2021 · 24

Використання SVG для стиснення ваших PNG зображень

Чи не було б чудово отримати стиснений JPEG і зберегти прозорість у PNG? І це реально. Ось невеликий трюк, який я відкрив, коли працював на новому сайті Sapporo Beer. Зверніть, що пиво на сайті Sapporo має прозору зону(це важко помітити). У форматі...

Codeguida · 13 січня 2021 · 1

Зміна SVG іконок

Метод №1: сховати/показати SVG елемент Включаємо обидві іконки: <a class="expand-link" href="#0"> <svg class="icon icon-expand" viewBox="0 0 32 32"><use xlink:href="#icon-expand"></use></svg> <svg class="icon icon-contract" viewBox="0...

Codeguida · 15 липня 2020 · 36

Динамічні SVG з React.js

Scalable Vector Graphics (SVG) - це відмінний спосіб включити векторну графіку у свою веб-сторінку. Вона легка, заснована на XML і підтримується майже всіма сучасними браузерами. XML лежить в основі SVG, тож вона не містить нічого крім розмітки, і м...

Codeguida · 14 червня 2020 · 20

Динамічні географічні карти з SVG і JQuery

Створюємо SVG мапу в Illustrator Створимо мапу Італії в Illustrator: Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовуваному в базі даних, щоб ідентифікувати відповідні...

Codeguida · 14 травня 2020 · 5

Невелика колекція ефектів для діалогових вікон з використанням CSS-анімації

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

Codeguida · 29 березня 2020 · 4

Наука про SVG анімації

Плоский дизайн все більше стає трендом 2016 року, відповідно SVG тепер використовується достатньо часто. Переваг багато: незалежність від роздільної здатності, крос-браузерність і доступні DOM ноди. У цій статті ми розглянемо, як ми можемо використов...

Codeguida · 15 січня 2020 · 3

Використання SVG clip-path для зміни кольору логотипу

Минулого тижня я закінчив сайт для запуску нового бізнесу. Дизайн був досить простим: одна сторінка з різними розділами, представленими горизонтальними блоками в повну ширину з різним кольором фону і з логотипом фіксованим у верхньому лівому куті. Єд...

Codeguida · 11 жовтня 2017 · 10