Доступно

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

Тема в разделе "Курсы по программированию", создана пользователем super-sms, 27 авг 2019.

Цена: 990р.
Взнос: 80р.-91%
100%

Основной список: 62 участников

Резервный список: 8 участников

Статус обсуждения:
Комментирование ограничено.
  1. 27 авг 2019
    #1
    super-sms
    super-sms ОргОрганизатор

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

    Чему научитесь?

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

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

    Подготовительный урок
    Знакомство с курсом. Настройка рабочего пространства.
    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. Смешивание фильтров. Создание элемента интерфейса - меню.



    Цена: 2290р.
    Цена со скидкой: 990руб. (Акция 4 дня)

    Продажник >>
     
    Последнее редактирование: 27 авг 2019
    4 пользователям это понравилось.
  2. Последние события

    1. skladchik.com
      Складчина доступна.
      1 сен 2019
    2. x-stream
      x-stream участвует.
      1 сен 2019
    3. optimistka
      optimistka участвует.
      1 сен 2019
    4. allexxa
      allexxa участвует.
      1 сен 2019

    Последние важные события

    1. skladchik.com
      Складчина доступна.
      1 сен 2019
    2. skladchik.com
      Взнос составляет 40р.
      31 авг 2019
    3. skladchik.com
      Складчина активна.
      31 авг 2019
    4. skladchik.com
      Сбор взносов начинается 31.08.2019.
      28 авг 2019
  3. Обсуждение
  4. 28 авг 2019
    #2
    Area51
    Area51 ЧКЧлен клуба
    svg вообще крутая тема, давно хочу изучить, активно применяется для создания игр на HTML5 + JavaScript и в HTML-верстке вместо иконок и иконочных шрифтов

    там еще "веб-разработка 15" должна быть где-то
    организуйте плз
     
  5. 28 авг 2019
    #3
    super-sms
    super-sms ОргОрганизатор
    Да SVG щас очень современная тенденция.
    "веб-разработка 15" - не видел =)
     
Статус обсуждения:
Комментирование ограничено.

Поделиться этой страницей