👨‍💻DEV [Glo Academy] Артём Исламов - SVG-графика для сайта (2019)

[Odyvanchik]

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

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

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

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

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



—————————————————————————

🔗 Продажник:

📥 СКАЧАТЬ КУРС:

Для просмотра содержимого вам необходимо Войти или Зарегистрироваться.

🔐 Хотите получить доступ?

Чтобы увидеть скрытые ссылки и ставить лайки, активируйте VIP-статус.

💎 ПОЛУЧИТЬ ДОСТУП Наш Telegram канал