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

1. Loading в формате SVG с индикацией загрузки и вращением графического элемента.
2. Loading в форме цветка (SVG) с индикацией и вращением.
3. Иллюстрирование алфавита.
4. Иллюстрирование надписи с эффектом проявления (Fade In).
5. Фиксированная панель выбора горячих функций веб-ресурса.
6. Фиксированная панель горячих функций с вызовом по событию (по запросу пользователя).

Все технические решения (в примерах) направлены на формирование у студентов практических навыков, необходимых для работы над коммерческими проектами по веб-разработке цифровых продуктов: веб-сайтов и электронных документов.
Преимущественно для адаптивных сайтов применяется масштабируемая векторная графика без потерь качества (в любом масштабе) в формате SVG. Для придания яркости объектам визуализации применяются стили CSS3 плюс динамические обработки событий (действий пользователя), реализуемые с помощью JavaScript.
Самостоятельное пошаговое выполнение задач по примерам даст начало освоению связки технологий (иначе в проф. источниках – технологический стек): HTML5 + CSS3 + SVG + JavaScript.
Программные инструменты для задач технического дизайна
Для решений типовых задач технического дизайна студентам потребуется активно использовать инструментарий, приведенный в следующих таблицах.

Программный инструментарий для технического дизайна
Горячие клавиши для работы с графикой в редакторе Corel Draw
Любая качественная работа характеризуется оперативностью исполнения стандартных процедур. Так и в техническом дизайне – при использовании графического редактора есть некоторые трюки для упрощения и повышения оперативности исполнения поставленных задач.

Функции для работы с файлами в редакторе Corel Draw

Функции для редактирования слоев объектов в Corel Draw

Эти базовые знания для быстрой работы с функционалом графического редактора Corel Draw позволят повысить оперативность выполнения задач технического дизайна с векторной графикой.
Элементарная визуализация векторных элементов веб-интерфейса
Загрузка любого сложного функционала веб-сервиса требует задержки (delay) на этапе скачивания необходимых компонентов:
• скрипты JavaScript – *.js;
• спрайты элементов интерфейса – *.svg и *.png;
• стили оформления – *.css;
• шаблоны – *.tpl или *.php и т. д.

То есть пользователь имеет по умолчанию пустой экран несколько (N) секунд до скачивания и начала воспроизведения функционала веб-интерфейса сервиса, к которому он обратился.
Для визуального прогресса загрузки используют элемент loading, моделирующий интенсивность процесса скачивания компонентов функционала для воспроизведения на пользовательском (иначе клиентском) устройстве: ПК, ноутбуке, планшете или смартфоне.
Пример № 1. Loading в формате SVG с индикацией загрузки и вращением графического элемента
Рисунок 10.1 – Элемент Preloader в момент загрузки контента веб-страницы

Код HTML
Heading Style one
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Read More
Heading Style Two
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Read More
Heading Style one
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Read More
Heading Style Two
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Read More
Heading Style one
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style Two
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style one
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style Two
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style one
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style Two
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style one
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style Two
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style one
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.
Heading Style Two
Lorem ipsum dolor sit amet, Education adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Experience erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea com modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit consequat.

Для воспроизведения работы элемента загрузки необходимо подключить стили style.css и скрипты plugin.js, script.js.

Код стилей CSS. Файл style.css
/* Следующий стиль задает положение и оформление экрана загрузки */
.progress-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  cursor:none;
}
/* Следующий стиль задает положение прелоадера по середине, по центру и его оформление */
.progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial,Verdana, sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #fff;
  cursor:none;
}
/* Следующий стиль снимает оформление, заданное в bootstrap.min.css */
.progress-bar {
  background-color:transparent;
  box-shadow:none;
}
/* Следующий стиль задает фиксированное положение экрана загрузки с темно-синим фоном */
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  overflow:hidden;
  background: rgb(59,85,107);
  cursor:none;
}
/* Следующий стиль задает сглаживание шрифтов */
html * {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Следующий стиль задает отступы и оформление шрифта */
html,body {
  margin: auto 0;
  padding: 0;
  text-align: center;
  font-family: "Work Sans",’Arial’, sans-serif;
}
/* Следующий стиль задает поведение при выступах контента за экран по OX и OY */
body {
  overflow-x:hidden;
  overflow-y:scroll;
}
/* Стиль позиционирования и оформления прелоадера */
.main-preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  background-color: #000;
  text-align: center;
  overflow:hidden;
}
/* Стиль позиционирования и ширины элемента прелоадера */
.main-preloader .main-preloader-inner {
  position: absolute;
  top: 50%;
  width: 100%;
}
/* Стиль отступов и цвета численного элемента прелоадера */
.main-preloader .preloader-percentage {
  color: #ffffff;
  margin: 0;
}
/* Стиль оформления численного элемента прелоадера */
.main-preloader .preloader-percentage span {
  display: inline-block;
  float: center;
  font-size: 50px;
}
/* Следующие стили задают оформление контента страницы */
.blog-header {
  margin-bottom: 50px;
  background-size: cover;
  text-align: center;
}
.header-content{
  padding: 100px 0;
}
.header-content img{
  margin-top: 30px;
}
.header-content a{
  margin: 0 10px;
  padding: 20px 30px;
  background: #fff;
  border-radius: 2px;
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  color: #000;
  text-decoration: none;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
}
.header-content a:hover {
  color: #5C55FD;
  box-shadow: 0 10px 65px 0 rgba(248, 247, 255, 0.32);
  -moz-box-shadow: 0 10px 65px 0 rgba(248, 247, 255, 0.32);
  -webkit-box-shadow: 0 10px 65px 0 rgba(248, 247, 255, 0.32);
  -o-box-shadow: 0 10px 65px 0 rgba(248, 247, 255, 0.32);
}
.content {
  margin: 30px auto 30px uto;
}
.content p {
  padding: 10px 20px;
  line-height: 1.55em;
  text-align: left;
}
.preview{
  display: inline-block;
  margin-bottom: 20px;
  padding: 20px;
}
.preview img {
  box-shadow: 0px 5px 20px 0px rgba(51,73,94,0.05);
  transition: all 400ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
}
.preview a:hover img {
  box-shadow: 0px 20px 65px 0px rgba(51,73,94,0.15);
}
img {
  vertical-align: top;
}
h1 {
  margin: 30px auto 60px auto;
  text-align: center;
  font-family: "Work Sans", sans-serif;
  font-size: 36px;
  font-weight: 500;
  color: #fff;
}
.col-md-6 h2 {
  margin: 0;
  padding: 20px 20px 0 20px;
  font-size: 1.5em;
  text-align: left;
}
.rating{
  margin-top: 60px;
}
.rating img{
  padding: 30px;
}
.copyright{
  padding: 20px 0;
}
@media only screen and (max-width:992px) {
  .preview {
    display: block;
    padding: 10px;
  }
  .preview img{
    max-width:100%;
    height:auto;
  }
  .header-content a{
    display: block;
    margin-bottom: 20px;
  }
}
Код динамического скрипта JavaScript. Файл script.js
$(document).ready(function () {
 var preloader = $('#preloader'), // Селектор прелоадера
  imagesCount = $('img').length, // Количество изображений
  dBody = $('body'), // Обращаемся к body
  percent = 100 / imagesCount, // Количество % на одну картинку
  progress = 0, // Точка отсчета
  imgSum = 5, // Количество картинок
  loadedImg = 0; // Счетчик загрузки картинок

 if (imagesCount >= imgSum && imagesCount > 0) {
  preloader.css('background', 'rgb(44,62,80)');
  dBody.css('overflow', 'hidden');

 $(".progress-bar").circularProgress({
  width: "180px", // Размеры и визуальное оформление блока загрузки
  height: "180px",
  color: "#16a085",
  line_width: 10,
  percent: 0, // Отсчет загрузки от нуля процентов
  starting_position: 25
 }).circularProgress('animate', 100, 10000);// Параметры влияют на скорость загрузки.

 for (var i = 0; i < imagesCount; i++) { // Создаем клоны изображений
  var img_copy = new Image();
  img_copy.src = document.images[i].src;
  img_copy.onload = img_load;
  img_copy.onerror = img_load;
 }
 function img_load () {
  progress += percent;
  loadedImg++;
  if (progress >= 100 || loadedImg == imagesCount) {
   preloader.delay(400).fadeOut('slow');
   dBody.css('overflow', '');
  }
  $(".progress-bar").circularProgress('animate', 100, 10000);
 }
 }
 else {
  preloader.remove();
 }
});
Код динамического скрипта JavaScript. Файл plugin.js
(function ( $ ) {
 var global_settings = {};
  var methods = {
   init : function(options) {
    /* Это самый простой способ получить параметры по умолчанию. */
    var settings = $.extend({
     /* Стили прелоадера по умолчанию. */
     width: "200px",
     height: "200px",
     color: "#000000",
     line_width: 8,
     starting_position: 25,
     percent: 100,
     counter_clockwise: false,
     percentage: true,
     text: ''
    }, options );
    global_settings = settings;

    /* Создать процентный элемент */
    var percentage = $("
");

    if(!global_settings.percentage) {
      percentage.text(global_settings.percentage);
    }
    $(this).append(percentage);
    /* Создание текста */
    var text = $("
");

    /* Пользовательский текст */
    if(global_settings.text != "percent") {
      text.text(global_settings.text);
    }
    $(this).append(text);

    /* Исправить все недопустимые значения */
    if(global_settings.starting_position != 100) {
      global_settings.starting_position = global_settings.starting_position % 100;
    }
    if(global_settings.ending_position != 100) {
      global_settings.ending_position = global_settings.ending_position % 100;
    }
      /* Нет 'px' или '%', добавить 'px' */
      appendUnit(global_settings.width);
      appendUnit(global_settings.height);

      /* Применить глобальные настройки */
      $(this).css({
"height": global_settings.height,
"width": global_settings.width
      });
      $(this).addClass("circular-progress-bar");

      /* Удалить старый канвас */
      $(this).find("canvas").remove();

      /* Поместить канвас внутри данного */
      $(this).append(createCanvas($(this)));

      /* Позволяет выполнить возврат переменной this */
        return this;
      },
      percent : function(value) {
      /* Изменения процента в счетчике прелоадера */
      global_settings.percent = value;
      /* Установка глобальных настроек */
      $(this).css({
"height": global_settings.height,
"width": global_settings.width
      });
      /* Удалить старый канвас */
      $(this).children("canvas").remove();
      /* Установить канвас внутри переменной this */
      $(this).append(createCanvas($(this)));

      /* Позволяет выполнить возврат переменной this
        return this;
      },
      animate : function(value, time) {
      /* Установка глобальных настроек */
      $(this).css({
"height": global_settings.height,
"width": global_settings.width
      });

      /* Количество интервалов, интервал 10 мс */
      var num_of_steps = time / 10;
      /* Сумма изменения на каждом шаге */
      var percent_change = (value – global_settings.percent) / num_of_steps;

      /* Если есть конфликт переменных, переименуйте это */
      var scope = $(this);
      var theInterval = setInterval(function() {
        if(global_settings.percent < value) {
        /* Удалить старый канвас */
          scope.children("canvas").remove();
        /* Процент приращения */
          global_settings.percent += percent_change;
        /* Установить канвас внутри переменной this */
          scope.append(createCanvas(scope));
        } else {
          clearInterval(theInterval);
        }
      }, 10);

      /* Позволяет выполнить возврат переменной this */
        return this;
      }
    };
    $.fn.circularProgress = function(methodOrOptions) {
      if (methods[methodOrOptions]) {
      /* Метод найден */
      return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
      /* По умолчанию "init", объект передан или ничего не передано */
      return methods.init.apply( this, arguments );
    } else {
      $.error('Method ' + methodOrOptions + ' does not exist.');
    }
  };

    /* ==== Частные функции ==== */

    /* Возврат строки без 'px' или '%' */
    function removeUnit(apples) {
        if(apples.indexOf("px")) {
            return apples.substring(0, apples.length – 2);
        } else if(canvas_height.indexOf("%")) {
            return apples.substring(0, apples.length – 1);
        }
    };
    /* Возврат строки с 'px' */
    function appendUnit(apples) {
        if(apples.toString().indexOf("px") < -1 && apples.toString().indexOf("%") < -1) {
            return apples += "px";
        }
    };
    /* Расчет начальной позиции в канвас */
    function calcPos(apples, percent) {
        if(percent < 0) {
            // Calculate starting position
            var starting_degree = (parseInt(apples) / 100) * 360;
            var starting_radian = starting_degree * (Math.PI / 180);
            return starting_radian – (Math.PI / 2);
        } else {
            // Calculate ending position
            var ending_degree = ((parseInt(apples) + parseInt(percent)) / 100) * 360;
            var ending_radian = ending_degree * (Math.PI / 180);
            return ending_radian – (Math.PI / 2);
        }
    };
    /* Поместить процентный или пользовательский текст в круг выполнения */
    function insertText(scope) {
    global_settings.percent = (global_settings.percent > 100) ? 100 : global_settings.percent;
        $(".progress-percentage").text(Math.round(global_settings.percent) + "%");
    }
    /* Создать канвас */
    function createCanvas(scope) {
        /* Remove 'px' or '%' */
        var canvas_height = removeUnit(global_settings.height.toString());
        var canvas_width = removeUnit(global_settings.width.toString());

        /* Создать канвас */
        var canvas = document.createElement("canvas");
        canvas.height = canvas_height;
        canvas.width = canvas_width;

        /* Создайте рисованный канвас и примените свойства */
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = global_settings.color;
        ctx.lineWidth = global_settings.line_width;

        /* Расчет arc */
        ctx.beginPath();

        /* Расчет начальной и конечной позиций */
        var starting_radian = calcPos(global_settings.starting_position, -1);
        var ending_radian = calcPos(global_settings.starting_position,
        global_settings.percent);
        /* Расчет радиуса и координат x,y */
        var radius = 0;
        var xcoord = canvas_width / 2;
        var ycoord = canvas_height / 2;
        /* Высота или ширина деления */
        if(canvas_height >= canvas_width) {
            radius = canvas_width * 0.9 / 2 – (global_settings.line_width * 2);
        } else {
            radius = canvas_height * 0.9 / 2 – (global_settings.line_width * 2);
        }
        /*
            x coordinate
            y coordinate
            radius of circle
            starting angle in radians
            ending angle in radians
            clockwise (false, default) or counter-clockwise (true)
        */
        ctx.arc(xcoord, ycoord, radius, starting_radian, ending_radian,
        global_settings.counter_clockwise);
        ctx.stroke();
        /* Add text */
        if(global_settings.percentage) {
            insertText(scope);
        }
        return canvas;
    };

}( jQuery ));
Уточнения к примеру № 1
• Для фона используем однотонную заливку в процессе загрузки.
• Для цветопередачи визуального ряда используем безопасный темный тон синего цвета из палитры Flat UI Colors.
• На скорость загрузки влияют следующие переменные: количество блоков в содержании страницы после прелоадера и параметры в script.js (выделены комментарием).
• Скрипт-плагин plugin.js выполняет моделирование блока загрузки и процентного счетчика для вывода в прелоадере.
• Скрипт script.js выполняет настройку вывода прелоадера для данного случая с заданными характеристиками и оформлением блока вывода на экране.
Пример № 2. Loading в форме цветка (SVG) с индикацией и вращением
Первый пример является достаточно простым визуально. Добавим к нему динамический эффект поворота фонового изображения цветка путем подключения и модификации классов оформления CSS и добавления графики SVG. Получим в результате следующую визуализацию динамического эффекта в прелоадере.

Рисунок 10.2 – Результат визуализации прелоадера с фоновым цветком и динамическим эффектом поворота в ходе загрузки контента веб-страницы

Как добиться такого динамического эффекта в прелоадере
1. Подготовить цветок в формате SVG или PNG с точным позиционированием круга в центре посередине макета размерами [512 × 512] px, с прозрачным фоном.
2. Добавить в код HTML тег  в код описания блока загрузки.
3. Модифицировать код файла каскадных таблиц стилей CSS: style.css.
4. В скрипте script.js изменить настройки вывода прелоадера.
Как получить подобный цветок, как в примере на рис. 10.2
Для создания цветка используем векторный графический редактор Corel Draw.

Рисунок 10.3 – Позиционирование цветка строго по центру посередине для качественной визуализации поворота относительно центральной оси

Рисунок 10.4 – Результат позиционирования цветка с выведенными направляющими OX и OY строго посередине, по центру

Создадим в Corel Draw новый файл размерами [512 × 512] px.
Для создания нового файла воспользуемся горячими клавишами Ctrl + N.
Размеры укажем точно: ширина = 512 px, высота = 512 px.

Рисунок 10.5 – Верхняя панель графического редактора Corel Draw

Рисунок 10.6 – Размеры дизайн-макета в графическом редакторе Corel Draw

Рисунок 10.7 – Позиционирование круга размером [125 × 125] px по центру и посередине

Правильное позиционирование круга размером [125 × 125] px по центру и посередине (см. рис. 10.7) относительно квадрата [512 × 512] px выполняется путем выделения обоих объектов и последовательного использования функций выделения (горячими клавишами).

1. Выделить все объекты на макете Ctrl + A.
2. Позиционировать их строго по центру и посередине: Ctrl + P.
3. С левой линейки (OY) захватом курсора мышки drag&drop переместить вертикальную направляющую на центр круга. Аналогично с верхней линейки (OX) захватом переместить на середину круга.
4. Далее удалите эти вспомогательные фигуры с макета выделением (горячими клавишами) Ctrl + A и кнопкой Del.
5. Далее необходимо подготовить изображение цветка.
Есть два варианта.
5.1. Отрисовать цветок по примеру на рис. 10.8 (если студент обладает достаточными навыками работы с графическим редактором Corel Draw).
5.2. Скачать бесплатное изображение из каталога цифрового маркетплейса IconFinder(.com), визуально сходное с изображением из нашего примера: https://www.iconfinder.com/icons/2682804/blossom_dust_flower_particles_pollen_pollution_weather_icon
6. Выгрузка готового изображения, позиционированного строго посередине по центру (как на рис. 10.8. Вариант A), выполняется в подкаталог «/img» путем использования горячих клавиш Ctrl + E (вызов экспорта в Corel Draw) с названием pink-flower.svg.

Рисунок 10.8 – Вариант A. Отрисовка изображения цветка в графическом редакторе Corel Draw по примеру

Рисунок 10.9 – Вариант B. Скачивание изображения в формате SVG из каталога маркетплейса Iconfinder(.com)

Рисунок 10.10 – Экспорт изображения цветка в директорию /img, дочернюю относительно HTML-документа с данным примером

Рисунок 10.11 – Результат выполнения работы отобразится при запуске веб-страницы примера в браузере

Выполним изменения последовательно для четкости и точности вывода динамического эффекта в прелоадере.
Код изменения прелоадера в веб-странице HTML
До изменений 
После изменения кода
Код изменения стилей CSS
.progress-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 104; /* Изменить глубину вывода прогрессбара в прелоадере */
    cursor:none;
}

.progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index:104; /* Изменить глубину вывода процентов в прелоадере */
    transform: translate(-50%, -50%);
    font-family: Arial,Verdana, sans-serif;
    font-size: 15px; // Уменьшить шрифт текста
    font-weight: normal;
    color: #fff;
    cursor:none;
}

#preloader i {
    position: fixed;
    top: calc(50% – 140px);
    left: calc(50% – 140px);
    z-index: 10; /* Задать глубину вывода слоя с цветком под прелоадером */
    display: block;
    width: 280px;
    height: 280px;
    background-color: transparent;
    background-image: url('../img/pink-flower.svg');
    background-size: 280px 280px;
    background-position: 0 0;
    animation:rotate 10s steps(1000, end) infinite;
}

/* Задать анимацию поворота цвета */
@keyframes rotate {
    100% {
        transform:rotate(720deg);
    }
}
@keyframes RotateFlower {
    0% {
        filter:rotate(0deg);
    }
    50% {
        filter:rotate(180deg);
    }
    100% {
        filter:rotate(720deg);
    }
}
Код изменения скрипта прелоадера (c 14-й строки). Файл script.js
До изменений 
$(".progress-bar").circularProgress({
  color: "#16a085",
  line_width: 10,
  height: "180px",
  width: "180px",
  percent: 0,
  starting_position: 25
}).circularProgress('animate', 100, 10000);
После изменения кода
$(".progress-bar").circularProgress({
  color: "#ffbf00",
  line_width: 8,
  height: "100px",
  width: "100px",
  percent: 0,
  starting_position: 25}).circularProgress('animate', 100, 10000);
Уточнение
Изменение цвета вывода, толщины линий и размеров прелоадера в меньшую сторону (адаптируем его под наш цветок).
Выводы по визуализации прелоадеров
В результате технических манипуляций с кодом файлов HTML, CSS и JS, подготовки изображения цветка (в формате на выбор: SVG или PNG) получим качественную динамическую визуализацию процесса загрузки – приятную для зрителя, с эффектом отвлечения внимания от N секунд скачивания контента веб-страницы.
Имплементировать (реализовать) программный код функционала прелоадера с наследованием или улучшением визуализации относительно несложно при наличии базовых знаний спецификаций HTML и CSS, чтобы добавлять и оформлять необходимые элементы как графический объект (цветок в данном случае).
Иллюстративные блоки для контента веб-сайтаПример № 3. Иллюстрирование алфавита
Для визуализации алфавита возьмем для начала символы Aa (см. рис. 10.12).

Рисунок 10.12 – Состояния инфоблока Аа.
A. По умолчанию. B. При наведении курсора (при нажатии)

Для решения этого примера визуализации нам потребуется реализовать код HTML со стилями CSS для позиционирования, вывода блока и его оформления, включая изображение с прозрачностью яблоко в формате PNG. Пошаговая подготовка маски с символами Аа для первой буквы русского алфавита выполнена в заданной последовательности на рис. 10.13 (далее по тексту) в графическом редакторе Corel Draw (версия старше 12-й, желательно актуальная на дату лекции).
Подготовка векторной маски символов Аа в Corel Draw
Рисунок 10.13 – Буквы набраны текстом размером 12 п., шрифт Arial Bold

Рисунок 10.14 – Буквы переведены в кривые путем последовательного выделения Ctrl + A, перевода в кривые Ctrl + Q

Рисунок 10.15 – Увеличение размеров объекта до 650% по ширине и высоте

Рисунок 10.16 – Результат увеличения размеров слоя букв Аа

Рисунок 10.17 – Квадратная рамка поверх символов Аа

Рисунок 10.18 – Выделение кривой символов в Диспетчере объектов

Рисунок 10.19 – Захват и установка в верхнюю позицию слоя кривой в Диспетчере объектов

Важно соблюсти порядок: кривая слоя с буквами выше – над слоем с квадратной рамкой будущей маски.
Это выполняется захватом и установкой в верхнюю позицию слоя кривой в Диспетчере объектов (сокр. ДО).
Вызвать ДО из верхнего меню: ОКНО > Окна Настройки > Диспетчер объектов (второй сверху в выпадающем списке меню).

Рисунок 10.20 – Контуры после подгонки, выполненной по клику на кнопку в верхней панели (на предыдущем скриншоте выделено стрелкой, на данном скриншоте – результат выполнения функции после выделения двух слоев и их подгонки)

Рисунок.10.21 – Маска символов Аа в Corel Draw готова к экспорту

Выполнить эту процедуру с помощью горячих клавиш Ctrl + E для вызова диалогового меню сохранения файла в формате SVG.

Рисунок 10.22 – Экспорт маски символов Аа из графического редактора Corel Draw в директорию «/img/..»

Рисунок 10.23 – При экспорте SVG-изображения маски символов Аа необходимо учитывать следующие настройки

Рисунок 10.24 – По умолчанию при выгрузке маски символов Аа цвет был задан не белый, а черный (или темно-серый). Необходимо его заменить на белый цвет маски для реализации примера

Рисунок 10.25 – В коде файла mask.svg необходимо сменить цвет на белый (HEX: #fff)

Рисунок 10.26 – Для получения бесплатного изображения достаточно скачать по запросу в каталоге маркетплейса Iconfinder(.com) по адресу: https://www.iconfinder.com/icons/49738/apple_food_fruit_icon

Важно сохранить изображение в формате PNG в директории «/img/» с названием «apple.svg».

Рис. 10.27. Результат моделирования символа Аа для представления первой буквы русского алфавита

Рисунок 10.28 – Этот пример визуализации символа Аа имеет отличную масштабируемость (как в меньшую сторону, так и при максимальном увеличении)

Далее рассмотрим верстку из примера № 3 для визуализации символов Аа.
Код HTML
Всего 7 строк необходимо для вывода слоев комплексного инфоблока с буквами и изображением. Основная часть кода оформления инфоблока задана в формате CSS.
Пример № 3. Код CSS для оформления букв в инфоблоке
div.letter {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin: 10px;
  padding: 0;
  background: #6c6c6c;
  border-radius: 20px;
  box-shadow: 0px 3px 3px 1px #cdcdcd;
}
div.letter:hover,
div.letter:target {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin: 10px;
  padding: 0;
  background: #299a0b;
  background: -moz-linear-gradient(top, #299a0b 0%, #2cbf0f 51%, #299a0b 100%);
  background: -webkit-linear-gradient(top, #299a0b 0%,#2cbf0f 51%,#299a0b 100%);
  background: linear-gradient(to bottom, #299a0b 0%,#2cbf0f 51%,#299a0b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b',
  endColorstr='#299a0b',GradientType=0 );
  border-radius: 20px;
  box-shadow: 0px 3px 3px 1px #cdcdcd;
}
div.letter div.a {
  display: block;
  width: calc(100% – 4px);
  height: calc(100% – 4px);
  background-image: url('../img/mask-letter-a.svg'); /* Вывод маски с буквами */
  background-size: cover;
  border-radius: 20px;
  border: 2px solid #fff; /* Белый цвет по умолчанию */
  border-top: 3px solid #fff; /* Белый цвет по умолчанию */
  box-shadow: inset 0px 1px 4px #9b9b9b;
  vertical-align: top;
}
/* Состояния при наведении, при нажатии */
div.letter:hover div.a, div.letter:target div.a {
  display: block;
  width: calc(100% – 4px);
  height: calc(100% – 4px);
  background-image: url('../img/mask-letter-a.svg');
  background-size: cover;
  border-radius: 20px;
  border: 2px solid #2bb90e; /* Зеленый цвет при наведении, при нажатии */
  border-top: 3px solid #2bb90e; /* Зеленый цвет при наведении, при нажатии */
  box-shadow: inset 0px 1px 4px #9b9b9b;
  vertical-align: top;
}
div.letter div.a i {
  position: relative;
  z-index: 10; /* Задание слоя с изображением над градиентом (по глубине z-index)*/
  display: block;
  width: 30px;
  height: 30px;
  background-image: url('../img/apple.png');
  background-size: cover; /* Размер покрытия блока [30x30]px в пропорции */
  background-position: 0 0;
  background-repeat: no-repeat;
}
div.letter div div.gradient {
  position: relative;
  z-index: 5; /* Задание слоя с градиентом под слоем с изображением (по глубине) */
  display: block;
  width: calc(100% – 50px);
  height: calc(100% – 60px);
  padding: 60px 0 0 50px;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 24%,
  rgba(0,0,0,0) 76%, rgba(0,0,0,0.51) 100%);
  background: -webkit-linear-gradient(top, rgb(0 0 0 / 15%) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%,rgb(0 0 0 / 15%) 100%);
  background: linear-gradient(to bottom, rgb(0 0 0 / 15%) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%,rgb(0 0 0 / 15%) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#82000000', GradientType=0);
  border-radius: 20px;
}
Выводы по примеру с символами алфавита
Реализация этого примера дает практические навыки работы с кодом, представление о композиции слоев для вывода стилизованного инфоблока с векторной маской, градиентом, корректно позиционированным изображением, тенью блока, представление об оформлении при наведении, при клике.
Важно понимать, что итеративные (повторные) обращения к выполнению типовой задачи вырабатывают навыки в оперативном решении задач. Какие шаги конкретной задачи можно ускорить – это решит сам студент, тренируя именно те навыки, которые ему необходимы.
Если у студентов возникают ошибки в пошаговой реализации приведенных примеров, всегда можно обратиться к проверке кода на валидаторах HTML и CSS, чтобы идентифицировать ошибки в семантике документов, согласно спецификации HTML и CSS.
Пример № 4. Иллюстрирование надписи с эффектом проявления (Fade In)
Давайте продолжим изучение возможностей визуализации для решения задач веб-дизайна. Теперь выполним иллюстрирование надписи в графическом блоке с эффектом проявления. Например, веб-ресурса о туризме в России (точнее, в Сочи).

Рисунок 10.29 – Многослойная адаптивная иллюстрация Я люблю Сочи для веб-ресурса

В задаче показан комплексный подход к решению визуализации промоблока для рекламной статьи о туризме. Инфоблок будет включать многослойную композицию с высоким качеством воспроизведения графики для веба, адаптивным воспроизведением на всех типах устройств.
Решение применимо для коммерческой веб-разработки и будет актуально для самостоятельной работы студентов.
Конструктивно представленная иллюстрация может быть выполнена в двух решениях для веб-ресурса.

1. Статичное изображение в формате PNG, WebP или JPG.
Не подходит для адаптивного веб-дизайна с изменяемыми размерами по ширине и высоте экрана.
2. Адаптивный инфоблок с комплексной (многослойной) версткой.
Подходит для адаптивного веб-дизайна с изменяемыми размерами по ширине и высоте экрана.

Рассмотрим по слоям композицию адаптивной иллюстрации.
1. Фон – градиент, представляющий небо.
2. Достопримечательность – олимпийский спорткомплекс в г. Сочи.
3. Надпись Я люблю Сочи с содержанием глифов в виде сердечка и облаков.
4. Маска(–и) скруглений формы иллюстрации.
5. Активная кнопка Выбрать тур с глифом календарь.

Особенностью решения должна быть проявляющаяся надпись Я люблю Сочи с динамическим эффектом Fade In.
Подготовка фото для фона
1. Фото с видом Сочи из Яндекс.Картинки с размерами не менее 1000 px по ширине в правильной горизонтальной пропорции. Необходимо удалить фон неба, чтобы сделать резиновый градиент с более насыщенной гаммой тональности для контраста с белым цветом шрифта надписи Я люблю Сочи.

Рисунок 10.30 – Удаление фона из фото путем применения нейронных сетей в веб-сервисе Remove.bg

Рисунок 10.31 – Пример применения веб-сервиса Remove.bg для быстрого удаления фона неба из фото с видом Сочи

Подготовка маски для нижних сводов иллюстрации
Маску нижних изгибов формы иллюстрации исполним с помощью графического редактора Corel Draw.

Рисунок 10.32 – Подготовка маски нижних краев иллюстрации в редакторе Corel Draw. Размеры макета: [1027 × 264] px

Это необходимо и достаточно для всех размеров экрана при условии экспорта маски в формате SVG.

Рисунок10.33 – Экспорт маски нижних краев иллюстрации в Corel Draw

Используйте указанные настройки при экспорте маски в формате SVG.
Уточнения к подготовке векторной маски для иллюстрации
1. Подготовка маски выполняется с помощью инструмента кривая Безье, повторяющего фигуру с рис. 10.32 и замыкающего ее в виде фигуры с заливкой для начала черным цветом.
2. Перед экспортом в формате SVG с названием mask.svg в директорию «/img/..» относительно корневой директории с HTML-документом данного примера необходимо заменить цвет фона заливки (с черного на белый  – HEX: #fff или RGB: 255,255,255).
Как вариант возможно изменить цвет после сохранения в коде SVG.
Изменение цвета в документе SVG

До изменения 
   .fil0 {fill:#2B2A29}
]]>
После изменения
   .fil0 {fill:#FFF}
]]>

После изменения цвета в файле mask.svg в редакторе EditPlus выполнить сохранение, используя сочетание горячих клавиш Ctrl + S (функция Сохранить).
Фон для иллюстрации
Подготовка фона иллюстрации выполнена путем получения ключевых цветов градиента заката, чтобы дневной фон заменить на вечерний в изображении со спорткомплексом (на контраст с белым текстом).

Первоисточник заказа 
Рисунок 10.34 – Источник фото (JPG) с красочным закатом

Градиент
Рисунок 10.35 – Выгрузка слоя градиента по ключевым точкам тонов из ColorZilla в стили CSSё
Код CSS для фона иллюстрации
/* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5a74b5+0,5f619c+20,856492+40,a2678b+60,e09c8f+80,d17a6b+100 */
background: #5a74b5; /* Old browsers */
background: -moz-linear-gradient(top, #5a74b5 0%, #5f619c 20%, #856492 40%, #a2678b 60%, #e09c8f 80%, #d17a6b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #5a74b5 0%,#5f619c 20%,#856492 40%,#a2678b 60%,#e09c8f 80%,#d17a6b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #5a74b5 0%,#5f619c 20%,#856492 40%,#a2678b 60%,#e09c8f 80%,#d17a6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a74b5', endColorstr='#d17a6b',GradientType=0 ); /* IE6-9 */
Подготовка глифа в форме сердечка для иллюстрации
Для визуализации центральной надписи потребуется подготовить векторный глиф в форме сердечка с заливкой красным цветом.

Рисунок 10.36 – Моделирование глифа

Рисунок 10.37 – Результат моделирования глифа

Рисунок 10.38 – Источник глифа в форме сердечка доступен для скачивания бесплатно в каталоге маркетплейса IconFinder(.com)

Есть два основных варианта решения.

1. Самостоятельная отрисовка (моделирование) глифа в векторном редакторе Corel Draw (или Adobe Illustrator).
Рассмотрим данное решении далее по тексту лекции.

2. Выбор и скачивание из каталога маркетплейса векторных изображений IconFinder(.com).
Ускоренное решение доступно по ссылке (выбрать формат SVG):
https://www.iconfinder.com/icons/5172567/heart_like_love_icon
Как смоделировать векторный глиф в виде симметричного сердечка 
Если внимательно посмотреть на рис. 10.36 – в моделировании глиф сердечка имеет идеальную зеркальную форму. Правая половина изображения отражена зеркально относительно левой и совмещена по центральной вертикальной оси, образуя единое целое в необходимой форме глифа.
Для моделирования (упрощ. отрисовки) потребуются базовые навыки использования инструментария векторного графического редактора Corel Draw (или Adobe Illustrator) – на ваш выбор. В данном случае рассмотрим решение, используя Corel Draw.
В ходе работы потребуется последовательно использовать инструменты.

• Фигура круг (на панели инструментов по умолчанию слева).
• Кривая Безье (на панели инструментов по умолчанию слева).
• Выделение (Ctrl + A).
• Дублирование (Ctrl + D).
• Отражение по оси OX (на верхней панели графического редактора).
• Смещение функцией Drag&Drop (позиционирование объектов симметрично) по заданным направляющим, выставленным с помощью курсора.
• Объединение выделенных фигур, образующих сердечко на рис. 10.37.
• Заливка фигуры красным цветом (из палитры справа).
• Выбор толщины контура (5 px, белый цвет).
• Экспорт в формате SVG с названием love-heart.svg.
Моделирование фигуры в форме сердечка
Рисунок 10.39 – Моделирование формы сердечка с использованием инструментов: фигура круг, кривая Безье (для треугольной части фигуры)

Рисунок 10.40 – Отражение объектов левой половины сердечка (круг и треугольник) с помощью инструмента на верхней панели

Рисунок 10.41 – Объединение совмещенных половинок сердечка

Рисунок 10.42 – Объединенное сердечко с контурной обводкой и без заливки

Рисунок 10.43 – Объединенное сердечко с контурной обводкой (5 px, белый цвет) и заливкой фигуры красным цветом

Рисунок 10.44 – Экспорт фигуры в директорию «/img/..» для дальнейшей работы по техническому дизайну

Рисунок 10.45 – Настройки экспорта для четкой детализации векторного изображения

Рисунок 10.46 – Результирующий файл глифа в форме сердечка

Подготовка надписи Я люблю Сочи с глифом в виде сердечка
Комплексная композиция надписи с глифом сердечка требует выбрать вариант решения. Есть два пути решения.

1. Текст и форматирование стиля со шрифтом Lora Bold и подключением внешнего нестандартного шрифта через ссылку из библиотеки Google Fonts.
Типовое оформление текста выглядит следующим образом.

Рисунок 10.47 – Библиотека шрифтов Google Fonts для подключения к веб-странице HTML

Рисунок 10.48 – Страница выбранного шрифта семейства Lora. В списке выбрать стиль Bold 700 и добавить к экспорту Select this style

Рисунок 10.49 – Настройки экспорта шрифта для привязки к веб-странице

Кнопка Download All позволяет скачать шрифт для дальнейшей установки в ОС Windows / Mac OS для использования в графическом редакторе Corel Draw (или Adobe Illustrator).

Рисунок 10.50 – Верстка надписи с глифом. Выравнивание по направляющим (по OX и OY)

Проявление надписи с помощью анимации Fade In в CSS
Стандартная анимация проявления (из нулевой прозрачности, альфа-канал = 0) в полную (полноцветную, альфа-канал = 1) выполняется в стилях CSS с помощью эффекта Fade In. Рассмотрим код CSS для примера анимации Fade In.

.fadeIn {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}
/* Далее базовый стиль анимации Fade In в начальном и конечном состоянии */
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
/* Далее базовый стиль анимации Fade In для Mozilla Firefox */
@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
/* Далее базовый стиль анимации Fade In для браузеров на движке WebKit */
@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
/* Далее базовый стиль анимации Fade In для браузера Opera */
@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
/* Далее базовый стиль анимации Fade In для браузера Internet Explorer */
@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
Уточнения к примеру кода Fade In для CSS
1. Обратите внимание, что -webkit, -moz, -o и -ms – префиксы основных веб-браузеров. Они позволяют гарантировать, что код работает в разных браузерах (например, между Google Chrome и Mozilla Firefox).
2. По общему признанию, поддерживать дублированный код CSS для каждого из них – это раздражает веб-разработчиков. Но важно обеспечить единообразие для ваших конечных пользователей, независимо от того, какой браузер они используют.
3. Интуитивно и по факту Fade In отличается от Fade Out – зеркально.

Анимация Fade In 
.fadeIn 
{
animation: 
fadeIn 
ease 
10s;
– webkit-animation: 
fadeIn 
ease 
10s;
– moz-animation: 
fadeIn 
ease 
10s;
– o-animation: 
fadeIn 
ease 
10s;
– ms-animation: 
fadeIn 
ease 
10s;
}

@keyframes 
fadeIn 
{
0% 
{
opacity:0;
}
100% 
{
opacity:1;
}
} .

Анимация Fade Out
fadeOut 
{
animation: 
fadeOut 
ease 
10s;
– webkit-animation: 
fadeOut 
ease 
10s;
– moz-animation: 
fadeOut 
ease 
10s;
– o-animation: 
fadeOut 
ease 
10s;
– ms-animation: 
fadeOut 
ease 
10s;
}

@keyframes 
fadeOut 
{
0% 
{
opacity:1;
}
100% 
{
opacity:0;
}
}
Условные примеры подключения класса Fade In для слоя и объекта представлены далее по тексту.
Подключение анимации проявления Fade In
Вариант № 1
для всего слоя композиции

Вариант № 2
для объекта композиции

При экспорте надписи с глифом из Corel Draw в директорию «/img/..» необходимо предварительно обязательно перевести текст в кривые путем Ctrl + A (выделить все слои) и перевести в векторный вид Ctrl + Q (перевести в кривые).
Далее в иллюстрацию нужно добавить мелкие векторные облака для создания разнообразия на идеальном небе Сочи.
Есть два основных варианта решения.

1. Вы можете воспроизвести подобные примитивы векторных облаков в Corel Draw, это выполняется объединением нескольких фигур, созданных в отдельном дизайн-макете Corel Draw. В результате можно экспортом сделать 1–3 варианта и расставить аналогично по слоям в иллюстрации (равномерно, соблюдая баланс в иллюстрации).
Отрисовка фигуры облако в графическом редакторе Corel Draw
Шаг № 1
Рисунок 10.51 – Отрисовка облака кругами и прямоугольником с использованием инструментов Corel Draw

Шаг № 2
Рисунок 10.52 – Выделение фигур на макете (Ctrl + A) и объединение инструментом с верхней панели

Шаг № 3
Рисунок 10.53 – Созданная фигура облака с контуром для визуализации формы

Шаг № 4
Рисунок 10.54 – Заливка облака белым цветом и настройка контура (Нет) перед экспортом

Шаг № 5
Рисунок 10.55 – Экспорт облака в векторном формате SVG с названием cloud-1.svg.
Аналогично для второго облака выполнить шаги с 1-го по 5-й и экспорт с наименованием cloud-2.svg

Уточнение
Навык технического дизайнера в оперативной отрисовке (моделировании) примитивных фигур в Corel Draw или Adobe Illustrator позволит сэкономить время на техническую подготовку графических элементов веб-интерфейса и промо-иллюстраций.

2. Если вы не можете сразу воспроизвести подобные примитивы векторных облаков в Corel Draw, используйте готовые глифы из каталога IconFinder(.com).

Рисунок 10.56 – Скриншот изображения облака в каталоге IconFinder(.com).
Источники:
https://www.iconfinder.com/icons/5729391/cloudy_weather_cloud_forecast_rain_icon
https://www.iconfinder.com/icons/3553106/cloud_cloudy_weather_icon

Выгруженные векторные файлы облаков с названиями cloud-1.svg и cloud-2.svg необходимо выгрузить в дочернюю директорию данного примера «/img/…» для корректной адресации классов CSS из данного примера.
Необходимо назначить белый цвет для вывода облаков в иллюстрации аналогично предыдущему примеру с маской в SVG, используя редактирование кода источников SVG. Для вывода календаря в кнопке Выбрать тур используйте бесплатное изображение (аналогично скачайте в формате SVG): https://www.iconfinder.com/icons/2561349/calendar_icon.
Пример № 4. Код HTML для вывода иллюстрации
Выбрать тур
Стилизация наименований сущностей Camel Case
В наименованиях идентификаторов и классов используется нижний и верхний регистр воспроизведения класса, примерно так: bottomCorners и iLoveSochi.
Это условное наименование стилизации в среде веб-разработчиков обозначается термином CamelCase (от визуальной особенности верблюжьих горбов). Удобная стилизация для сложных и длинных наименований сущностей (классов, идентификаторов и т. д.).

Рис.10.57 – Стилистическое представление CamelCase в сравнении с верблюжьим горбом

Как видно из вывода кода HTML, всего 180 символов, не включая табуляцию и пробелы, потребовалось для вывода слоев иллюстрации. Основная часть кода – в оформлении стилей CSS.
Пример № 4. Код CSS для вывода иллюстрации
div.illustration {
  display:block;
  width:100%;
  margin:20px auto 0 auto;
}
div#iLoveSochi.illustration {
  background: #5a74b5; /* Old browsers */
  background: -moz-linear-gradient(top, #5a74b5 0%, #5f619c 20%, #856492 40%, #a2678b 60%, #e09c8f 80%, #d17a6b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #5a74b5 0%,#5f619c 20%,#856492 40%, #a2678b 60%,#e09c8f 80%,#d17a6b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #5a74b5 0%,#5f619c 20%,#856492 40%, #a2678b 60%,#e09c8f 80%,#d17a6b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a74b5', endColorstr='#d17a6b',GradientType=0 ); /* IE6-9 */
}
div.bottomCorners {
  display: block;
  width: 100%;
  min-height: 300px;
  padding-top: 100px;
  background-image: url('../img/mask.svg');
  background-size: 100.2% auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  text-align: center;
}
i.textMessage {
  position: relative;
  z-index: 5;
  display: block;
  width: 640px;
  height: 110px;
  margin: 0 auto 0 auto;
  border: none;
  background-image: url('../img/i-love-sochi.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  text-align: center;
  overflow:visible;
  cursor:none;
}
div.cityLine {
  display: block;
  width: 100%;
  min-height: 400px;
  height: 100%;
  background-image: url('../img/city.png');
}
a.chooseTour {
  position: relative;
  display: block;
  margin: 147px 0 0 calc(100% – 200px);
  width: 100px;
  height: 18px;
  padding: 10px 15px 10px 36px;
  background-color: #3498db;
  background-image: url('../img/calendar.svg');
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: 16px 9px;
  border-radius: 100px;
  font-family: Arial,sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
}
a.chooseTour:hover,a.chooseTour:target {
  background-color: #2980b9;
}
i.textMessage:before {
  content: "";
  position: absolute;
  z-index: 10;
  display: block;
  width: 42px;
  height: 27px;
  margin-top: 78px;
  margin-left: 110px;
  background-image: url('../img/cloud-1.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  opacity: 0.95;
}
i.textMessage:after {
  content: "";
  position: absolute;
  display: block;
  width: 38px;
  height: 28px;
  margin-top: 5px;
  margin-left: 510px;
  background-image: url('../img/cloud-2.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 -5px;
  z-index: 10;
  opacity: 0.345;
}
@media (min-width:1000px) {
  div.illustration {
    max-width: 1024px;
    min-height: 300px;
    border-radius: 40px 40px 0 0;
  }
  div.cityLine {
    background-repeat: no-repeat;
    background-position: 15px 352%;
  }
}
@media (max-width:999px) and (min-width:641px) {
  div.illustration {
    display: block;
    width: 100%;
    margin: 8px auto 0 auto;
    border-radius: 20px 20px 0 0;
  }
  div.cityLine {
    display: block;
    width: 100%;
    min-height: 400px;
    height: 100%;
    background-image: url('../img/city.png');
    background-position: 0 250%;
    background-repeat: no-repeat;
  }
  i.textMessage {
    position: relative;
    z-index: 5;
    display: block;
    width: 340px;
    height: 110px;
    margin: 0 auto 0 auto;
    border: none;
    background-image: url('../img/i-love-sochi.svg');
    background-size: auto 60px;
    background-repeat: no-repeat;
    background-position: 0 0;
    text-align: center;
    overflow: visible;
    cursor: none;
  }
  i.textMessage:before {
    content: "";
    position: absolute;
    z-index: 10;
    display: block;
    width: 42px;
    height: 27px;
    margin-top: -38px;
    margin-left: 10%;
    background-image: url('../img/cloud-1.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: 0.15;
  }
  i.textMessage:after {
    content: "";
    position: absolute;
    display: block;
    width: 38px;
    height: 28px;
    top: -30px;
    left: auto;
    right: -5%;
    background-image: url('../img/cloud-2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -5px;
    z-index: 10;
    opacity: 0.345;
  }
  a.chooseTour {
    margin: 147px 0 0 calc(100% – 160px);
  }
}
@media (max-width:640px) {
  div.illustration {
    display: block;
    width: 100%;
    height: 360px;
    margin: 8px auto 8px auto;
    border-radius: 20px 20px 0 0;
  }
  div.cityLine {
    display: block;
    width: 100%;
    min-height: 360px;
    height: 360px;
    background-image: url('../img/city.png');
    background-size: auto 240px;
    background-position: 0 bottom;
    background-repeat: no-repeat;
  }
  div.bottomCorners {
    display: block;
    width: 100%;
    min-height: 260px;
    padding-top: 100px;
    background-image: url('../img/mask.svg');
    background-size: 100.2% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    text-align: center;
  }
  i.textMessage {
    position: relative;
    z-index: 5;
    display: block;
    width: calc(100% – 60px);
    height: 110px;
    margin: -15% auto 40% 30px;
    border: none;
    background-image: url('../img/i-love-sochi.svg');
    background-size: auto 50px;
    background-repeat: no-repeat;
    background-position: top center;
    text-align: center;
    overflow: visible;
    cursor: none;
  }
  div.cityLine:after {
    content: "";
    display: block;
    width: 100%;
    height: 70px;
    background: #fff;
  }
  i.textMessage:before {
    content: "";
    position: absolute;
    z-index: 10;
    display: block;
    width: 25px;
    height: 16px;
    margin-top: -8%;
    margin-left: 16%;
    background-image: url('../img/cloud-1.svg');
    background-size: 95% 95%;
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: 0.35;
  }
  i.textMessage:after {
    content: "";
    position: absolute;
    display: block;
    width: 38px;
    height: 28px;
    margin-top: -25px;
    margin-left: 90%;
    background-image: url('../img/cloud-2.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -5px;
    z-index: 10;
    opacity: 0.345;
  }
  a.chooseTour {
    position: relative;
    display: block;
    margin: 100px auto 0 calc(50% – 75.5px);
    float: left;
    width: 100px;
    height: 18px;
    padding: 10px 15px 10px 36px;
    background-color: #3498db;
    background-image: url('../img/calendar.svg');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: 16px 9px;
    border-radius: 100px;
    font-family: Arial,sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    zoom: 80%;
  }
}
@media (max-width:375px) and (min-width:374px) {
  i.textMessage {
    position: relative;
    z-index: 5;
    display: block;
    width: calc(100% – 60px);
    height: 110px;
    margin: -10% auto 40% 30px;
    border: none;
    background-image: url(../img/i-love-sochi.svg);
    background-size: auto 40px;
    background-repeat: no-repeat;
    background-position: top center;
    text-align: center;
    overflow: visible;
    cursor: none;
  }
  a.chooseTour {
    margin-top:80px;
  }
}
@media (max-width:320px) {
  i.textMessage {
    background-size: contain;
  }
}
.fadeIn {
  animation: fadeIn ease 15s;
  -webkit-animation: fadeIn ease 15s;
  -moz-animation: fadeIn ease 15s;
  -o-animation: fadeIn ease 15s;
  -ms-animation: fadeIn ease 15s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity:0;
zoom:90%
  }
  100% {
    opacity:1;
zoom:100%;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
Минификация исходного кода стилей CSS
Всего 6307 знаков программного кода стилей CSS (без учета табуляции и пробелов) требуется для визуализации в HTML этого примера.
Логично решить вопрос с компрессией изображений и кода CSS для минимизации загрузки. Это не критично в текущей задаче, но когда иллюстрация будет не одна, а допустим 10–15, файл стилей увеличится кратно количеству уникальных стилей для каждой из них.
Как выполнить компрессию кода CSS для оптимизации скорости загрузки на клиентском устройстве?
Используем веб-сервис CSS Compressor – один из аналогичных веб-инструментов, несущих полезную вспомогательную функцию. Принцип применения весьма простой – методом копипаст и заменой стилей style.css на style-min.css (детально представлен на рис. 10.58).

Рисунок 10.58 – Схема процесса минификации кода стилей CSS

Процедура минификации исходного кода каскадных таблиц стилей CSS позволяет увеличить скорость загрузки веб-ресурса на клиентском устройстве и повысить показатели на основе поведенческих факторов: глубина и время просмотров страниц и т. д.

Результат минификации кода CSS

В результате мы имеем масштабируемый и адаптивный по ширине экрана иллюстративный блок представления туристического объекта Сочи с эффектом плавного проявления надписи (анимация FadeIn). Далее даны примеры отображения адаптивного дизайна иллюстрации на мобильных экранах смартфонов и планшетов.

Рисунок 10.59 – Просмотр иллюстрации на экране смартфона Moto 4G, [360 × 640] px

Рисунок 10.60 – Просмотр иллюстрации на экране iPhone 6, 7, 8 Plus, [414 × 736] px

Рисунок 10.61 – Просмотр иллюстрации на экране iPad (вертикально), [768 × 1024] px

Рисунок 10.62 – Просмотр на экране смартфона (горизонтально), [1024 × 768] px

Пример № 5. Фиксированное меню горячих функций адаптивного веб-ресурса
Для удобства навигации по веб-ресурсу с вложенной структурой и длинными страницами текстового описания зачастую используется дополнительное фиксированное меню – например, в нижней части экрана (см. рис. 10.63). Эта удобная панель навигации позволяет при прокрутке экрана нажать (пальцем на смартфоне) на вызов горячих функций сайта, например:

• Возврат на главную страницу (иконка домик).
• Переход в каталог продукции (иконка список).
• Переход к выбору ближайшего магазина.
• Вызов номера телефона для консультации с менеджером компании по выбору и заказу представленной продукции.

Рисунок 10.63 – Фиксированное меню с быстрой навигацией по веб-сайту в состоянии по умолчанию

Рисунок 10.64 – Фиксированное меню с быстрой навигацией по веб-сайту в состоянии при наведении на  функцию

Рисунок 10.65 – Фиксированное меню в адаптивном дизайне веб-страницы текстового описания

Для реализации фиксированного меню потребуется подготовить векторный спрайт для вывода 4 пиктограмм заданных функций (см. рис. 10.66).

Рисунок 10.66 – Сетка для вывода спрайта с пиктограммами функций дополнительного фиксированного меню

Рисунок 10.67 – Подготовка пиктограмм для спрайта функций фиксированного меню

Функциональные особенности данного спрайта:
• общие размеры спрайта: [132 × 60] px;
• каждая пиктограмма функции размерами [36 × 36] px;
• отступ между пиктограммами по горизонтали и вертикали по 12 px;
• всего 4 пиктограммы в 2 ряда: первый ряд – состояние по умолчанию, второй ряд – при наведении, при клике/нажатии;
• сохранение спрайта со стандартным наименованием sprite.svg в директории «/img/..».

Для моделирования пиктограмм аналогично предыдущим примерам необходимо выбрать один из доступных исполнителю вариантов решения задачи технического дизайна.

1. Самостоятельная отрисовка в графическом векторном редакторе Corel Draw (или Adobe Illustrator) с помощью инструментов – геометрических фигур, комплексных фигур на основе кривых Безье.
2. Поиск и выбор по каталогу бесплатных пиктограмм (например, IconFinder (.com) или аналогичные веб-ресурсы).

Далее рассмотрим исходный код HTML и CSS для реализации данного примера в веб-странице с адаптивной версткой.
Пример № 5. Код HTML
Lorem Ipsum
Lorem ipsum – dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[1] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Malesuada fames
Pellentesque habitant morbi tristique senectus et netus[2] et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Praesentium voluptatum deleniti
At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.
Totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit.
Proin pharetra nonummy pede. Mauris et orci.

Большую часть исходного кода HTML в этом примере занимает текстовое описание в теге 
…
 (всего 2350 символов), меню в теге  (всего 350 символов). Здесь указано количество символов исходного кода HTML, не включая табуляцию и пробелы в коде.
Пример № 5. Код CSS
html,body {
    width:100%;
    min-height:100%;
    height:fit-content;
    margin:0;
    padding:0;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:normal;
    line-height:1.5em;
}
body {
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 43%, #e5e5e5 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 43%, #e5e5e5 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 43%,#e5e5e5 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    overflow-x:hidden;
    overflow-y:scroll;
}
section.content {
    position: relative;
    z-index:1;
    width: calc(100% – 40px);
    height: fit-content;
    min-height: calc(100vh – 40px);
    margin: 0 auto;
    padding: 20px 20px 180px 20px;
    color: #111;
}
section.content article h1 {
    margin-bottom:0;
    padding-bottom:0;
    font-size:1.5em;
}
section.content article h2 {
    margin-bottom:0;
    padding-bottom:0;
    font-size:1.25em;
}
section.content article p {
    font-size:1em;
}
section.content:after {
    content:"";
    position:fixed;
    bottom:0;
    left:0;
    z-index:3px;
    display:block;
    width:100%;
    height:180px;
    background: -moz-linear-gradient(top, rgba(244,244,244,0) 0%,
    rgba(244,244,244,1) 64%, rgba(234,234,234,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(244,244,244,0) 0%, rgba(244,244,244,1) 64%, rgba(234,234,234,1) 100%); /* Chrome10-25, Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(244,244,244,0) 0%,
    rgba(244,244,244,1) 64%, rgba(234,234,234,1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f4f4f4', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
}
/* Фиксированное меню в положении снизу и выровнено по центру экрана на любой ширине */
nav.fixedMenu {
    position: fixed;
    left: calc(50% – 120px);
    bottom: 20px;
    z-index:5;
    display: block;
    width: 240px;
    height: 48px;
    border-radius: 100px;
    background: #999;
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    border: 1px solid #9d9d9d;
    background: #cecece;
    background: -moz-linear-gradient(top, #cecece 0%, #d1d1d1 50%, #bcbcbc 100%);
    background: -webkit-linear-gradient(top, #cecece 0%,#d1d1d1 50%,#bcbcbc 100%);
    background: linear-gradient(to bottom, #cecece 0%,#d1d1d1 50%,#bcbcbc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece',
    endColorstr='#bcbcbc',GradientType=0 );
}
/* Список функций в 
 в фиксированном меню */
nav.fixedMenu ul {
    width: 100%;
    max-width: 252px;
    height: 48px;
    margin: 0 auto;
    padding: 0 0 0 5px;
    list-style: none;
    text-align: center;
}
/* Оформление пункта списка функций в 
 в фиксированном меню */
nav.fixedMenu ul li {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 5px 10px 0 0;
    padding: 0;
    border: none;
    background: #dddddd;
    background: -moz-radial-gradient(center, ellipse cover, #dddddd 21%, #bdbdbd 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #dddddd 21%,#bdbdbd 100%);
    background: radial-gradient(ellipse at center, #dddddd 21%,#bdbdbd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd',
    endColorstr='#bdbdbd',GradientType=1 );
    box-shadow: inset 0px 1px #888;
    border-radius: 100px;
    cursor:pointer;
}
/* Оформление ссылки для вызова функций в 
 в фиксированном меню */
nav.fixedMenu ul li a {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 1px 0 0;
    border-radius: 100px;
    background-color: rgb(213 213 213 / 30%);
    box-shadow: 0 1px 1px #fff;
    vertical-align: top;
    cursor:pointer;
}
/* Оформление ссылки при наведении, при клике в фиксированном меню */
nav.fixedMenu ul li a:hover,nav.fixedMenu ul li a:target {
    background-color:#27ae60;
}
/* Оформление ссылки «Вернуться на главную страницу» по умолчанию */
nav.fixedMenu ul li a.home {
    background-image: url('../img/sprite.svg');
    background-size: 132px 60px;
    background-position: 6.5px 5px;
    background-repeat: no-repeat;
}
/* Оформление ссылки «Перейти в каталог» по умолчанию */
nav.fixedMenu ul li a.catalog {
    background-image: url('../img/sprite.svg');
    background-size: 132px 60px;
    background-position: -29px 6px;
    background-repeat: no-repeat;
}
/* Оформление ссылки «Перейти в Контакты к адресам магазинов» по умолчанию */
nav.fixedMenu ul li a.location {
    background-image: url('../img/sprite.svg');
    background-size: 132px 60px;
    background-position: -65px 6px;
    background-repeat: no-repeat;
}
/* Оформление ссылки «Позвонить в магазин» по умолчанию */
nav.fixedMenu ul li a.callMe {
    background-image: url('../img/sprite.svg');
    background-size: 132px 60px;
    background-position: -102px 6px;
    background-repeat: no-repeat;
}
/* Оформление ссылки «Вернуться на главную страницу» при наведении, при клике, нажатии */
nav.fixedMenu ul li a.home:hover,nav.fixedMenu ul li a.home:target {
    background-image: url('../img/sprite.svg');
    background-size: 132px 60px;
    background-position: 6.5px -31px;
    background-repeat: no-repeat;
}
/* Оформление ссылки «Перейти в каталог» при наведении, при клике, нажатии */
nav.fixedMenu ul li a.catalog:hover,nav.fixedMenu ul li a.catalog:target {
    background-image: url('../img/sprite.svg');
    background-size: 132px 60px;
    background-position: -29px -30px;
    background-repeat: no-repeat;
}
/* Оформление ссылки «Перейти в Контакты к адресам» при наведении, при клике, нажатии */
nav.fixedMenu ul li a.location:hover,nav.fixedMenu ul li a.location:target {
    background-image: url('../img/sprite.svg');
    background-size: 132px 60px;
    background-position: -65px -30px;
    background-repeat: no-repeat;
}
/* Оформление ссылки «Позвонить в магазин» при наведении, при клике, нажатии */
nav.fixedMenu ul li a.callMe:hover,nav.fixedMenu ul li a.callMe:target {
    background-image: url('../img/sprite.svg');
    background-size: 132px 60px;
    background-position: -102px -30px;
    background-repeat: no-repeat;
}
/* Далее ограничение ширины блока контента для экранов ПК и ноутбуков (более 1000px) */
@media (min-width:1000px) {
    section.content {
        max-width: 650px;
    }
}

Всего 5452 символа без табуляции и пробелов в исходном коде CSS потребовалось для вывода адаптивного фиксированного меню удобной навигации по веб-ресурсу. Это оптимальное решение для доступа пользователя к важным функциям и снижению показателя Отказы (Failure Rate). Статистическая метрика (показатель) Отказы растет, когда пользователи не справляются или массово не заинтересованы в работе с неудобным веб-интерфейсом данного ресурса.
Для более четкого восприятия этого закрепляющего материал примера рассмотрим исходный код полученного спрайта в формате SVG.
viewBox="0 0 1118 508"
 xmlns:xlink="http://www.w3.org/1999/xlink">

Вес экспортированного из Corel Draw файла спрайта составил 3,46 Кб. Это позволило получить относительно легкое по весу исходного кода решение поставленной задачи. Студентам рекомендуется в ходе самостоятельной работы сделать это с учетом последовательных технических шагов (см. рис. 10.70).

Рисунок 10.68 – Отображение примера № 5 на экране Moto G4

Рисунок 10.69 – Отображение примера № 5 на экране iPhone

Рисунок 10.70 – Отображение примера № 5 на экране Nest Hub, [1024 × 600] px

Рисунок 10.71 – Отображение примера № 5 на экране iPad

Рисунок 10.72 – Отображение примера № 5 на экране ПК, [1024 × 768] px

Пример № 6. Фиксированная панель горячих функций с вызовом по событию (по запросу пользователя)
Предыдущий пример является классическим примером дополнительной навигации с выбором горячих функций для быстрого доступа пользователя и улучшения удобства использования адаптивного веб-ресурса.
Визуально решение съедает часть экрана снизу для визуализации решения и мягкого нижнего края, куда уходит контент под фиксированное дополнительное меню.
Логически с точки зрения веб-дизайна можно отметить, что предыдущий пример является относительно качественным, т. к. визуально уменьшает видимую область контента по умолчанию на 160–180 пикселей в нижней части экрана. Разумнее всего сделать кнопку вызова дополнительного меню с раскрытием панели выбора горячих функций веб-ресурса: это более прогрессивный и экономичный по размеру инфоблока вариант решения для дополнительной навигации (см. рис.10.73).

Рисунок 10.73 – Фиксированная панель Виртуальный помощник для быстрой навигации и обратной связи при работе с веб-ресурсом

Рисунок 10.74 – Состояния инфоблока Виртуальный помощник (слева направо): по  умолчанию, при клике (нажатии) на кнопку вызова (открытия) инфоблока, при выборе нужной функции из списка

Решение Виртуальный помощник – более комплексное в плане выбора горячих функций для пользователя: можно добавить не 4, а уже 8 и более основных функций.
С технической точки зрения это требует лишь обработок событий по клику для открытия панели Виртуального помощника и закрытия по клику на крестик в верхней части панели.
Графический векторный спрайт используется для визуализации пунктов меню выбора горячих функций. Рассмотрим предметно исходный код и спрайт данного примера.
Технические особенности данного спрайта для вывода визуальных элементов в списке функций:
• размеры спрайта: [208 × 40] px;
• вывод пиктограмм: [16 × 16] px;
• отступ между пиктограммами по OX и OY: 8 px.

Рисунок 10.75 – Модульная сетка спрайта

Рисунок 10.76 – Пиктограммы в спрайте

Рисунок 10.77 – Адаптивный Виртуальный помощник на экране Moto G4, [320 × 640] px

Рисунок 10.78 – Виртуальный помощник на экране iPhone, [375 × 665] px

Рисунок 10.79 – Виртуальный помощник на экране iPad, [768 × 1024] px

Рисунок 10.80 – Виртуальный помощник на экране Nest Hub, [1024 × 600] px

Рисунок 10.81 – Виртуальный помощник на экране Nest Hub Max, [1280 × 800] px

Рисунок 10.82 – Виртуальный помощник на экране ПК, [1024 × 800] px

Рассмотрим исходный код HTML и CSS для адаптивного дизайна Виртуального помощника, скрипта вызова окна инфоблока (JavaScript) и спрайт в формате SVG.
Пример № 6. Исходный код HTML
Lorem Ipsum
Lorem ipsum – dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[1] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Malesuada fames
Pellentesque habitant morbi tristique senectus et netus[2] et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
Praesentium voluptatum deleniti
At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, 
quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.
Totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit.
Proin pharetra nonummy pede. Mauris et orci.
    class="comment"id="virtualHelper">
Здравствуйте! Что Вас интересует?
Выберите тему запроса.
class="articuleSearch">Найти комплектующие по артикулу
class="ervConfigurator">Узнать конфигурацию компенсаторов
Заказать компенсаторы и шланги
Проверить сертификаты соответствия
Позвонить в офис
Узнать адреса офиса и склада
Получить реквизиты компании
Задать вопрос

Суммируем и проанализируем полученный исходный код HTML. Всего 1375 символов (без табуляции и пробелов) необходимо для вывода Виртуального помощника. Отдельно подключен файл стилей CSS для него, чтобы не путаться в стилях между контентом и данным вспомогательным блоком:

Основная масса исходного кода оформления Виртуального помощника в каскадных таблицах стилей CSS (по указанному выше пути).
Рассмотрим детально исходный код CSS в файле virtual-helper.css.
Пример № 6. Исходный код CSS
div#openVirtualHelper.openForm {
  position: fixed;
  right: 20px;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: block;
  width: 360px;
  height: calc(100vh – 80px);
  max-height: 535px;
  background: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 1px 2px #404040;
  color: #111;
}
div#openVirtualHelper.head {
  display: block;
  width: calc(100% – 10px);
  height: 40px;
  padding: 10px 0 8px 10px;
  background: -moz-linear-gradient(left, #0973b8 0%, #009be2 26%, #2989d8 48%, #7db9e8 72%, #0973b8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0973b8', endColorstr='#0973b8',GradientType=1 );
  background: #0973b8;
  background: -moz-linear-gradient(left, #0973b8 0%, #2989d8 31%, #0799e1 67%, #0973b8 100%);
  background: -webkit-linear-gradient(left, #0973b8 0%,#2989d8 31%, #0799e1 67%, #0973b8 100%);
  background: linear-gradient(to right, #0973b8 0%,#2989d8 31%, #0799e1 67%, #0973b8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0973b8', endColorstr='#0973b8',GradientType=1 );
  border-bottom: 1px solid #088ad1;
  vertical-align: top;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-animation: GradientMotion 5s ease infinite;
  -moz-animation: GradientMotion 5s ease infinite;
  animation: GradientMotion 5s ease infinite;
}
div#openVirtualHelper.head,a#virtualHelper.close,div#openVirtualHelper.openForm {
  z-index: 1000;
}
a#virtualHelper.close:hover, a#virtualHelper.close:target {
  opacity:0.8;
}
a#virtualHelper.close:hover:before,a#virtualHelper.close:target:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -188px 0;
  zoom: 190%;
}
#virtualhelper strong {
  font-weight:400;
}
div#openVirtualHelper.panel ul li a.articuleSearch:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url(../img/sprite.svg);
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -24px 0;
}
div#openVirtualHelper.panel ul li a.articuleSearch:hover:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -24px -24px;
}
div#openVirtualHelper.panel ul li a.ervConfigurator:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -71px 0;
}
div#openVirtualHelper.panel ul li a.ervConfigurator:hover:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -71px -24px;
}
div#openVirtualHelper.panel ul li a.checkCertificates:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -48px 0;
}
div#openVirtualHelper.panel ul li a.checkCertificates:hover:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -48px -24px;
}
div#openVirtualHelper.panel ul li a.onlineOrder:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -94px 0;
}
div#openVirtualHelper.panel ul li a.onlineOrder:hover:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -94px -24px;
}
div#openVirtualHelper.panel ul li a.callToOffice:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -142px 0;
}
div#openVirtualHelper.panel ul li a.callToOffice:hover:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -142px -24px;
}
div#openVirtualHelper.panel ul li a.lookAddress:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -118px -1px;
}
div#openVirtualHelper.panel ul li a.lookAddress:hover:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -118px -24px;
}
div#openVirtualHelper.panel ul li a.getInfo:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -166px 0;
}
div#openVirtualHelper.panel ul li a.getInfo:hover:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px -4px -4px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -166px -24px;
}
#virtualhelper div.header a.close {
  display: block;
  vertical-align: top;
  text-decoration: none;
  width: 30px;
  height: 30px;
  text-align: center;
  position: absolute;
  top: -10px;
  right: -10px;
  background-image: url('https://bundlespace.com/i/close.png');
  background-position: top right;
  background-size: 30px 30px;
  top: -12px;
  right: -12px;
  z-index: 1000;
  zoom: 82%;
  border-radius:50px;
  box-shadow:0 1px 2px #444;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:normal;
  line-height:10px;
}
#virtualhelper h2 {
  margin: 0;
  padding: 11px 14px 10px 12px;
  background: rgb(60,107,130);
  background: -moz-linear-gradient(top, rgba(60,107,130,1) 0%, rgba(100,167,193,1) 100%);
  background: -webkit-linear-gradient(top, rgba(60,107,130,1) 0%, rgba(100,167,193,1) 100%);
  background: linear-gradient(to bottom, rgba(60,107,130,1) 0%, rgba(100,167,193,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c6b82',
  endColorstr='#64a7c1',GradientType=0 );
  border: 1px solid #497f97;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-family: Arial,sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-align: left;
  vertical-align: top;
}
#virtualhelper div.subBlock {
  display: block;
  margin-top: 18px;
  text-align: center;
}
#virtualhelper div.subBlock a.sub {
  padding:4px 10px 6px 10px;
  border:2px solid #b6d4e2;
  border-radius:5px;
  font-family: Arial,sans-serif;
  font-size:13px;
  font-weight:bold;
  color:#b6d4e2;
  text-decoration:none;
  opacity:0.5;
}
#virtualhelper div.subBlock a.sub:hover {
  padding:4px 10px 6px 10px;
  border:2px solid #fff;
  background:#fff;
  border-radius:5px;
  font-family: Arial,sans-serif;
  font-size:13px;
  font-weight:bold;
  color:#498cab;
  text-decoration:none;
  opacity:1;
}
div.comment strong, div.comment span {
  display: block;
  width: 100%;
  font-family: Arial,sans-serif;
}
div.comment span {
  padding-top: 5px;
 letter-spacing: -0.02em;
  line-height: 1.5em;
  font-family: Arial,sans-serif;
}
a#virtualHelper.close:not(:hover), a#virtualHelper.close:not(:target) {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;
  background-color: rgba(0,0,0,0.15);
  border-radius: 100px;
  box-shadow: none;
  border: none;
  overflow: hidden;
  box-shadow: none;
  opacity: 0.8;
}
a#virtualHelper.close:not(:hover):before, a#virtualHelper.close:not(:target):before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url('../img/sprite.svg');
  background-size: 204px 40px;
  background-repeat: no-repeat;
  background-position: -188px 0;
  zoom: 190%;
}
a#virtualHelper.close:hover:before,a#virtualHelper.close:target:before {
  opacity:0.7;
}
a#virtualHelper.comment {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 100;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  box-shadow:0 1px 2px #666;
  border-radius: 100px;
  overflow: hidden;
  transition: .3s;
  -webkit-animation: hoverWave linear 1s 7;
  animation: hoverWave linear 1s 7;
  -webkit-transition: opacity .08s linear,-webkit-transform .16s linear;
  transition: transform .16s linear,opacity .08s linear;
  transition: transform .16s linear,opacity .08s linear,-webkit-transform .16s linear;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  zoom: 90%;
}
a#virtualHelper.comment:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 5px 0 0 5px;
  background-image: url('../img/sprite.svg');
  background-size: 208px 40px;
  background-repeat: no-repeat;
  background-position: 0 0;
  zoom: 190%;
}
a#virtualHelper.comment:hover,a#virtualHelper.comment:target {
  background-color: #2980b9;
  -webkit-animation:RotateMotion linear 1s infinite;
  animation:RotateMotion linear 1s infinite;
  -webkit-transition: opacity .08s linear,-webkit-transform .16s linear;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
a#virtualHelper.comment:hover:before,a#virtualHelper.comment:target:before {
  background-image: url('../img/sprite.svg');
  background-size: 208px 40px;
  background-repeat: no-repeat;
  background-position: 0 -24px;
}
@keyframes RotateMotion {
  0%{rotate(0deg)}
  20%{rotate(20deg)}
  40%{rotate(0deg)}
  60%{rotate(-20deg)}
  80%{rotate(20deg)}
  100%{rotate(0deg)}
}
@-webkit-keyframes RotateMotion {
  0%{rotate(0deg)}
  20%{rotate(20deg)}
  40%{rotate(0deg)}
  60%{rotate(-20deg)}
  80%{rotate(20deg)}
  100%{rotate(0deg)}
}
@-moz-keyframes RotateMotion {
  0%{rotate(0deg)}
  20%{rotate(20deg)}
  40%{rotate(0deg)}
  60%{rotate(-20deg)}
  80%{rotate(20deg)}
  100%{rotate(0deg)}
}
a#virtualHelper.comment:hover {
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
div#openVirtualHelper.panel a {
  margin-left:10px;
}
div#openVirtualHelper.panel a:first-child {
  margin-top:10px;
}

@-webkit-keyframes GradientMotion {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes GradientMotion {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes GradientMotion {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
div#openFAQ.head, div#openVideo.head {
  position: relative;
  top: 0;
  left: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
}
div#openVirtualHelper.head span {
  display: inline-block;
  padding-top: 2px;
  padding-left: 12px;
  font-family: Arial,Verdana, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #fff;
  vertical-align: top;
}
div#openVirtualHelper.head span.hello {
  max-width:calc(100% – 70px);
}
div#openVirtualHelper.head span.hello b {
  position: relative;
  top: 0;
  margin-top: 0;
  padding-top: 0;
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: -0.03em;
}
div#openVirtualHelper.head span.hello small {
  display: block;
  margin-top: 2px;
  font-family: Arial,Verdana,sans-serif;
  font-size: 1em;
  line-height: 1em;
  font-weight: 520;
  color: rgb(255 255 255 / 90%);
  overflow: visible;
  letter-spacing: -0.01em;
}
div#openVirtualHelper.panel a {
  display: block;
  width: calc(100% – 42px);
  height: fit-content;
  margin-bottom: 1px;
  padding: 10px 15px;
  border: 1px solid #ffffff;
  border-radius: 0 8px 8px 8px;
  background: #fff;
  text-shadow: 0 1px 1px #fff;
  box-shadow: 0 1px 2px #cfcfcf;
  font-size: 1.05em;
  font-weight: 500;
  font-family: Arial,Verdana, sans-serif;
  color: #333;
  letter-spacing: 0;
  text-decoration: none;
  vertical-align: top;
}
div#openVirtualHelper.panel a.feedBack {
  display: block;
  width: fit-content;
  margin: 20px auto 15px calc(50% – 70px);
  padding: 6px 20px;
  border: 1px solid #adadad;
  box-shadow: 0 1px 1px #b5b5b5;
  border-radius: 100px;
  background: #f3f3f3;
  background: -moz-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
  background: -webkit-linear-gradient(top, #f3f3f3 0%,#e2e2e2 100%);
  background: linear-gradient(to bottom, #f3f3f3 0%,#e2e2e2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3',
  endColorstr='#e2e2e2',GradientType=0 );
  text-shadow: 0 1px 1px #fff;
  font-size: 13px;
  font-weight: bold;
  color: #111;
}
div#openVirtualHelper.panel a:hover {
  color: #fff;
  background: #56c556;
  border: 1px solid #43a543;
  text-shadow: none;
}
div#openVirtualHelper.panel a.feedBack:hover, div#openVirtualHelper.panel a.feedBack:target {
  background: #43a543;
  border: 1px solid #43a543;
  color: #fcfcfc;
  text-shadow: none;
}
div#openVirtualHelper.panel ul {
  list-style: none;
  margin-top: 10px;
  padding: 0 10px;
  overflow: hidden;
}
a#virtualHelper.comment:target a#virtualHelper.close:hover {
  opacity: 1;
  background-color:#61ae60;
  background-color:#61ae60;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
@media (min-height:768px) {
  div#openVirtualHelper.openForm {
    max-height:534px;
  }
  div#openVirtualHelper.panel a {
    width: calc(100% – 52px);
  }
  a#virtualHelper.close {
    position: fixed;
    bottom: 510px;
    left: auto;
    right: 32px;
    z-index: 1;
  }
}
@media(min-width:500px) {
  div#virtualhelper {
    width: 300px;
    height: 340px;
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    background: none;
    border-radius: 5px;
    box-shadow: none;
    display: none;
  }
}
@media (max-width:500px) {
  a#virtualHelper.comment {
    bottom: 20px;
    right: 20px;
    z-index: 10;
  }
  div#openVirtualHelper.openForm {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: #f5f5f5;
    border-radius: 0;
  }
  div#openVirtualHelper.head {
    width: 100%;
    height: 32px;
    border-radius: 0;
    padding: 7px 10px 15px 10px;
  }
  div.openForm:target div#openVirtualHelper.head {
    display: block;
    max-width: calc(100% – 20px);
  }
  div#openFAQ:target div#openVirtualHelper.head {
    display:block;
  }
  a#virtualHelper.close:not(:hover), a#virtualHelper.close:not(:target) {
    position: fixed;
    top: 12px;
    left: calc(100% – 40px);
    right: auto;
    z-index: 1;
    display: block;
    width: 30px;
    height: 30px;
    margin: 0;
    background-color: rgba(0,0,0,0.15);
    border-radius: 100px;
    box-shadow: none;
    border: none;
    overflow: hidden;
    box-shadow: none;
    opacity: 1;
  }
  div#openVirtualHelper.panel a {
    width: calc(100% – 48px);
  }
}
В файле CSS virtual-helper.css всего 600 строк исходного кода стилей, суммарно 13 234 символа без табуляции и пробелов необходимо и достаточно для адаптивного дизайна Виртуального помощника.
Используя процедуру компрессии кода CSS (аналогично примеру № 5), с применением CSS Compressor получим из исходного virtual-helper.css весом 17 Кб оптимизацию на 28,47% до результата 13 Кб (файл для оптимизации при загрузке virtual-helper-min.css).
То есть замена исходного на оптимизированный код CSS без потерь позволит сократить загрузку веб-страницы на 4 Кб.
Пример № 6. Фрагмент исходного кода HTML
Строка № 8
До оптимизации

После оптимизации
Пример № 6. Фрагмент исходного кода спрайта SVG для вывода пиктограмм
viewBox="0 0 1761 339"
 xmlns:xlink="http://www.w3.org/1999/xlink">

Спрайт в формате SVG размером 7 Кб выводит 9 пиктограмм в двух цветовых состояниях. Это относительно легкий вариант загрузки векторной графики и оптимальный для работы с веб-интерфейсом. Все фигуры описаны сущностью 
, содержащей ключевые точки моделирования объектов в двумерном пространстве и подключение класса присвоения цвета заливки (пример ниже):
class="fil0"
 d="{точки
}
"/>

В блоке 
 (в исходном коде документа SVG) представлены стили оформления для заданных классов:


Для вызова инфоблока Виртуальный помощник необходимо запрограммировать функцию вызова для открытия панели в раскрытом состоянии. Воспользуемся скриптом на языке JavaScript.
Исходный код JavaScript
Функция callForm в скрипте организует вызов окна панели VirtualHelper по уникальному идентификатору openVirtualHelper добавлением параметра block для свойства display. Функция по сущности является свитчером (от англ. switcher – переключатель в цепи из состояния Выключено в состояние Включено), т. е. меняет состояние свойства в состояние включения (видимости).

До включения вызовом из JavaScript
…

После включения вызовом из JavaScript
…

Вызов включения инфоблока VirtualHelper по идентификатору openVirtualHelper выполняется по клику на ссылку, визуально оформленную в виде синего кружка вспомогательной подсказки с литерой i как синонима info(rmation).

Рисунок 10.83 – Фрагмент HTML-страницы с выводом пиктограммы из спрайта для визуальной подсказки и вызова панели Виртуального помощника

Исходный код ссылки вызова Виртуального помощника в HTML

Для закрытия панели VirtualHelper по клику на кнопку в виде крестика используем функцию JavaScript:

Обработка события по клику (onclick) выполняется обращением к сущности, родительской относительно данной ссылки, с назначением параметра none (т. е. инструкция Выключить) для свойства display.

Детализируем этот фрагмент исходного кода HTML для понимания:

…

Явно следует из кода, что родительской сущностью над ссылкой Закрыть является 
 формы вывода инфоблока Виртуального помощника. Логически сводим эти функции в единое смысловое целое.
Переключатель Включено/Выключено 
Включение Виртуального помощника функцией callForm
Выключение Виртуального помощника обработкой события onclick

В ходе изучения примера № 6 мы получили производственным путем рабочий комплекс оптимизированного кода CSS + HTML для вывода Виртуального помощника с векторными элементами визуализации. Он отвечает запросам пользователей к горячим функциям веб-ресурса и обратной связи с возможностями масштабирования на экране ПК, планшета или смартфона (без потерь), расширения количества функций более 8 в списке вывода в открытой панели и экономии рабочего пространства в закрытом положении.
Преимущество: отсутствие внешнего кода JS-скриптов и CSS для визуализации Виртуального помощника позволяют не зависеть от внешних источников и развивать собственный модуль с учетом запросов пользователей.
Это показательный пример эффективности применения связки HTML + CSS для адаптивного дизайна, визуальной четкости элементов графики для веб-интерфейса и относительной простоты включения и отключения панели Виртуального помощника для удобства использования в работе с веб-сайтом.
Представленные примеры в пошаговом исполнении с детализацией и выбором решений направлены на формирование практических навыков в работе с масштабируемой векторной графикой (в формате SVG), владение инструментарием Corel Draw, моделирование фигур и экспорт в SVG с целью последующего технического использования в качестве графического компонента комплексной многослойной иллюстрации на основе форматов документа HTML и каскадных таблиц стилей CSS для адаптивной верстки и оформления слоев иллюстрации.
Термины, применяемые в веб-разработке, представлены с примерами практического использования.
Теоретическое знание спецификаций HTML, CSS, SVG и JavaScript первостепенно в ходе самостоятельной работы студента. Эти спецификации и умение оперировать тегами HTML, свойствами и классами наследования в CSS и т. д. необходимы для решения комплексных задач веб-дизайна.
Рекомендуемая литература
1. Спецификация языка разметки HTML 5.
Режим доступа: https://www.w3.org/TR/2011/WD-html5-20110405/
2. Спецификация каскадных таблиц стилей CSS3.
Режим доступа: https://www.w3.org/Style/CSS/Overview.ru.html
3. Спецификация формата SVG.
Режим доступа: https://www.w3.org/TR/SVG2/
4. Стандартные таблицы безопасных цветов Flat UI Colors.
Режим доступа: https://flatuicolors.com
5. Таблица совместимости формата SVG и версий популярных браузеров.
Режим доступа: https://caniuse.com/?search=svg
6. Google Fonts. Веб-сервис для выбора и подключения шрифтов к веб-страницам.
Режим доступа: https://fonts.google.com
Практическая часть