Автор: Glo Academy
Название: Артём Исламов - SVG-графика для сайта (2019)
![Изображение [Glo Academy] Артём Исламов - SVG-графика для сайта (2019)](https://s5.vkurse.info/attachments/sshot-534-jpg.1789/ "Картинка [Glo Academy] Артём Исламов - SVG-графика для сайта (2019)")
Описание:
Чему научитесь?
Если в двух слова, то на этом курсе научитесь создавать и использовать интерактивные элементы интерфейса для сайта.
Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры.
Программа курса:
Подготовительный урок
Знакомство с курсом. Настройка рабочего пространства.
Способы встраивания SVG графики в html структуру. Манипулирование с размерами изображения.
В этом уроке вы узнаете: как создавать svg-изображение, как размещать на странице
Создание базовый фигур. Работа с атрибутами и свойствами.
В этом уроке: вы познакомитесь с XML, научитесь редактировать svg прямо в html коде и познакомитесь с базовым синтаксисом.
Способы анимирования svg изображения, знакомство с библиотекой snap.js
В этом уроке вы узнаете: как анимировать векторное изображение с помощью css, js, SMIL.
Создаем свой собственный прелоадер с нуля.
В этом уроке вы узнаете: как сделать кастомный прелоадер для сайта.
Фильтры svg и зачем их использовать.
В этом уроке вы узнаете: как пользоваться фильтрами svg и как их использовать на практике.
Продажник:
Скачать:
Название: Артём Исламов - SVG-графика для сайта (2019)
Описание:
Чему научитесь?
Если в двух слова, то на этом курсе научитесь создавать и использовать интерактивные элементы интерфейса для сайта.
Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры.
Программа курса:
Подготовительный урок
Знакомство с курсом. Настройка рабочего пространства.
- Установка редактора кода
- Установка векторного редактора
Способы встраивания SVG графики в html структуру. Манипулирование с размерами изображения.
В этом уроке вы узнаете: как создавать svg-изображение, как размещать на странице
- Создаем и сохраняем svg для веба.
- Способы вставки SVG-изображения
- Через тег
- Как background-image
- Через тег
- Через тег
- Через тег
- Работа с SVG-документов
- width, height
- viewBox
- preserveAspectRatio
Создание базовый фигур. Работа с атрибутами и свойствами.
В этом уроке: вы познакомитесь с XML, научитесь редактировать svg прямо в html коде и познакомитесь с базовым синтаксисом.
- Настраиваем рабочее пространство
- Переходим к практике:
+ подключение внешнего файла стилей - path
Способы анимирования svg изображения, знакомство с библиотекой snap.js
В этом уроке вы узнаете: как анимировать векторное изображение с помощью css, js, SMIL.
- CSS анимирование
- SMIL
- JS (Snap.js)
Создаем свой собственный прелоадер с нуля.
В этом уроке вы узнаете: как сделать кастомный прелоадер для сайта.
- Создаем SVG-изображение
- Вставляем на страницу.
- Подключаем библиотеку SVG.js
- Анимируем, используя библиотеку SVG.js
Фильтры svg и зачем их использовать.
В этом уроке вы узнаете: как пользоваться фильтрами svg и как их использовать на практике.
- Поддержка браузерами
- Фильтр цветовой матрицы. Меняем цвет карточки товара.
- Фильтр размытия. Создаем элемент с частичным размытием
- Смешивание фильтров. Создание элемента интерфейса - меню.
Продажник:
Скачать:
