Векторная графика для начинающих: теория и практика технического дизайна — страница 27 из 31

    a.illustration div.object {
      zoom: 95%;
    }
    a.illustration h2 {
      display: block;
      width: fit-content;
      margin: 0;
      padding: 70px 0 0 0;
      font-size: 28px;
      font-family: Arial,sans-serif;
      color: #fff;
      text-align: left;
    }
}
@media (max-width:375px) and (min-width:374px) {
    a.illustration div.object {
      float: none;
      display: inline-block;
      width: 244px;
      height: 342px;
      margin: 10% 20% 0 calc(50% – 122px);
      background-image: url('../img/svg/object.svg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      zoom: 100%;
    }
    a.illustration h2 {
      display: block;
      width: fit-content;
      margin: 0;
      padding: 70px 0 0 0;
      font-size: 28px;
      font-family: Arial,sans-serif;
      color: #fff;
      text-align: left;
    }
}
@media (max-width:360px) and (min-width:359px) {
    a.illustration h2 {
      display: block;
      width: fit-content;
      margin: 0;
      padding: 60px 0 0 0;
      font-size: 28px;
      font-family: Arial,sans-serif;
      color: #fff;
      text-align: left;
    }
}

Оформление геометки с вложенным фото с фиолетовым фоном

Рисунок 19.9 – Интерпретация с плоским фиолетовым фоном за полупрозрачным слоем с изображением в формате PNG

Оформление объекта геометки в CSS

a.illustration div.object {
    display: inline-block;
    width: 244px;
    height: 342px;
    float: right;
    margin: 60px 20% 0 0;
    background-image: url(‘../img/svg/object.svg’);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
a.illustration div.object i.girl {
    border: none;
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 200px;
    margin: 58px auto;
    background-image: url(‘../img/png/girl.png’);
    background-size: cover;
    background-color: #9d24d9;
    background-repeat: no-repeat;
    box-shadow: inset 1px 1px 5px #444;
    border: 1px solid #9d24d9;
}

Рисунок 19.10 – Интерпретация с градиентным фиолетовым фоном за полупрозрачным слоем с изображением в формате PNG

Оформление объекта геометки в CSS

a.illustration div.object {
    display: inline-block;
    width: 244px;
    height: 342px;
    float: right;
    margin: 60px 20% 0 0;
    background-image: url('../img/svg/object.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
a.illustration div.object i.girl {
    position: relative;
    z-index: 0;
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 200px;
    margin: 58px auto;
    background-size: cover;
    background-color: #9d24d9;
    background-repeat: no-repeat;
    box-shadow: inset 1px 1px 5px #444;
    border: 1px solid #9d24d9;
    background: rgb(153,24,132);
    background: -moz-linear-gradient(top, rgba(153,24,132,1) 0%,
    rgba(221,42,193,1) 100%);
    background: -webkit-linear-gradient(top, rgba(153,24,132,1)
    0%,rgba(221,42,193,1) 100%);
    background: linear-gradient(to bottom, rgba(153,24,132,1) 0%,
    rgba(221,42,193,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#991884', endColorstr='#dd2ac1',
    GradientType=0 );
    border: none;
}
a.illustration div.object i.girl:before {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    width: 128px;
    height: 128px;
    background-image: url('../img/png/girl.png');
    background-size: cover;
    background-color: transparent;
    background-repeat: no-repeat;
    border-radius: 200px;
}

Рисунок 19.11 –  Вариант решения многослойной композиции иллюстрации с применением псевдокласса

Вариант решения с псевдоклассом

a.illustration 

div.object i.girl:before задает многослойность PNG изображения, где объект находится по глубине выше (z-index:1), чем градиентный фон (z-index:0).

Результат: архив с папкой проекта и отчет с ответами на вопросы преподавателя.

Оценка качества исполнения практикума

1. Общее время на выполнение задачи не должно превышать 1,5 ч.

2. Исходный код верстки должен быть проверен на валидаторах HTML и CSS.

3. Адаптивная верстка иллюстрации должна соответствовать визуализации (рис. 19.2).

1. Визуализация иллюстрации на экране ПК размером [1280 × 1024] px

2. Визуализация иллюстрации на экране Nest Hub размером [1024 × 600] px