Построение сложного фона с помощью градиентов. Градиент. Правила меланжирования для плавного перехода цвета. Линейный градиент linear-gradient()

Влад Мержевич

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

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.

Пример 1. Градиент

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

Результат данного примера показан на рис. 1.

Рис. 1. Линейный градиент для абзаца

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

Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

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

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

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

Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.

Пример 2. Полупрозрачные цвета

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Нажми меня нежно

Результат данного примера показан на рис. 3.

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Типичная европейская буржуазность и добропорядочность изящно иллюстрирует официальный язык.

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

Рис. 4. Фон из горизонтальных полосок

Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.

Определение и применение

CSS функция linear-gradient() (линейный градиент) используется для заливки определенной области заданной последовательностью цветовых оттенков с плавными переходами между ними.

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

Более подробно о работе с градиентами вы можете ознакомиться в статьях « » и « ». Обращаю Ваше внимание, что в статьях освещены нюансы работы со старыми браузерами и приведены многочисленные примеры.

Поддержка браузерами

CSS синтаксис:

Цвет

Создавая градиент, допускается использовать не только «Предопределенные цвета », но и любые « » - шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A.

Направление

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

Для указания начальной позиции градиента применяются следующие ключевые слова:

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

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

Значения 0deg , 90deg , 180deg и 270deg соответствуют значениям ранее рассмотренных ключевых слов независимо от того является элемент квадратным или имеет прямоугольную форму. В случае если элемент полностью квадратный, то следующие значения в градусах будут полностью соответствовать ключевым словам:

* - верно, только для квадратного элемента. На изображении ниже отображена разница между значениями в 45 градусов и значениями to right top для прямоугольного элемента. Главное, что необходимо понять, что для квадратных элементов значения 45deg и to right top , 135 deg и to right bottom , 225deg и to left bottom , 315deg и to left top будут одинаковы, а для прямоугольных градиентов эти значения будут отличаться:

Точки остановки

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

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

Допускается указывать значения точек остановки (color stops ) в единицах измерения длины (например – px или em ), так и в процентных значениях . Как правило, процентные значения являются более удобными и адаптивными в использовании.

Версия CSS

Пример использования

Рассмотрим как указать позицию градиента с использованием ключевых слов:

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

Результат нашего примера представлен на изображении:

Рассмотрим как указать позицию градиента с использованием градусов:

В данном примере мы создали элемент высотой 100 пикселей (ширина автоматически растягивается на весь экран). Задали для него трехцветный градиент под углом 135 градусов . Кроме того применили вертикальное выравнивание , выравнивание текста по центру и установили высоту строки равную высоте элемента .

Рассмотрим использование точек остановки градиента на следующем примере:

В данном примере мы создали пять элементов высотой 50 пикселей (ширина автоматически растягивается на весь экран). Задали для них трехцветный градиент , располагающийся слева направо . Кроме того, применили вертикальное выравнивание , выравнивание текста по центру , установили высоту строки равную высоте элемента и указали внешний отступ с нижней стороны равный 0.7em . Для первых четырех блоков указаны значения точки остановки только для красного цвета (остальные цвета занимают равномерное расстояние). Для последнего блока мы указали три точки остановки :

• Первая точка – для красного градиента (15% );
• Вторая точка – для зеленого градиента (60% );
• Третья точка – для синего градиента (70% ). Это значение не повлияет на отображение, так как после этого градиента нет других цветов, и он в любом случае растянется в ширину всего элемента.

Результат нашего примера:

Современный стандарт CSS по аналогии работы с фоновыми изображениями позволяет указать для одного элемента несколько линейных градиентов (функций). Для этого необходимо перечислить их через запятую.

В следующем примере мы создадим флаг Швейцарии (один к одному), используя три градиента , которые мы укажем в одном объявлении:

• Первый градиент задает сверху вниз три части градиенту: 30% красный цвет , с 30% до 70% прозрачный и оставшаяся часть красный цвет . Зеленым отображен прозрачный участок.
• Второй градиент задает слева направо (под углом 90 градусов ) симметричное сочетание красный – прозрачный – прозрачный – белый – белый – прозрачный – прозрачный – красный . Как вы можете догадаться, повтор цвета необходим, чтобы убрать плавный переход между цветами (отсутствие размытия).
• Третий градиент придает окончательный вид, флагу окрашивая не нужные в нашей композиции места.

Результат нашего примера.

Линейный градиент CSS - это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background .

Синтаксис CSS linear-gradient

позиция, цвет1, цвет2,... );

• позиция - указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
  • to top - переход снизу вверх (0deg)
  • to left - переход справа налево (270deg)
  • to bottom - переход сверху вниз (180deg)
  • to right - переход слева направо (90deg)
  • to top left - переход правого нижнего угла к левому верхнему
  • to top right - переход от левого нижнего угла к правому верхнему
  • to bottom left - переход от правого верхнего угла к левому нижнему
  • to bottom right - переход от левого верхнего угла к правому нижнему
  Помимо точных значений можно указать угол наклона в deg
• цвет1 - начальный цвет
• цвет2 - конечный цвет

Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).

Можно задавать переход нескольких цветов через запятую.

Синтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например

background : linear-gradient (позиция, цвет1 процент, цвет2 процент );

Примечание 2

Для браузеров нужно задавать это свойство с вендорными префиксами : -moz-,-webkit-, -ms-, -o

Примеры с линейными градиентами

Пример 1. Стандартные переходы цветов

Пример 2. Множественный линейный градиент

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

На странице преобразуется в следующее

Пример 3. Красивая кнопка на сайте с линейным градиентом

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

BUTTON

На странице преобразуется в следующее

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами . Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter , также для IE9 можно использовать SVG.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .

Linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

Background: linear-gradient(orangered, gold);

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Направление можно задавать градусами или ключевыми словами.

Ключевыми словами: to top = 0deg ; to right = 90deg ; to bottom = 180deg - значение по умолчанию; to left = 270deg .

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left .

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

Вот код самого первого квадрата, для примера:

Top-left { background: linear-gradient(to top left, purple, crimson, orangered, gold); }

Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg - располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Также можно задавать точки остановки для цветов градиента, значения задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в % , в em и значения, выходящие за границы элемента:

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

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

Полоски на фоне сайдбара - ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.

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

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

Light { background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) center center / 2em; } .dark { background: steelblue linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) center center / 100% 1em; }

В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй - определяем цвета градиента и границу между ними, в третьей - задаем положение и размер получившегося изображения. Самая важная часть - размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно:)

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать .

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться CSS.coloratum , инструментом от Lea Verou .

Помимо обычного linear-gradient можно сделать repeating-linear-gradient - повторяющийся градиент

Примерный код:

Background: repeating-linear-gradient(green, green .5em, transparent .5em, transparent 1em);

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .

Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти .

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/ . Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах .

В CSS существует два типа градиентов:

• линейные : цвета идут от одной точки к другой, по прямой линии;
• радиальные : цвета идут от центра круга к его краям, во всех направлениях.

Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.

linear-gradient

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

• определить желаемые цвета ;
• где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
• в каком направлении должен идти градиент.

Давайте начнём с простого градиента из двух цветов:

Div { background-image: linear-gradient(red, blue); }

По умолчанию:

• направление вертикальное , сверху вниз;
• первый цвет в начале (вверху);
• второй цвет в конце (внизу).

Изменение направления

Если направление сверху вниз вам не подходит, вы можете поменять его на один из вариантов:

• определить назначение градиента , с помощью таких ключевых слов, как to left top ;
• определить конкретный угол в градусах, вроде 45deg .

Это направление должно быть установлено перед цветом:

Div { background-image: linear-gradient(to bottom right, yellow, purple); width: 200px; }

Если вы хотите задать конкретный угол , то можете использовать значение в градусах :

• 0deg - снизу вверх;
• 20deg - немного по диагонали, идущей по часовой стрелке;
• 90deg - подобно 15 часам, слева направо;
• 180deg - это значение по умолчанию, сверху вниз.

Div { background-image: linear-gradient(20deg, green, blue); width: 150px; }

Добавление большего количества цветов

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

• два цвета : 0% и 100%
• три цвета : 0%, 50% и 100%
• четыре цвета : 0%, 33%, 67% и 100%

Div { background-image: linear-gradient(orange, grey, yellow); width: 150px; }

Определение конкретных точек цвета

Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета , используя либо проценты (%), либо пиксели (px):

Div { background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px; }

В данных параметрах:

• у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
• цвет grey ближе к верху, на 10% вместо 50%;
• цвет yellow занимает половину градиента, от 50% и до конца 100%.

radial-gradient

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

• форму : круг или эллипс;
• начальную точку : которая будет центром круга или эллипса;
• конечную точку : где будет край круга или эллипса.

Div { background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px; }

По умолчанию:

• градиент является эллипсом ;
• первый цвет начинается в центре ;
• последний цвет заканчивается в самом дальнем углу .

Начальная позиция

Начальная позиция работает как background-position . Вы можете установить её через ключевое слово at .

Div { background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px; }

Конечная позиция

По умолчанию форма завершается в самом дальнем углу . Вы можете выбрать:

• closest-side
• closest-corner
• farthest-side
• farthest-corner

Div { background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px; } div:hover { background-image: radial-gradient(farthest-side at 20px 20px, green, blue); }

Фиксированный размер

Вместо установки начальной и конечной позиций, вы можете просто задать конкретные размеры :

Div { background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px; }

Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.