svg (11)

Front-end воїн - Scroll Progress

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

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

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

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

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

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

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

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

Чи не було б чудово отримати стиснений JPEG і зберегти прозорість у PNG? І це реально. Ось невеликий трюк, який я відкрив, коли працював на новому сайті Sapporo Beer. Зверніть, що пиво на сайті Sapp...
13 січня 2021 ·
0
· 4 · 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
· 53 · Codeguida

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

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

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

Створюємо SVG мапу в Illustrator Створимо мапу Італії в Illustrator: Кожний регіон повинен малюватися як окремий об'єкт і мати свій власний рівень, з ім'ям, котре буде відповідати коду, використовува...
14 травня 2020 ·
1
· 28 · Codeguida

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

Стилі і тренди змінюються і це вимагає від нас ініціалізації різних ефектів, які підходять для сучасного інтерфейсу. Цей набір містить деякі основні анімації, а також більш незвичні, з використанням т...
29 березня 2020 ·
0
· 8 · Codeguida

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

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

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

Минулого тижня я закінчив сайт для запуску нового бізнесу. Дизайн був досить простим: одна сторінка з різними розділами, представленими горизонтальними блоками в повну ширину з різним кольором фону і...
11 жовтня 2017 ·
0
· 27 · Codeguida