Руководство по созданию цветных полос от края до края, которые соответствуют сетке макета

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

Смоделированные цвета фона с использованием linear-gradient()

Разнообразие цветов помогает ориентировать пользователей на разные части пользовательского интерфейса. Боковые панели часто содержат дополнительный контент, ссылки и возможности фильтрации. Цвет фона для боковых панелей может убедить посетителя в том, что это важно, но отделено от основного содержимого.

Руководство по созданию цветных полос от края до края, которые соответствуют сетке макета

NS1 использует светло-серый цвет для боковой панели.

Руководство по созданию цветных полос от края до края, которые соответствуют сетке макета

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

Сетки колонок, широкие экраны и от края до края

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

Широкоэкранные мониторы и современные ноутбуки имеют высокое разрешение экрана, превосходящее максимальную ширину стандартных размеров контейнера сетки. На момент написания данной статьи наибольшая ширина контейнера сетки по умолчанию для Bootstrap, Foundation и TailwindCSS составляет 1140 пикселей, 1200 пикселей и 1280 пикселей соответственно.

Как мы можем гарантировать, что фоновые цвета, назначенные столбцам, будут аккуратно расширяться «от края до края»? Используемые в прошлом решения включали в себя использование большого, абсолютно позиционированного псевдоэлемента(::before,::after) или вертикально повторяющихся фоновых картинок. У каждого из них есть ваши ограничения. Давайте упростим себе задачу.

Руководство по созданию цветных полос от края до края, которые соответствуют сетке макета

Композиция дизайна содержит правую панель, выходящую за пределы контейнера веб-сайта.

Использование linear-gradient() и математики

Я буду использовать в демонстрации систему сеток Bootstrap, но ее можно адаптировать к любому фреймворку.

В этом упражнении можно представить свойство CSS linear-gradient(), как переход одного цвета в другой, идущий слева направо от экрана. Мы сможем контролировать, где заканчивается первый цвет и где начинается второй.

К примеру, если мы хотим, чтобы два столбца цвета были равномерно разделены на экране, можно легко использовать значение перехода цвета linear-gradient() 50%. Оно разделит цветные столбцы пополам на экране любой ширины. В этом коде измените 50% на 75% или 90% или даже на значение в пикселях, чтобы лучше контролировать переходы цвета.

Это замечательно, но чаще всего нам нужны переходы цвета в соответствии с сеткой веб-сайта. Как можно это сделать, но при этом оставить градиент от края до края? Давайте объединим в миксине Sass linear-gradient(), calc() и математики.

Что нам необходимо знать?

Нашему миксину Sass надо знать некоторые базовые моменты. Их можно объявить при помощи переменных Sass.

Размер контейнера сетки

$container: 1140px;

Мы сопоставляем значение 1140px, которое по умолчанию использует Bootstrap, с переменной $container.

Число столбцов сетки

$gridColumns: 12;

Сколько всего столбцов в сетке?

При вызове миксин будет ожидать два аргумента с дополнительными необязательными аргументами:

  1. $cols: какое число столбцов должен охватывать первый цвет?
  2. $colorTwo: второй цвет в градиенте слева направо.
  3. $colorOne(необязательно): первый цвет в градиенте слева направо.(По умолчанию мы будем использовать прозрачный, поскольку нам часто нужен только цвет боковой панели).
  4. $colSelector(необязательно): класс столбца, который использует система сеток(в этом примере по умолчанию используется Bootstrap).
  5. $rowSelector(необязательно): класс строки, который использует система сеток(в этом примере по умолчанию используется Bootstrap).

Наш миксин выполняет деление, чтобы выяснить, какой процент $cols составляет от $gridColumns. Далее мы умножаем $container на этот процент, чтобы найти, где должен быть первый переход цвета.

$colPercent:$cols / $gridColumns;$colWidth: $colPercent * $container;

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

Назовем наш миксин fauxColumns. Помните наиболее важные аргументы:

@mixin fauxColumns($cols, $colorTwo, $colorOne: transparent)

Вызовем миксин и передадим некоторые значения.

@include fauxColumns(9, #ff675b, #d2e6ea);

«Я хотел бы приобрести цвета от края до края. #d2e6ea должен занимать 9 из 12 столбцов сетки. #ff675b должен занимать остальное пространство».

@mixin fauxColumns( $cols, $colorTwo, $colorOne: transparent,        $colSelector: 'col-',         $rowSelector: 'row') {                $colPercent: $cols / $gridColumns;    $colWidth: $colPercent * $container;.#{$rowSelector} > [class^='#{$colSelector}']:nth-child(1) {        background-image:             linear-gradient(                to bottom,                 $colorOne,                 $colorOne);    }       .#{$rowSelector} > [class^='#{$colSelector}']:nth-child(2)        {        background-image:             linear-gradient(                to bottom,                 $colorTwo,                 $colorTwo            );    }    @media (min-width: 768px) {        .#{$rowSelector}         > [class^="#{$colSelector}"]:nth-child(n) {            background-image: none;        }        background-image:             linear-gradient(                to right,                 $colorOne percentage($colPercent),                 $colorTwo 1%            );    }    @media (min-width: 1140px) {        background-image:             linear-gradient(                to right,                 $colorOne calc((50% - (#{$container} / 2) + #{$colWidth})),                 $colorTwo 1%            );    }}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *