Мыслить шире вместе с CSS GRID

Поддержка CSS Grid в современных браузерах открыла новые возможности вёрстки, как никогда раньше. Мы можем создавать более сложные дизайны с меньшим количеством элементов, в сравнении с Flexbox. Но когда вы думаете о CSS Grid, вы обычно думаете о компонентном макете, верно?

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

Responsive Book Grid

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

А вот и сам код в действии

See the Pen
Responsive CSS Grid — Books
by Andy Barefoot (@andybarefoot)
on CodePen.

Мы разберем эти техники:

  • Как он настраивает сетку
  • Как он соединяет ромбы вместе
  • Как он создаёт ромбы

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

Для начала взгляните на базовый HTML код, с которым мы работаем. Энди реализует многое всего с несколькими DOM элементами.

<ul>
  <li>
    <img src="/book01.jpg" alt="" />
  </li>
  <li>
    <img src="/book02.jpg" alt="" />
  </li>
  <!-- Repeat ~70 times   -->
</ul>

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

/*
 Set default number of columns for smallest viewport.
 3 columns = 1 item per row
 */
:root {
  --columns: 3;
}

/* Make equally sized columns based off --columns variable */
ul {
  grid-template-columns: repeat(var(--columns), 1fr);
}

/* Each list item spans 2 columns */
li {
  grid-column-end: span 2;
}

/*
  This is what staggers every other row to the right.
  Default is 2n, or every other for very small screens.
 */
li:nth-child(2n) {
  grid-column-start: 2;
}

/*
  The media query for 4 items per row.
*/
@media (min-width: 1200px) {
  :root {
    --columns: 9;
  }
  li:nth-child(6n-2) {
    grid-column-start: auto;
  }
  li:nth-child(8n-3) {
    grid-column-start: 2;
  }
}

Медиа-запрос заставляет первый элемент всех четных строк начинаться во втором столбце. Это дает нам что-то вроде этого.

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

Соединение ромбов вместе

Итак, мы видим, как устроена сетка, но как он так идеально соединяет их вместе?

Два шага:

Сдвиньте каждую вторую строку так, чтобы она начиналась во втором столбце: gridcolumnstart: 2.

Установите margintop: -50% для всех элементов списка, чтобы сместить их на половину их высоты.

Вот демонстрация, чтобы увидеть это в действии.

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

Создание фигур

Теперь, когда мы знаем, как Энди расставляет фигуры, давайте поговорим о том, как он их создает. Он создает фигуру позади книги с помощью псевдоэлемента li: before и V-образную форму внизу с элементом li: after. Наведите курсор, чтобы разделить части.

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

background-size: 50% 100%;
background-position: left, right;

Первое значение backgroundsize устанавливает ширину в половину формы. Затем с помощью backgroundposition: left, right; он создает два фона, каждый из которых прикреплен к краю. Порядок здесь имеет значение, поскольку он соответствует порядку свойства backgroundimage:

background-image: linear-gradient(45deg, var(--pink) 40%, var(--green) 40%),
  linear-gradient(-45deg, var(--pink) 40%, var(--green) 40%);

Энди изучил эту технику, покопавшись в коде одной из превосходных работ Линн Фишер Single Div. Это также послужило ему источником вдохновения для дизайна.

Узор, созданный Линн Фишер с помощью A Single Div.

Изометрическиое отображение обуви

Кто-то может пошутить над человеком по имени Босоногий, который делает галерею обуви, но я слишком взрослый, чтобы каламбуить.

И снова Энди придумал блестящий способ отображения продуктов на странице.

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

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

Что действительно продает эти товары, так это фоновое изображение, которое он использует для создания кубов.

Он повторяется вместе с количеством столбцов благодаря этой строке CSS.

background-size: calc(200% / (var(--columns)));

—columns устанавливается с медиа-запросами точно так же, как с книжной сеткой ранее.

Энди о создании фигур с некоторыми штрихами:

Я создал изображение в Affinity Designer, используя треугольную сетку с углом 30 градусов. У ромбиков есть небольшой градиент цвета, примененный к короткой диагонали, так что цвет немного темнее в «углах», чтобы сделать 3D-эффект немного более заметным.

Затем он оптимизировал его с помощью  SVGOMG и сделал его фоном CSS с помощью конвертера Майка Фоскетт. Два замечательных ресурса, которые заслуживают места в вашей папке закладок.

Маскированная портретная сетка

Персональный веб-сайт Энди — одно из моих любимых портфолио разработчиков. Вместо типичного перехода дизайна с настольного на мобильный у сайта есть три разных версии: настольная, версия для планшетов и мобильная версия.

Мне особенно нравится дизайн версии для планшета, поэтому давайте сосредоточимся на том, как он ее создал.

Вот анимированная пошаговая разбивка, этого потрясающего макета. Белые пунктирные линии обозначают границы каждого ли в пьесе. Это всего лишь грубые наброски, чтобы показать вам общие техники. Покопайтесь на сайте Энди в размерах «планшетов», чтобы по-настоящему добиться успеха.

«Шаги» для приведенной выше разбивки:

  • Тонируем изображение фильтром: sepia (40%);
  • Создайте сетку поверх изображения с красными элементами
  • Наклоните сетку на -11 градусов и сдвиньте вверх
  • Добавьте отступ, чтобы между элементами оставалось пространство
  • Начните размещать прозрачные элементы, охватывающие несколько столбцов
  • Поместите элементы, содержащие имя Энди, в несколько столбцов
  • Добавьте тень к каждому элементу, чтобы заполнить пробел

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

И снова мы должны сказать о великолепном дизайне этой работы.
Вот Энди, который вдохновил меня на дизайн.

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

Ах да, старый Серп и CSS-Молот. Это отличное вдохновение и отличный конечный результат.

Заключение

Мы проверили три замечательные части, в которых все по-новому используют CSS Grid. Смещая начальный столбец или всю сетку, вы можете получить довольно фантастические результаты. Я рад видеть новые способы использования CSS Grid, которые внедряются на все большем количестве производственных сайтов.

Большое спасибо Энди Бэрфуту за то, что он поговорил со мной и позволил мне погрузиться в его невероятную работу. Потратьте некоторое время на то, чтобы покопаться в его великолепных демоверсиях CodePen, загляните на его великолепный веб-сайт и подпишитесь на него в Twitter.

Перевод статьи  ALEX TROST

И еще, не забудьте подписаться на наш телеграм-канал, чтобы вы всегда были вкурсе новых статей, книг и курсов 😉

Оставьте ответ

comment-avatar

*