Сайтостроение [Glo Academy] Артём Исламов - SVG-графика для сайта (2019)

[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 и как их использовать на практике.

Поддержка браузерами

Фильтр цветовой матрицы. Меняем цвет карточки товара.

Фильтр размытия. Создаем элемент с частичным размытием

Смешивание фильтров. Создание элемента интерфейса - меню.
Продажник

Продажник

Скачать: