Веселье с CSS

Макет iPhone 11 с CSS

Создано с использованием Flexbox, CSS Grid и свойства position

Учитывая шумиху вокруг последних анонсов Apple, я хотел сделать что-нибудь интересное с CSS на этой неделе в связи с этим. В этой статье я использую CSS и HTML для создания макета телефона. Есть улучшения, которые нужно внести, но вот моя версия 1. Комментарии о том, как ее улучшить, приветствуются!

Планирование

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

Сбор данных и контента

Я начинаю с определения размеров телефона, выполнив поиск в Google.

  • высота: 150,9 мм
  • ширина: 75,7 мм

Далее я ищу официальные обои, выпущенные Apple. Есть что-то похожее на официальные обои на 9to5mac.

Наконец, я загружаю несколько значков приложений с веб-сайта Apple.

Кодирование

В этом проекте я одновременно работаю над HTML и CSS.

Чехол для телефона и экран

Сначала я начинаю создавать контейнер телефона.

Я использую flex для своего тела, чтобы центрировать изображение. Это добавляет немного отзывчивости, чтобы телефон оставался в центре независимо от размера браузера.

Чтобы добиться 3D-эффекта контура телефона, я использую border: 10px back ridge на корпусе телефона. position: relative добавляется для последующего использования.

Далее втыкаю обои в телефон. Чтобы обои покрывали всю поверхность, я использую background-size: cover. box-sizing: border-box, чтобы мои обои оставались в пределах размера корпуса телефона даже после добавления отступов.

Следующая часть — часть CSS Grid из строк 32–41. Я использую the grid-name-template , чтобы мне было проще «размещать» значки приложений(PS: нет необходимости создавать 6 рядов, так как в итоге я использовал только три ряда).

Время, прием, Wi-Fi и панель батареи

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

Затем я добавляю область сетки к верхним элементам на экране телефона (время, полоса приема, полоса Wi-Fi и батарея). Эта часть представляет собой множество ручных настроек, чтобы привести div в правильное положение.

Программы

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

Все эти значки приложений вставляются в виде img файлов. Я заключаю их в div, чтобы использовать псевдоэлемент ::after для добавления в имя приложения. ::after создает псевдоэлемент, который является последним дочерним элементом выбранного элемента.

Каждый div является элементом сетки и имеет свое место в сетке. Единственная проблема, с которой я столкнулся, — это попытка выяснить, как использовать имя сетки для наложения одного элемента сетки на другой. В конце концов, я использую синтаксис grid-column-start и -end для его разрешения.

Затем пришло время добавить звуковую панель и камеру чуть ниже корпуса телефона.

Я использую контейнер, чтобы обернуть и панель динамиков, и камеру, чтобы уменьшить объем работы по их перемещению в нужное положение.

Кнопки громкости, звонка и режима ожидания

Наконец, это последние штрихи к оборудованию.

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

И кнопка звука, и кнопка режима ожидания даны position: absolute, чтобы я мог перемещать их по бокам телефона.

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