Скачать курс: [Glo Academy] SVG для верстальщика. SVG графика (Артём Исламов)

[admin]

Чему научитесь Если в двух слова, то на этом курсе научитесь создавать и использовать интерактивные элементы интерфейса для сайта. Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры. Программа курса Подготовительный урок Знакомство с курсом. Настройка рабочего пространства. Установка редактора кода Установка векторного редактора Урок №1. Вставка SVG на страницу. Размеры SVG Способы встраивания SVG графики в html структуру. Манипулирование с размерами изображения. В этом уроке вы узнаете: как создавать svg-изображение, как размещать на странице Создаем и сохраняем svg для веба. Способы вставки SVG-изображения Через тег <img> Как background-image Через тег <svg> Через тег <object> Работа с SVG-документов width, height viewBox preserveAspectRatio Урок №2. Базовые фигуры SVG. Атрибуты и свойства Создание базовый фигур. Работа с атрибутами и свойствами. В этом уроке: вы познакомитесь с XML, научитесь редактировать svg прямо в html коде и познакомитесь с базовым синтаксисом. Настраиваем рабочее пространство Переходим к практике: <rect> + подключение внешнего файла стилей <circle> <ellipse> <line> <polyline> path Урок №3. Анимирование векторного изображения Способы анимирования svg изображения, знакомство с библиотекой snap.js В этом уроке вы узнаете: как анимировать векторное изображение с помощью css, js, SMIL. CSS анимирование SMIL JS (Snap.js) Урок №4. SVG Preloader. Знакомство с библиотекой SVG.JS Создаем свой собственный прелоадер с нуля. В этом уроке вы узнаете: как сделать кастомный прелоадер для сайта. Создаем SVG-изображение Вставляем на страницу. Подключаем библиотеку SVG.js Анимируем, используя библиотеку SVG.js Урок №5. SVG Фильтры Фильтры svg и зачем их использовать. В этом уроке вы узнаете: как пользоваться фильтрами svg и как их использовать на практике. Поддержка браузерами Фильтр цветовой матрицы. Меняем цвет карточки товара. Фильтр размытия. Создаем элемент с частичным размытием Смешивание фильтров. Создание элемента интерфейса - меню.