Веселье с 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. Это был забавный проект, хотя и несколько утомительный к концу из-за ручной настройки элементов.