Градиенты — Основы верстки контента

Точки остановки градиента
Радиальный градиент
Подбор цветов для градиента

Цвет — сильное выразительное средство при создании сайтов. Являясь дополнением к расположению, цвет создает настроение, помогает быстро найти нужный участок информации и так далее. Вы уже умеете устанавливать цвет текста с помощью color, создавать фон с помощью свойства background. Но до этого цвет был сплошным, то есть использовался только один цвет в свойстве.

Для выделения участка контента можно применять не только один цвет, а смесь из нескольких переходящих друг в друга цветов. В дизайне существует понятие «градиент» — заливка, состоящая из нескольких цветов, которые плавно переходят друг в друга через промежуточные цвета. Конечно, понятие «плавно» не всегда верно, но это распространенный вариант. Посмотрите на пример градиента, который идет от оранжевого к желтому цвету:

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

Разберем, как созданы оба градиента. Первый вариант — переход двух цветов, для создания которого используется функция linear-gradient(). Функция создает, исходя из названия, линейный градиент. Линейный обозначает, что цвета переходят из одного в другой под некоторым заданным углом. Вот как выглядит переход оранжевого и желтого цвета из первого примера:

/*
 #ff9800 — Оранжевый цвет
 #ffeb3b — Желтый цвет
*/

.gradient {
  background: linear-gradient(#ff9800, #ffeb3b);
}

Сразу стоит пояснить, что градиенты устанавливаются для свойства background-image, но, для экономии места, все примеры будут записаны в обобщенном свойстве background. При использовании градиентов доступны все остальные свойства, такие как background-size.

Из чего состоит функция linear-gradient():

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

Количество цветов, которые используются в градиенте, ограничивается фантазией. Цветов может быть 2, 3, 4, 5 и так далее. Дизайнеры не используют одновременно много цветов, чтобы не превращать блок в мешанину, за которой теряется контент. Например, создадим градиент из четырех цветов:

.gradient {
  background: linear-gradient(red, green, blue, yellow);
}

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

Рассмотрим второй пример с карточкой товара:

.gradient {
  background: linear-gradient(45deg, #4158d0 0%, #c850c0 40%, #ffcc70 90%);
}

Здесь впервые встречается угол наклона градиента в 45 градусов. Это значение определяет, как пойдет градиент. Если не указать угол явно, то он будет равен 180 градусов.

Вот пример значений углов, которые встречаются в практике:

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

Вернемся к примеру с градиентом карточки:

.gradient {
  background: linear-gradient(45deg, #4158d0 0%, #c850c0 40%, #ffcc70 90%);
}

Точки остановки градиента

Разобрав угол заливки можно заметить конструкцию вида #цвет процент. Что обозначает процент? Чтобы лучше разобраться в этом, создадим следующий пример:

.gradient {
  background:
    linear-gradient(
      #03001e 0%,
      #03001e 25%,
      #7303c0 25%,
      #7303c0 50%,
      #ec38bc 50%,
      #ec38bc 75%,
      #fbc6ec 75%,
      #fbc6ec 100%
    );
}

Вопрос очевиден: «Что здесь вообще происходит? И почему создано 4 фона с помощью одного свойства?». Разберемся по порядку!

Цвета в градиентах распределяются автоматически. Если указано три цвета для градиента, то браузер автоматически, равномерно, распределит все цвета по площади блока, примерно по 33.3% от размера блока на каждый цвет. В дизайне редко применяется такое распределение пространства, так как существует главный и дополнительные цвета. Главный цвет, как понятно по названию, занимает больше площади, чем остальные и CSS позволяет указать, в каких пропорциях должен распределяться цвет внутри блока.

Проценты после цвета обозначают точку остановки или color stop, то есть точки, в которых происходит начало и конец цвета в градиенте, например #03001e 0%, #03001e 25% обозначает, что цвет #03001e имеет две точки остановки: в самом начале градиента и по достижению 25% от длины градиента.

Следующая часть записи: #7303c0 25%, #7303c0 50%. Обратите внимание, что цвет #7303c0 начинается с той же позиции, где и закончился предыдущий цвет. Это и создает резкий переход цветов без смешения. Такой пример наглядно показывает, как создаются точки остановки градиента, а значит можно вернуться к прошлому примеру:

.gradient {
  background: linear-gradient(45deg, #4158d0 0%, #c850c0 40%, #ffcc70 90%);
}

#4158d0 — появляется с самого начала градиента и плавно переходит в следующий цвет
#c850c0 — появляется с почти половины градиента и переходит в следующий цвет
#ffcc70 — последний почти в конце градиента

Можно увидеть конкретные точки переходов, если для каждого цвета установить начальные и конечные точки остановки:

.gradient {
  background:
    linear-gradient(
      45deg,
      #4158d0 0%,
      #4158d0 40%,
      #c850c0 40%,
      #c850c0 90%,
      #ffcc70 90%,
      #ffcc70 100%
    );
}

Кстати, такой эффект тоже часто используется на сайтах :)

Для уменьшения количества кода можно использовать то, что значения 0% и 100% будут стоять по умолчанию для первого и последнего цвета соответственно. Ведь градиент начинается с нулевой точки и заканчивается в последней. Код из прошлого примера сокращается так:

.gradient {
  background:
    linear-gradient(
      45deg,
      #4158d0 40%,
      #c850c0 40%,
      #c850c0 90%,
      #ffcc70 90%
    );
}

С помощью линейных градиентов разработчики могут создавать так называемые «паттерны» — повторяющиеся изображения, которые можно стыковать друг с другом. Например, с помощью градиентов можно создать чередующиеся полосы:

Что происходит в этом градиенте? Он указан следующим образом с использованием функции repeating-linear-gradient():

.gradient-repeating {
  background:
    repeating-linear-gradient(
      #ffeb3b,
      #ffeb3b 10%,
      #ff9800 10%,
      #ff9800 20%
    );
}

В этом примере градиент указан до 20% от всей ширины блока. При использовании функции linear-gradient() все, что больше 20% от размера блока станет одного цвета, а конкретно оранжевого, так как он указан последним. repeating-linear-gradient() вместо этого повторит весь градиент до тех пор, пока есть место в блоке. Это удобно, если нужно создать повторяющийся градиент.

При создании более сложных паттернов можно использовать не проценты, а пиксели. Это поможет четче указать размер каждого цвета внутри блока:

Радиальный градиент

Радиальный градиент, как видно из названия, создает круговой градиент, где центр является началом градиента. Создадим радиальный градиент из двух цветов. Для этого используется функция radial-gradient():

.gradient {
  background: radial-gradient(#4158d0, #c850c0);
}

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

Форма: circle или ellipse. По умолчанию радиальный градиент имеет форму ellipse
Размер:
- farthest-corner — Градиент распространяется до самого дальнего угла блока. Это значение по умолчанию
- closest-side — Градиент распространяется до ближайшей границы блока
- closest-corner — Градиент распространяется до ближайшего угла
- farthest-side — Градиент распространяется до самой дальней границы блока

По описаниям может непонятно о чем идет речь, поэтому стоит рассмотреть варианты на примерах. Начнем с формы градиента:

А теперь размеры:

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

Как и при использовании линейного градиента, радиальный позволяет работать с точками остановки:

.gradient {
  background:
    radial-gradient(
      circle,
      #4caf50 25%,
      #ffeb3b 25%,
      #ffeb3b 50%,
      #ffc107 50%,
      #ffc107 75%,
      #ff5722 75%
    );
}

See the Pen css_content_course_gradient_example_card_radial_type by Hexlet (@hexlet) on CodePen.

Подбор цветов для градиента

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

Тема сочетания цветов используется не только при создании градиентов, а на всем пути карьеры фронтенд-разработчика. Если нужно быстро сделать страницу, а дизайнера «под рукой» нет, то умение базово выбрать цвета — хороший навык в портфолио.

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

Круг включает в себя много понятий, такие как первичные, вторичные и третичные цвета, но нас интересуют подходы к выбору цветовых сочетаний:

Комплементарное сочетание
Триада
Контрастная триада
Аналоговая триада

На примере небольшого блока и градиентов рассмотрим сочетания цветов. Важно, что цвета не будут совпадать один в один, они и не должны это делать. Круг позволяет нащупать опорные точки, а далее вы уже сами можете изменять тон и насыщенность цвета.

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

Комплементарное сочетание

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

В градиентах подход используется для резкого перехода или просто как визуальный эффект. Но не стоит увлекаться — резкий контраст, в больших количествах, будет раздражать:

Триада

Сочетание контраста и сбалансированности. Все цвета хорошо сочетаются друг с другом в любом порядке. На круге фигура выглядит как равносторонний треугольник:

Контрастная триада

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

Аналоговая триада

Один из самых распространенных вариантов триад для создания градиентов. В отличие от остальных триад, здесь берется три соседних друг с другом цвета. Так как цвета при такой триаде могут быть очень близко друг к другу, то стоит внимательно следить за тем, чтобы контраст фона и текста был достаточным для комфортного чтения:

Дополнительные материалы

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Вебинар «Как самостоятельно учиться»

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ

130

курсов

1000

упражнений

2000+

часов теории

3200

тестов