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

Тема в разделе "Администрирование и программирование", создана пользователем Rabbit, 2 сен 2019.

  1. Rabbit

    By:Rabbit2 сен 2019
    Moderator
    Модератор

    Регистрация:
    17 фев 2019
    Сообщения:
    6.024
    Симпатии:
    1.763
    [Glo Academy] Артём Исламов - SVG-графика для сайта (2019)
    2
    Чему научитесь?

    Если в двух слова, то на этом курсе научитесь создавать и использовать интерактивные элементы интерфейса для сайта.
    Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры.

    Программа курса:

    Подготовительный урок
    Знакомство с курсом. Настройка рабочего пространства.
    1. Установка редактора кода
    2. Установка векторного редактора
    Урок №1. Вставка SVG на страницу. Размеры SVG
    Способы встраивания SVG графики в html структуру. Манипулирование с размерами изображения.

    В этом уроке вы узнаете: как создавать svg-изображение, как размещать на странице
    1. Создаем и сохраняем svg для веба.
    2. Способы вставки SVG-изображения
      1. Через тег <img>
      2. Как background-image
      3. Через тег <svg>
      4. Через тег <object>
    3. Работа с SVG-документов
      1. width, height
      2. viewBox
      3. preserveAspectRatio
    Урок №2. Базовые фигуры SVG. Атрибуты и свойства
    Создание базовый фигур. Работа с атрибутами и свойствами.


    В этом уроке: вы познакомитесь с XML, научитесь редактировать svg прямо в html коде и познакомитесь с базовым синтаксисом.
    1. Настраиваем рабочее пространство
    2. Переходим к практике:
    3. <rect> + подключение внешнего файла стилей
    4. <circle>
    5. <ellipse>
    6. <line>
    7. <polyline>
    8. path
    Урок №3. Анимирование векторного изображения
    Способы анимирования svg изображения, знакомство с библиотекой snap.js

    В этом уроке вы узнаете: как анимировать векторное изображение с помощью css, js, SMIL.
    1. CSS анимирование
    2. SMIL
    3. JS (Snap.js)
    Урок №4. SVG Preloader. Знакомство с библиотекой SVG.JS
    Создаем свой собственный прелоадер с нуля.

    В этом уроке вы узнаете: как сделать кастомный прелоадер для сайта.
    1. Создаем SVG-изображение
    2. Вставляем на страницу.
    3. Подключаем библиотеку SVG.js
    4. Анимируем, используя библиотеку SVG.js
    Урок №5. SVG Фильтры
    Фильтры svg и зачем их использовать.

    В этом уроке вы узнаете: как пользоваться фильтрами svg и как их использовать на практике.
    1. Поддержка браузерами
    2. Фильтр цветовой матрицы. Меняем цвет карточки товара.
    3. Фильтр размытия. Создаем элемент с частичным размытием
    4. Смешивание фильтров. Создание элемента интерфейса - меню.
    Продажник

    Скачать
     
Похожие темы
  1. Rabbit
    Ответов:
    0
    Просмотров:
    345
  2. Rabbit
    Ответов:
    0
    Просмотров:
    245
  3. Rabbit
    Ответов:
    0
    Просмотров:
    263
  4. Rabbit
    Ответов:
    0
    Просмотров:
    219
  5. Rabbit
    Ответов:
    0
    Просмотров:
    490
  6. Rabbit
    Ответов:
    0
    Просмотров:
    490
  7. Rabbit
    Ответов:
    0
    Просмотров:
    322
Загрузка...