1. Инфоблок, содержащий фон иллюстрации в коде HTML (с фиксированными размерами).
Оформление в стилях CSS задает радиальный темный градиент на контраст для инфоблока (см. на рис. 15.2 – слой № 1).
В данном случае с фиксированными размерами квадрата.
2. Графический спрайт с пиктограммами приложений на платформе iOS.
Графическая идея: показать разнообразие выбора мобильных приложений в каталоге веб-ресурса.
Каждая пиктограмма в модульной сетке спрайта фиксированного, равного прочим, размера, с равными отступами – с целью повтора на фоне блока иллюстрации без искажений между повторами по OX и OY. Визуально создает эффект множества приложений. Сохраняется в формате PNG с прозрачным фоном (см. на рис.15.2 – слой № 2).
3. Инфоблок радиального освещения с максимальной прозрачностью в центре и нулевой по углам градиента в рамках заданного квадрата иллюстрации (см. на рис.15.2 – слой № 3).
4. Слой маска с выемкой глифа загрузки для отображения нижних слоев фона, пиктограмм, освещения (см. на рис.15.2 – слой № 4).
Рисунок 15.4 – Создание слоя маски в векторном виде: из белого квадрата вырезаем фигурный глиф в форме символа загрузки (loading), пользуясь инструментарием векторного редактора Corel Draw
Подготовка изображения для отображения логотипа Apple в иллюстрации.
Рисунок 15.5 – Логотип Apple посередине и центру на дизайн-макете размером [512 × 512] px
5. Центральный элемент композиции – векторная пиктограмма apple.svg для позиционирования посередине и центру иллюстрации.
Задается стилями CSS с внутренней полупрозрачной тенью, со скругленной формой для качественного воспроизведения в композиции (см. на рис. 15.2 – слой № 5).
6. Результирующая визуализация многослойной иллюстрации представлена на рис. 15.3 – изображение № 6.
Далее рассмотрим представленные слои с точки зрения верстки HTML-кода и оформления стилями CSS для корректного позиционирования элементов и визуализации иллюстративного ряда.
Слой № 1. Инфоблок в коде HTMLПример кода HTML…
Чаще всего разработчики используют конструкцию для воспроизведения сложных иллюстративных блоков.В этом примере кода задана обертка инфоблока для задания формата и оформления иллюстрации. Класс.illustration, по идее, задает положение, размеры и фон блока в содержании HTML-страницы.
Инфоблок иллюстрации по ширине и высоте в пропорции имеет форму квадрата для четкого воспроизведения многослойной графики.
Пример кода HTML
…
В инфоблоке секции контента в теге
иллюстрация занимает размеры 500 × 500 пикселей.Пример кода CSSsection.content {
display: block;
width: 100%;
min-height: calc(100vh – 50px);
height: fit-content;
margin: 0;
padding: 20px;
background: #fff;
border: 0;
}
section.content div.illustration {
position: relative;
z-index: 0;
display: block;
max-width: 500px;
max-height: 500px;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
div#catalog.illustration:before {
content: "";
position: absolute;
z-index: 1;
display: block;
border-radius: 250px;
width: 498px;
height: 498px;
margin: 1px;
background: #5c6165;
background: -moz-radial-gradient(center, ellipse cover,
#5c6165 0%,#515355 100%);
background: -webkit-radial-gradient(center, ellipse cover,
#5c6165 0%, #515355 100%);
background: radial-gradient(ellipse at center, #5c6165 0%,
#515355 100%);
filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#5c6165', endColorstr='#515355',GradientType=1 );
}
Уточнения к коду блоков секции контента и вложенной иллюстрации1. Заданный блок section.content выводится на всю ширину с минимальной высотой – из расчета высоты фиксированного верхнего меню (размером 50 px по высоте), вычитаемой из 100 долей общей высоты экрана пользовательского устройства. Это дает возможность задать оптимальную высоту для вывода содержания даже с минимальным количеством строк. Свойство margin задает внешние отступы: 50 пикселей вертикального отступа сверху от меню до блока контента, т. е. вывод секции содержания именно с точки по OY после воспроизведения основного меню навигации, зафиксированного в шапке сайта.
2. Инфоблок иллюстрации выводится в пропорции квадрата. Это визуально позволяет использовать его в качестве как промо-иллюстрации, так и сопутствующей графики для рекламного слогана, воспроизводимых в первом экране для создания WOW-эффекта.
3. Вывод градиента вынесен в отдельный специальный класс с уникальным идентификатором по следующей причине: предполагается несколько подобных блоков иллюстраций на сайте – именно для этого специфическое оформление имеет определенный фон в виде заданного вертикального градиента.
Слой № 2. Графический спрайт с пиктограммами приложений на платформе iOSДля корректного восприятия с технической точки зрения слой спрайта с пиктограммами следует рассматривать в коде верстки HTML-документа с детализацией стилей CSS.
Код иллюстрации в HTML
Следующий инфоблок содержит слой с фоновым выводом спрайта пиктограмм.
…
Код CSS для оформления спрайта пиктограммsection.content div#catalog.illustration div.appsSprite {
position: relative;
z-index: 2;
display: block;
min-width: 500px;
min-height: 500px;
width: 100%;
height: 100%;
background-image: url("../img/apps-sprite.png");
background-size: 50% 50%;
background-repeat: repeat;
border: 1px solid #fff;
overflow: hidden;
}
Графическая идея: вывести множество пиктограмм путем уменьшения матрицы спрайта до 50% по ширине и высоте от исходных 100% и повторять по осям OX и OY, чтобы, даже при увеличении масштаба иллюстрации функцией Zoom In, сохранялись высокое качество и детализация изображения.
Слой № 3. Радиальное освещение блока иллюстрацииГрафическая идея: сфокусировать внимание зрителя в центре посередине иллюстрации для четкого восприятия рекламного графического сообщения.
Слой задается следующим инфоблоком в коде HTML:
…
Код стилей в CSSsection.content div#catalog.illustration div.appsSprite div.radialFade {
