Векторная графика для начинающих: теория и практика технического дизайна - стр. 9

1. в шестнадцатеричной (НЕХ) палитре:*

>background-color: #CCDD33

2. в палитре RGB:*

>background-color: rgb(255,255,255)

3. с добавлением полупрозрачности путем включения альфа-канала:*

>background-color: rga(255,255,255,0.5)

– многоцветный градиент:

>background: linear-gradient (to bottom,#fff 0%, #555 50%,#999 100%);

Задание стиля фона блока возможно как с помощью background-color, так и с помощью background, что дает одинаковый визуальный эффект:

>background: #fff,

>background-color: rgb(255,255,255),

>background-color: rgb(255,255,255).

Для полного овладения всеми возможностями визуального оформления элементов навигации и блоков содержания веб-страницы HTML, включая анимацию для элементов SVG, рекомендуется изучить спецификацию CSS3 (в официальном источнике) и пробовать лично запускать и редактировать примеры анимации SVG и CSS.

Это позволит наработать навык создания анимированных динамических блоков с векторной графикой для использования в веб- и мобильных интерфейсах приложений.

В случае выбора технологии JavaScript в качестве способа визуализации анимации открывается ряд дополнительных возможностей:

• подключение внешних библиотек отрисовки векторной графики;

• подключение самописных скриптов обработки событий (по клику/нажатию, при наведении, при выборе определенной опции меню с вызовом функции по уникальному идентификатору ID и т. д.).

Рисунок 2.9 – Пример с выбором раздела сайта в мобильном меню навигации на корпоративном сайте.

Источник: http://markup.inmotus-design.ru/rk/index.php

Особенности этого функционального решения:

• необходим запуск скриптов JavaScript (по умолчанию эта опция подключена в браузерах);

• требуется знание языка JavaScript (это полезный инструментарий для визуализации графики и взаимодействия веб-интерфейса с пользователями, что гарантирует исполнителю широкий охват выполняемых задач).

В этом стеке реализована умная логика поведения интерфейса (по заданным условиям и обработке в JavaScript), система соответственно реагирует на действия пользователя. В CSS это невозможно – кроме примитивных условий при наведении, при нажатии, при фокусе, в состоянии покоя – без сложной обработки логических условий с заданными уровнями результатов взаимодействия.

Например, если пользователь превышает лимит по использованию (обращений), система выводит сообщение в веб-интерфейсе: исчерпан лимит на запросы к сервису компании. Это условие о лимитах задается в JS-скрипте веб-приложения разработчиками продукта.

Язык анимации SMIL – специализированное решение для широкого охвата функций анимационных роликов на основе векторной графики в формате SVG. Применяется для мультипликации и веб-анимации (опционально). Это решение – аналог Flash-анимации (в формате SWF), ушедшей с приходом мобильных технологий, не поддерживающих Flash-анимацию по ряду причин, включая безопасность пользователя (от вызова неблагонадежных скриптов-вирусов и т. д.).

Рисунок 2.10 – Пример SMIL-анимации движения объекта карусели

Выбор технологического решения (стека) для анимации веб-интерфейса по умолчанию за исполнителем, если в ТЗ не прописаны четкие требования по выбору библиотек JS-скриптов и сопутствующих технологий.