Создание лица коалы с использованием CSS Grid

Введение

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

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать сеточный макет для лица коалы;
• рисовать глаза коалы;
• рисовать нос коалы;
• рисовать румянцев на лице коалы.

🏆 Достижения

После завершения этого проекта вы сможете:

• использовать сеточный макет CSS для создания сложных дизайнов;
• размещать и стилизовать различные элементы внутри сетки;
• использовать свойства CSS, такие как border-radius и background-color, для создания собственных форм и дизайнов.

Настройка проекта

В этом шаге вы настроите проект и откроете файлы в редакторе.

Откройте папку проекта, которая содержит следующие файлы и директории:

├── styles.css
└── index.html

Здесь:

• index.html - главная страница.
• style.css - файл, в котором нужно добавить необходимые стили.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Для расположения частей лица коалы обратитесь к следующему сеточному рисунку:

Настройка сеточного макета

В этом шаге вы научитесь создавать сеточный макет для лица коалы.

1. Откройте файл styles.css в вашем редакторе кода.
2. Добавьте следующий CSS-код в .face, чтобы создать сеточный макет:

.face {
  z-index: 1;
  width: 430px;
  height: 380px;
  background: #a0abb6;
  border-radius: 50%;
  display: grid;
  grid-template-columns: 1fr repeat(4, 25px) 1fr;
  grid-template-rows: 50px repeat(2, 1fr) 50px;
  align-items: center;
}

Этот код создает сеточный макет с 6 столбцами и 4 строками. Передняя и задняя части лица коалы представляют собой два столбца равной ширины слева и справа, в то время как четыре средних столбца имеют ширину 25px. Верхняя и нижняя строки имеют высоту 50px, а две средние строки равны по высоте.

Нарисовать глаза

В этом шаге вы научитесь рисовать глаза коалы.

1. Добавьте следующий CSS-код, чтобы создать глаза:

.eye {
  width: 30px;
  height: 30px;
  background: #090b0e;
  border-radius: 50%;
  justify-self: center;
}

.eye.left {
  grid-area: 2/2/2/3;
}

.eye.right {
  grid-area: 2/5/2/6;
}

Этот код создает два круглых глаза, каждый размером 30px в ширину и 30px в высоту, с темным цветом (#090b0e) и закругленными углами в 50%. Свойство justify-self: center центрирует глаза по горизонтали внутри своих ячеек сетки. Свойства grid-area позиционируют левые и правые глаза в соответствующих ячейках сетки.

Нарисовать нос

В этом шаге вы научитесь рисовать нос коалы.

1. Добавьте следующий CSS-код, чтобы создать нос:

.nose {
  background: #3b464f;
  border-radius: 50% 50% 40% 40%;
  height: 100%;
  grid-area: 3/2/3/6;
}

Этот код создает элемент, имеющий форму носа, с темным цветом (#3b464f) и закругленными углами. Свойство border-radius дает носу округлую форму, при этом верхние углы имеют радиус закругления 50%, а нижние - 40%. Свойство height: 100% делает нос равным по высоте своей ячейки сетки, а свойство grid-area позиционирует нос в соответствующей ячейке сетки.

Нарисовать румянец

В этом шаге вы научитесь рисовать румянец на лице коалы.

1. Добавьте следующий CSS-код, чтобы создать румянец:

.blush.left {
  grid-area: 2/1/3/2;
  align-self: end;
  justify-self: end;
}

.blush.right {
  align-self: end;
  grid-area: 2/6/3/7;
}

Этот код создает два круглых элемента румянеца, каждый размером 40px в ширину и 30px в высоту, с светло-розовым цветом (#f6b9bf) и закругленными углами в 50%. Свойства grid-area позиционируют левые и правые элементы румянеца в соответствующих ячейках сетки, а свойства align-self и justify-self выравнивают элементы румянеца внутри своих ячеек сетки.

С этими шагами вы теперь завершили проект по рисованию лица коалы. Поздравляем!

Готовый результат показан ниже:

Резюме

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