svg
(11)
Front-end воїн - Scroll Progress
Сьогодні ми розглянемо кілька методів демонстрації прогресу прокрутки веб-
сторінки. Ця техніка використовується на багатьох сайтах, і не дарма; вона
забезпечує контекстуальне розуміння кількості інфо...
13 грудня 2021
·
0
· 48
·
Codeguida
Тренди веб-розробки в 2017 році
Інтернет - це майбутнє! Саме так казали люди десятки років тому, і вони не помилилися - тепер інтернет це невід'ємна частина життя багатьох людей. Ваш сусід, колега, випадковий перехожий в метро - всі...
20 листопада 2021
·
0
· 3
·
Codeguida
Виріз в елементах: CSS чи SVG?
Фронтенд-розробники подекуди використовують на сайтах елементи з вирізами, ви мусили натрапляти на них хоча б раз. Для створення такої фігури за допомогою CSS або SVG існує кілька способів. Кожен з ни...
08 вересня 2021
·
1
· 87
·
Codeguida
Введення в SVG анімацію за допомогою SMIL
На Sitepoint
нещодавно був розміщений виклик - відтворити цю забавну GIF анімацію за
допомогою HTML і CSS:
Це виглядає дуже просто, але це важко зробити без великої кількості ключових
кадрів. Я схиля...
05 квітня 2021
·
0
· 91
·
Codeguida
Використання SVG для стиснення ваших PNG зображень
Чи не було б чудово отримати стиснений JPEG і зберегти прозорість у PNG? І це
реально. Ось невеликий трюк, який я відкрив, коли працював на новому сайті
Sapporo Beer.
Зверніть, що пиво на сайті Sapp...
13 січня 2021
·
0
· 5
·
Codeguida
Зміна 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...
15 липня 2020
·
0
· 68
·
Codeguida
Динамічні SVG з React.js
Scalable Vector Graphics (SVG) - це відмінний спосіб включити векторну графіку
у свою веб-сторінку. Вона легка, заснована на XML і підтримується майже всіма
сучасними браузерами. XML лежить в основі...
14 червня 2020
·
0
· 70
·
Codeguida
Динамічні географічні карти з SVG і JQuery
Створюємо SVG мапу в Illustrator
Створимо мапу Італії в Illustrator:
Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовува...
14 травня 2020
·
1
· 47
·
Codeguida
Невелика колекція ефектів для діалогових вікон з використанням CSS-анімації
Стилі і тренди змінюються і це вимагає від нас ініціалізації різних ефектів,
які підходять для сучасного інтерфейсу. Цей набір містить деякі основні
анімації, а також більш незвичні, з використанням т...
29 березня 2020
·
0
· 9
·
Codeguida
Наука про SVG анімації
Плоский дизайн все більше стає трендом 2016 року, відповідно SVG тепер використовується достатньо часто. Переваг багато: незалежність від роздільної здатності, крос-браузерність і доступні DOM ноди. У...
15 січня 2020
·
0
· 54
·
Codeguida
Використання SVG clip-path для зміни кольору логотипу
Минулого тижня я закінчив сайт для запуску нового бізнесу. Дизайн був досить простим: одна сторінка з різними розділами, представленими горизонтальними блоками в повну ширину з різним кольором фону і...
11 жовтня 2017
·
0
· 36
·
Codeguida
