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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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