Нестандартное мышление с CSS Grid

Нестандартное мышление с CSS Grid

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

Нестандартное мышление с CSS Grid

Некоторые примеры макетов из Grid by Example Рэйчел Эндрю с сайта

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

Адаптивная сетка книг

Нестандартное мышление с CSS Grid

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Мы разберем следующие технические моменты:

Как он настроил сетку

Как он совместил ромбы вместе

Как он создал фигуры ромбов

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

Прежде всего, обратим внимание на минимум HTML кода, с которым мы работаем. Энди добивается многого с помощью очень малого количества элементов DOM.

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

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

Нестандартное мышление с CSS Grid

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

Соединяем фигуры вместе

Итак, мы видим, как сетка настроена, но как он заполнил её фигурами так, что они точно прилегают друг к другу, как на картинке ниже?

Нестандартное мышление с CSS Grid

Два шага:

Сдвигаем каждую вторую строку, так чтобы она начиналась во втором столбце с помощью grid-column-start.

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

В демонстрации ниже показано, как это работает.

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

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

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

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

Первое значение background-size устанавливает ширину в половину ширины фигуры. Затем, используя background-position: left, right; он создаёт два фона, каждый прикреплённый к стороне. Порядок здесь имеет значение, так как он соответствует порядку свойства background-image.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Нестандартное мышление с CSS Grid

Шаблон созданный Лином Фишером с помощью сайта A Single Div

Изометрическое (объемное) изображение для магазина обуви

Возможно, кто-то бы пошутил про человека с фамилией Барефут (прим. авт., с англ — «босоногий»), который создаёт магазин обуви, но я слишком взрослый для таких приколов.

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

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

Нестандартное мышление с CSS Grid

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

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

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

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

Стилизованная сетка портретов

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

Нестандартное мышление с CSS Grid

Три различных версии сайта AndyBarefoot.com. Каждая из которых создан с помощью CSS Grid

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

Нестандартное мышление с 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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Технология CSS Grid

Руководство по адаптивной верстке

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.