Знакомство с созданием изображений на чистом CSS. Часть вторая, посложнее

Продолжение руководства по созданию изображений на чистом CSS. Теперь мы рады представить вам перевод второй части, в которой вы научитесь создавать баннер на CSS.

Некоторое время назад у нас уже выходил перевод первой части руководства по созданию изображений на чистом CSS. Теперь мы рады представить вам перевод второй части, в которой вы научитесь создавать баннер на CSS.

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

Во второй части руководства будет рассмотрено создание баннера.

Для этого будут использоваться те знания, которые вы можете почерпнуть из первой части:

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

Составные элементы

Вы уже, наверное, догадались, что для создания картинок на чистом CSS используются различные геометрические фигуры, которые и формируют финальное изображение.

Чем сложнее картинка, тем лучше нужно продумать положение всех CSS-элементов на странице.

Чтобы было легче разобраться в структуре изображения, можно разбить его на атомы (давайте назовём так самые маленькие элементы). Из атомов состоят молекулы, которые для нас представляют собрание атомов, то есть собрание меньших элементов.

Для лучшего понимания этой статьи предлагаем вам прочитать небольшую книгу Бреда Фроста «Atomic Design».

Рассмотрим это объяснение на примере изображения, которое будет использоваться на протяжении всей второй части руководства. На картинке две газеты и один круг. Причём газеты могут быть вполне отдельными изображениями.

Каждая газета состоит из прямоугольников и отдельной картинки. Элементы могут отделяться от статьи и друг от друга.

Чтобы вы не запутались, посмотрите на изображение ниже.

Организмы в виде чистых изображений на CSS представляют собой собрание молекул, которые образуют отдельное изображение.

Обратите внимание на ещё один пример:

В статье всё будет подробно объяснено, чтобы не создавать трудностей в понимании материала. Изображение будет рассматриваться в виде атомов, молекул и организмов.

Круг

Знакомство с созданием изображений на чистом CSS. Часть вторая, посложнее 1

Газета

Знакомство с созданием изображений на чистом CSS. Часть вторая, посложнее 2

Газета состоит из контейнера с картинкой (молекула), белого контейнера (атом) и прямоугольников (молекула). Прямоугольники могут быть разделены таким образом, что каждый из них станет атомом.

Контейнер с изображением состоит из следующих атомов: синий прямоугольник, голубой прямоугольник, два треугольника тёмно-коричневых и два треугольника светло-коричневых.
Другая газета — то же самое, но в цветовой гаммы.

Конечное изображение состоит из газеты в синих оттенках (организм), газеты в красных оттенках (организм) и круга в центре (организм).

HTML

Сначала нужно понять все компоненты, а потом уже перейти к их размещению.

Невидимый контейнер

Невидимый контейнер будет служить холстом для изображения. С помощью него будут позиционироваться остальные элементы. Он является родительским контейнером (div) для всех элементов.

			<body>

  <!-- невидимый контейнер -->
  <div class="box">

  </div>


</body>

Круг

Так как круг будет расположен в центре невидимого контейнера, то его будет проще всего позиционировать. Круг — дочерний элемент для невидимого контейнера, однако, он является родительским элементов для других контейнеров, которые в нём содержатся.

			<body>

 <!-- невидимый контейнер -->
 <div class="box">

  <!-- цвет фона -->
  <div class="overlay"></div>

    <div class="ball">

    </div>

 </div>


</body>

В первой статье использовалось копирование головы коалы для обеспечения надлежащего положения слоёв. В этой части мы будем делать то же самое с кругом, поэтому у нас будет копия, которая будет использоваться чуть позже для группирования всего «организма» круга.

«Организм» круг

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

HTML-код:

			<body>

 <!-- Невидимый контейнер -->
 <div class="box">

  <!-- Цвет фона -->
  <div class="overlay"></div>

    <div class="ball">

      <!-- «Организм» круг -->
      <div class="ball-copy">
        <div class="yellow-circle"> 
          <div class="star"></div> 
        </div>
      </div>
      <!-- Конец "организма" круг -->

    </div>

 </div>


</body>

Газеты

Газета с красными оттенками будет слева от круга. Разделим газету на составные: картинка (молекула) и прямоугольники (атомы).

			<div class="box">
 <div class="ball">
 <div class="newspaper-left"> 

      <!-- Строки газеты -->
        <div class="bar-1"></div>
        <div class="bar-2"></div>
        <div class="bar-3"></div>
        <div class="bar-4"></div>
     <!-- Конец строк газеты -->

      <!-- Блок с картинкой --> 
        <div class="image-box-left">
          <div class="sun"></div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
           <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          <div class="image-bar-left">
          </div>
        </div>
      <!-- Конец блока с картинкой -->

      </div>

      <!-- Круг должен быть здесь -->
 </div>
</div>

Все строки, состоящие из прямоугольников, могут быть разбиты на отдельные элементы:

			<!-- Строки газеты -->
        <div class="bar-1"></div>
        <div class="bar-2"></div>
        <div class="bar-3"></div>
        <div class="bar-4"></div>
<!-- Конец строк газеты -->

Аналогично картинка с пейзажем может быть разбита на атомы:

			<!-- Блок с картинкой--> 
        <div class="image-box-left">
          <div class="sun"></div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
           <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          <div class="image-bar-left">
          </div>
        </div>
<!-- Конец блока с картинкой -->

Газета справа состоит из тех же самых атомов, кроме оттенков.

HTML-код:

			<!-- Газета с оттенками синего -->
      <div class="newspaper-right">
      <!-- Строки газеты -->
          <div class="bar-1"></div>
          <div class="bar-2"></div>
          <div class="bar-3"></div>
          <div class="bar-4"></div>
       <!-- Конец строк газеты -->   

       <!-- Блок с картинкой -->
        <div class="image-box-right">          
          <div class="sun">
          </div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
          <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          <div class="image-bar-right">
          </div>
       </div>
       <!-- Конец блока с картинкой -->

      </div>
<!-- Конец газеты с оттенками синего  -->

Так выглядит полный HTML-код, который у вас должен получиться:

			<body>

<div class="box">
 <div class="ball">
  <div class="newspaper-left"> 

      <!-- Строки из прямоугольников -->
        <div class="bar-1"></div>
        <div class="bar-2"></div>
        <div class="bar-3"></div>
        <div class="bar-4"></div>
     <!-- Конец строк из прямоугольников -->

      <!-- Контeйнер с картинкой--> 
        <div class="image-box-left">
          <div class="sun"></div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
           <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          <div class="image-bar-left">
          </div>
        </div>
      <!-- Конец контейнера с картинкой -->

  </div>
  <!-- Конец газеты -->

      <!-- Круг -->
      <div class="ball-copy">
        <div class="yellow-circle"> 
          <div class="star"></div> 
        </div>
      </div>
      <!-- Конец круга -->

      <!-- Газета с оттенками синего -->
      <div class="newspaper-right">
      <!-- Строки из прямоугольников -->
          <div class="bar-1"></div>
          <div class="bar-2"></div>
          <div class="bar-3"></div>
          <div class="bar-4"></div>
       <!-- Конец строк из прямоугольников -->   

       <!-- Контейнер с картинкой -->
        <div class="image-box-right">        
          <div class="sun">
          </div>
          <div class="small-mountain-left">
          </div>
          <div class="small-mountain-right">
          </div>
          <div class="mountain-left">
          </div>
          <div class="mountain-right">
          </div>
          <div class="image-bar-right">
          </div>
       </div>
       <!-- Конец контейнера с картинкой -->

      </div>
  <!-- Конец газеты -->

 </div>
</div>

</body>

CSS

Body

			body{
  background: linear-gradient(rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0));
}

Для body будет добавлен только фон с линейным градиентом.

Для линейного градиента используется следующий синтаксис:

			background: linear-gradient(rgba value1, rgba value2)

Разбор значений RGBA выглядит следующим образом: процент красного, процент синего, процент зелёного и параметр непрозрачности.

Пример:

			rgba(19%, 19%, 19%, 0.8)

RGB — то же самое, только без альфа-канала.

Пример:

			rgb(19%, 19%, 19%)

Для этого образца мы будем использовать значения RGBA, чтобы оформить линейный градиент в качестве фона.

			body{
  background: linear-gradient(rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0));
}

Box

Параметры для невидимого контейнера останутся прежними с предыдущего урока:

			.box{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
}

Наложение слоёв

Разобравшись с градиентом, перейдем к наложению слоёв. Создадим копию слоя, чтобы поместить его поверх других. Для этого добавимz-index: 5 (самый верхний слой), чтобы убедиться, что всё расположено сверху.

Код:

			.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(72%, 98%, 87%, 0.75), rgba(72%, 98%, 87%, 0.75));
  z-index: 6;
}

Круг

Нужно отцентрировать его посередине. Для этого следует выбрать абсолютное позиционирование, определить правильный размер и поместить круг в центр, используя формулу, которая отцентрирует фигуру:

			.ball{
  position: absolute;
  width: 50%;
  height: 68%;
  top: 16%;
  left: 25%;
}

Мы получили данные для центрирования с помощью следующей формулы:

			(100–68)/2 = 16 -> top: 16% 
(100–50)/2 = 25 -> left: 25%

После центрирования круга нужно создать его копию для правильного расположения слоёв.

Затем нужно просто добавить трансформацию, чтобы создать круг border-radius: 50% и поставить значение 1 для z-index (нижний слой):

			.ball{ 
  position: absolute; 
  width: 50%; 
  height: 68%; 
  background: #127F9E; 
  border-radius: 50%; 
  top: 16%; 
  left: 25%;
  z-index: 1; 
}

«Организм» круг

Нужно создать копию круга, которая будет внешней синей окружностью:

			.ball-copy{
  width: 100%;
  height: 100%;
  position: absolute;
  background: #127F9E;
  border-radius: 50%;
  z-index: 2;
}

Теперь следует добавить жёлтую окружность, которая является дочерним элементом копии круга.

			.yellow-circle{
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  position: absolute;
  background: #FCC472;
  border-radius: 50%;
  z-index: 3; 
}

Нужно сделать его чуть меньше, чем синий круг, установив параметры высоты и ширины равные 80%. Нужно будет позиционировать его по формуле неподвижного центра, согласно которой нужно сделать 10%-ный отступ сверху и слева.
Далее мы трансформируем окружность с помощью border-radius: 50%. Жёлтая окружность имеет z-index , равный 3.

Параметры для звезды:

			.star{ 
  position: absolute; 
  width: 60%; 
  height: 60%; 
  top: 20%; 
  left: 20%; 
  background: #D44D4F; 
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
  z-index: 4; 
}

Нужен подходящий размер, поэтому установим для звезды 60%. Затем можно будет отцентрировать по формуле неподвижного центра, добавить фон, установить индекс z, равный 4, а потом трансформировать.

Так как звезда — более сложная фигура, чем прямоугольник, квадрат или круг, то для её создания можно воспользоваться специальным инструментом Clippy.

«Организм» газета

			.newspaper-left{
  position: absolute;
  bottom: -5%;
  left: -45%;
  background: #FDFFFF;
  width: 65%;
  height: 70%;
  z-index: 0;
  border-radius: 20px;
}

Начнём с газеты слева. Следует помнить, что теперь позиционировать газету нужно относительно круга. Для начала зададим подходящий размер:

			width: 65%;
height: 70%;

Нужно поместить газету немного ниже круга. Поэтому применяем следующее свойство: bottom:-5%. Нужно сделать так, чтобы газета как бы выглядывала из-за круга. Для этого установим следующее свойство: left:-45%. Путём проб и ошибок можно подобрать другие значения, если это не сработает корректно.

			bottom: -5%;
left: -45%;

Теперь нужно придать газете беловатый фон, а затем установить значение z-index, равное 0. Таким образом, газета займёт самую нижнюю позицию.

Самое важное — это заметить и запомнить, что в этом случае мы трансформируем этот элемент с помощью border-radius, устанавливая значения в пикселях (px). Это делается для того, чтобы лишь слегка округлить фигуру.

			border-radius: 20px;

Устанавливаем приблизительные параметры:

			.newspaper-left{ 
  position: absolute; 
  bottom: -5%; left: -45%; 
  background: #FDFFFF; 
  width: 65%; 
  height: 70%; 
  z-index: 0; 
  border-radius: 20px; 
}

Теперь перейдём к составляющей части газеты — к строкам из прямоугольников:

			.bar-1{
  position: absolute;
  top: 15%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-2{
  position: absolute;
  top: 35%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-3{
  position: absolute;
  top: 55%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-4{
  position: absolute;
  top: 75%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}

Это не должно быть сложным для понимания. Единственное, на что нужно обратить внимание — это на то, что нужно, чтобы bar-1 и bar-2 не были такими же широкими, как остальные. Так будет освобождено место для «молекулы» с картинкой.

Также нужно установить z-index, равным 5, чтобы правильно определить позицию слоя.

Контейнер с картинкой

			.image-box-left{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #D44D4F;
  top: 15%;
  left: 10%;
}

Контейнер с картинкой достоин иметь свою секцию, так как он состоит из большого количества элементов. Сначала нужно стилизовать контейнер, который будет содержать остальные дочерние элементы.

Мы работаем с простым квадратом, поэтому даём ему соответствующий размер и положение относительно белого контейнера газеты. После этого добавляется синий фон. Затем стилизуем ещё один дочерний элемент (атом) — солнце.

			sun{
  position: absolute;
  width: 15%;
  height: 15%;
  background: #F9CB49;
  border-radius: 50%;
  top:15%;
  right: 45%;
  z-index: 5;
}

Таким образом, мы делаем небольшой жёлтый круг, располагающийся относительно контейнера с картинкой.

Теперь нужно создать маленькую гору с помощью двух треугольников, смотрящих в разные стороны:

			.small-mountain-left{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 24%;
  height: 40%;
  background: #AF7B53;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}

small-mountain-left — треугольник с более тёмным коричневым фоном. Кстати, в этот раз снова использовался инструмент Clippy.

При трансформации нужно перетащить верхнюю точку треугольника вправо. Таким образом, вы получите small-mountain-right — треугольник, направленный в другую сторону.

			.small-mountain-right{
  position: absolute;
  bottom: 0%;
  left: 22%;
  width: 24%;
  height: 40%;
  background: #AB936D;
  -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}

mountain-left и mountain-left будут различаться только по высоте, ширине и расположению.

			.mountain-left{
  position: absolute;
  bottom: 0%;
  right: 34%;
  width: 34%;
  height: 60%;
  background: #AF7B53;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}
.mountain-right{
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 35%;
  height: 60%;
  background: #AB936D;
  -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}

Наконец, мы дошли до прямоугольника над горизонтом. Он будет занимать всю ширину контейнера и будет немного светлее, чем его родительский элемент.

			.image-bar-left{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #DD7677;
  bottom: 0%;
}

Так должен выглядеть код контейнера с рисунком на финальном этапе:

			.newspaper-left{
  position: absolute;
  bottom: -5%;
  left: -45%;
  background: #FDFFFF;
  width: 65%;
  height: 70%;
  z-index: 0;
  border-radius: 20px;
}
.bar-1{
  position: absolute;
  top: 15%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-2{
  position: absolute;
  top: 35%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-3{
  position: absolute;
  top: 55%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-4{
  position: absolute;
  top: 75%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.image-box-left{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #D44D4F;
  top: 15%;
  left: 10%;
  animation: pulse 5s infinite;
}
.image-bar-left{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #DD7677;
  bottom: 0%;
}
.small-mountain-left{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 24%;
  height: 40%;
  background: #AF7B53;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}
.small-mountain-right{
  position: absolute;
  bottom: 0%;
  left: 22%;
  width: 24%;
  height: 40%;
  background: #AB936D;
  -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}
.mountain-left{
  position: absolute;
  bottom: 0%;
  right: 34%;
  width: 34%;
  height: 60%;
  background: #AF7B53;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}
.mountain-right{
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 35%;
  height: 60%;
  background: #AB936D;
  -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}
.sun{
  position: absolute;
  width: 15%;
  height: 15%;
  background: #F9CB49;
  border-radius: 50%;
  top:15%;
  right: 45%;
  z-index: 5;
}

Теперь пришло время поработать над правой газетой, цветом контейнера с изображением и прямоугольником над горизонтом.

			.newspaper-right{
  position: absolute;
  top: -5%;
  right: -45%;
  background: #FDFFFF;
  width: 65%;
  height: 70%;
  z-index: 4;
  border-radius: 20px;
}

Изменения в газете справа коснутся лишь z-index (ведь она будет расположена выше всех). Также мы просто отразим картинку.

image-box-right изменяет фон картинки на синий.

			.image-box-right{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #127F9E;
  top: 15%;
  left: 10%;
  animation: pulse2 5s infinite;
}

Похожие действия выполняем для image-bar-right (нижний прямоугольник), который должен иметь более светлый оттенок синего.

			.image-bar-right{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #75CEF2;
  bottom: 0%;
}

Фон

Теперь нужно обновить порядок наложения элементов и убедиться, что ни один из «атомов» не находится ниже background.

			background: linear-gradient(rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0));

Так должен выглядеть полный CSS-код:

			body{
  background: linear-gradient(rgba(72%, 98%, 87%, 0.9), rgba(72%, 98%, 87%, 1.0));
}
.box{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
}
.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(72%, 98%, 87%, 0.75), rgba(72%, 98%, 87%, 0.75));
  z-index: 6;
}
.ball{
  position: absolute;
  width: 50%;
  height: 68%;
  background: #127F9E;
  border-radius: 50%;
  top: 16%;
  left: 25%;
  z-index: 1; 
}
.ball-copy{
  width: 100%;
  height: 100%;
  position: absolute;
  background: #127F9E;
  border-radius: 50%;
  z-index: 2;
}
.yellow-circle{
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  position: absolute;
  background: #FCC472;
  border-radius: 50%;
  z-index: 3; 
}
.star{
  animation: spin();
  position: absolute;
  width: 60%;
    height: 60%;
  top: 20%;
  left: 20%;
    background: #D44D4F;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.newspaper-right{
  position: absolute;
  top: -5%;
  right: -45%;
  background: #FDFFFF;
  width: 65%;
  height: 70%;
  z-index: 4;
  border-radius: 20px;
}
.newspaper-left{
  position: absolute;
  bottom: -5%;
  left: -45%;
  background: #FDFFFF;
   width: 65%;
  height: 70%;
  z-index: 0;
  border-radius: 20px;
}
.bar-1{
  position: absolute;
  top: 15%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-2{
  position: absolute;
  top: 35%;
  left: 50%;
  width: 40%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-3{
  position: absolute;
  top: 55%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}
.bar-4{
  position: absolute;
  top: 75%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: #CCCCCC;
  z-index: 5;
}

.image-box-left{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #D44D4F;
  top: 15%;
  left: 10%;
  animation: pulse 5s infinite;
}
.image-box-right{
  position: absolute;
  height: 35%;
  width: 35%;
  background: #127F9E;
  top: 15%;
  left: 10%;
  animation: pulse2 5s infinite;
}
.image-bar-left{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #DD7677;
  bottom: 0%;
}
.image-bar-right{
  position: absolute;
  height: 15%;
  width: 100%;
  background: #75CEF2;
  bottom: 0%;
}
.small-mountain-left{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 24%;
    height: 40%;
    background: #AF7B53;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}
.small-mountain-right{
  position: absolute;
  bottom: 0%;
  left: 22%;
  width: 24%;
    height: 40%;
    background: #AB936D;
    -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}
.mountain-left{
  position: absolute;
  bottom: 0%;
  right: 34%;
  width: 34%;
    height: 60%;
    background: #AF7B53;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  z-index: 5;
}
.mountain-right{
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 35%;
    height: 60%;
    background: #AB936D;
    -webkit-clip-path: polygon(0 1%, 0% 100%, 100% 100%);
clip-path: polygon(0 1%, 0% 100%, 100% 100%);
  z-index: 5;
}
.sun{
  position: absolute;
  width: 15%;
  height: 15%;
  background: #F9CB49;
  border-radius: 50%;
  top:15%;
  right: 45%;
  z-index: 5;
}

Заключение

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