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