в пикселях (px) или условных единицах (em или rem) в зависимости от установленного размера шрифта;
• цвет заливки блока:
– однотонная сплошная и плоская заливка:
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).
Равнозначные инструкции для стилей CSS
Для полного овладения всеми возможностями визуального оформления элементов навигации и блоков содержания веб-страницы HTML, включая анимацию для элементов SVG, рекомендуется изучить спецификацию CSS3 (в официальном источнике) и пробовать лично запускать и редактировать примеры анимации SVG и CSS.
Это позволит наработать навык создания анимированных динамических блоков с векторной графикой для использования в веб- и мобильных интерфейсах приложений.
Технологический стек для анимации № 2. HTML + SVG + JavaScript
В случае выбора технологии JavaScript в качестве способа визуализации анимации открывается ряд дополнительных возможностей:
• подключение внешних библиотек отрисовки векторной графики;
• подключение самописных скриптов обработки событий (по клику/нажатию, при наведении, при выборе определенной опции меню с вызовом функции по уникальному идентификатору ID и т. д.).
Рисунок 2.9 – Пример с выбором раздела сайта в мобильном меню навигации на корпоративном сайте.
Источник: http://markup.inmotus-design.ru/rk/index.php
Особенности этого функционального решения:
• необходим запуск скриптов JavaScript (по умолчанию эта опция подключена в браузерах);
• требуется знание языка JavaScript (это полезный инструментарий для визуализации графики и взаимодействия веб-интерфейса с пользователями, что гарантирует исполнителю широкий охват выполняемых задач).
В этом стеке реализована умная логика поведения интерфейса (по заданным условиям и обработке в JavaScript), система соответственно реагирует на действия пользователя. В CSS это невозможно – кроме примитивных условий при наведении, при нажатии, при фокусе, в состоянии покоя – без сложной обработки логических условий с заданными уровнями результатов взаимодействия.
Например, если пользователь превышает лимит по использованию (обращений), система выводит сообщение в веб-интерфейсе: исчерпан лимит на запросы к сервису компании. Это условие о лимитах задается в JS-скрипте веб-приложения разработчиками продукта.
Технологический стек для анимации № 3. HTML + SVG + SMIL
Язык анимации SMIL – специализированное решение для широкого охвата функций анимационных роликов на основе векторной графики в формате SVG. Применяется