От автора: поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так?
Некоторые примеры макетов из Grid by Example Рэйчел Эндрю с сайта
Энди Барефут создаёт великолепные и удобные макеты, которые так сильно отличаются от стандартного дизайна сайтов, при этом для их создания он использует CSS Grid. Он развивает данное направления, и я надеюсь дизайнеры и разработчики вдохновятся дизайном и кодом сайтов, который ещё до недавнего времени считали невозможным.
Адаптивная сетка книг
Перед тем как вникнуть в технические аспекты данного изображения, я хочу остановиться и оценить блестящий дизайн этой страницы. Формы и цвета сочетаются идеально, и он выбрал несколько отличных обложек книг, что только добавляет качества данной работе. Вот рабочий пен в действии.
Мы разберем следующие технические моменты:
Как он настроил сетку
Как он совместил ромбы вместе
Как он создал фигуры ромбов
Настройка сетки
Прежде всего, обратим внимание на минимум 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; }
}Медиа-запрос заставляет первый элемент всех чётных срок начинаться во втором столбце. Это даёт нам следующее (см. рисунок).
Здесь границы сетки показаны красным цветом, и каждый столбец и строка обозначены пунктирной линией. Далее мы рассмотрим, как он соединил ромбы вместе.
Соединяем фигуры вместе
Итак, мы видим, как сетка настроена, но как он заполнил её фигурами так, что они точно прилегают друг к другу, как на картинке ниже?
Два шага:
Сдвигаем каждую вторую строку, так чтобы она начиналась во втором столбце с помощью grid-column-start.
Устанавливаем параметр margin-top: -50% для всех объектов, чтобы сдвинуть их вверх на половину их высоты.
В демонстрации ниже показано, как это работает.
Вы можете видеть, как Энди берёт сетку с ромбами и сдвигает их, чтобы подогнать точно друг к другу. Белыми пунктирными линиями объединён каждый объект, и вы можете видеть, как они накладываются один на другой.
Создание фигур
Итак, когда мы узнали, как Энди расположил фигуры, давайте поговорим о том, как он создал их. Он создал фигуру за книгой с помощью элемента li:before и фигуры V-образной формы внизу с помощью элемента li:after. Наведите курсор на объект, чтобы разделить его на составные части.
Энди создаёт каждую фигуру с помощью clip-path, что означает, что ему не нужно беспокоиться о каких-либо преобразованиях, таких как поворот. Затем он используют отличный приём, с помощью которого вы можете использовать два фона для одного итого же элемента.
background-size: 50% 100%; background-position: left, right;
Первое значение background-size устанавливает ширину в половину ширины фигуры. Затем, используя background-position: left, right; он создаёт два фона, каждый прикреплённый к стороне. Порядок здесь имеет значение, так как он соответствует порядку свойства background-image.
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)));
Вот что говорит Энди о создании фигур с некоторыми приятными деталями: Я создал изображение в Affinity Designer, используя треугольную сетку в 30 градусов. У ромбов есть небольшой градиент цвета, примененный по короткой диагонали, так что цвет немного темнее в «углах», для усиления заметности 3D-эффекта.
Затем он оптимизировал это с помощью сайта SVGOMG и сделал CSS фон с помощью конвертера Майка Фоскетта. Два замечательных ресурса, которые заслуживают места у вас в закладках.
Стилизованная сетка портретов
Личный сайт Энди – это одно из моих любимых портфолио разработчиков. Вместо типичного адаптации настольного дизайна под мобильные устройства у сайта есть три разных версии: для ПК, для планшета и для мобильного телефона.
Три различных версии сайта AndyBarefoot.com. Каждая из которых создан с помощью CSS Grid
Мне особенно нравится дизайн версии для планшета, поэтому остановимся на том, как он создал его.
Ниже представлены поэтапно шаги, которые создают этот потрясающий макет. Белые пунктирные линии — границы каждого элемента li. Это всего лишь грубое представление, которое показывает нам технику в целом. Разберитесь в версии сайта Энди для планшетов, чтобы по настоящему понять это.
Итак, основные шаги:
Задать оттенок изображению filter: sepia(40%);
Создать Grid с красными элементами поверх изображения;
Наклонить сетку на 11 градусов (-11deg) и сдвинуть вверх;
Добавить пробелы (gap) между элементами Grid;
Разместить несколько прозрачных элементов, занимающих несколько столбцов;
Разместить изображение имени Энди в несколько столбцов;
Установить свойство box-shadow для каждого элемента Grid, чтобы заполнить пробелы между ними.
Энди использует единицы измерения vw для каждого из типов устройств, чтобы убедиться, что изображение его глаз всегда точно попадают в просвет между элементами Grid. И снова можно сказать о прекрасном исполнения дизайна.
Вот что вдохновляло Энди при разработке: С эстетической точки зрения я вдохновлялся чем-то вроде старых советских пропагандистских плакатов с красными и кремовыми цветами, а так же фильтром сепии на всех изображениях. С моим героическим выражением лица, будто советский герой, только что трудившийся в шахтах CSS кода. И что-то тому подобное.
Да, старый добрый CSSерп и Молот. Это отличное вдохновение и отличный конечный результат.
Заключение
Мы рассмотрели три примера, которые по-новому используют CSS Grid. Смещая начальный столбец или всю сетку целиком, можно получить фантастические результаты. Мне приятно наблюдать, как разработчики используют CSS Grid, поскольку она всё больше и больше внедряется при производстве сайтов.
Автор: Alex Trost
Источник: frontend.horse
Редакция: Команда webformyself.