- Регистрация
- 30 Дек 2017
- Сообщения
- 149,237
- Симпатии
- 4,181
[Glo Academy] Артём Исламов - SVG-графика для сайта (2019)
Чему научитесь?
Если в двух слова, то на этом курсе научитесь создавать и использовать интерактивные элементы интерфейса для сайта.
Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры.
Программа курса:
Подготовительный урок
Знакомство с курсом. Настройка рабочего пространства.
[*]Установка редактора кода
[*]Установка векторного редактора
Урок №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 и как их использовать на практике.
[*]Поддержка браузерами
[*]Фильтр цветовой матрицы. Меняем цвет карточки товара.
[*]Фильтр размытия. Создаем элемент с частичным размытием
[*]Смешивание фильтров. Создание элемента интерфейса - меню.
Скачать:
Чему научитесь?
Если в двух слова, то на этом курсе научитесь создавать и использовать интерактивные элементы интерфейса для сайта.
Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры.
Программа курса:
Подготовительный урок
Знакомство с курсом. Настройка рабочего пространства.
[*]Установка редактора кода
[*]Установка векторного редактора
Урок №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 и как их использовать на практике.
[*]Поддержка браузерами
[*]Фильтр цветовой матрицы. Меняем цвет карточки товара.
[*]Фильтр размытия. Создаем элемент с частичным размытием
[*]Смешивание фильтров. Создание элемента интерфейса - меню.
Скачать:
Для просмотра содержимого вам необходимо авторизоваться или зарегистрироваться.
Если у Вас нет Премиум статуса:
Преимущества VIP-подписки