CSS :: Функция linear-gradient()
Функция linear-gradient() (от англ. linear gradient – линейный градиент) используется в качестве значения в свойствах background и background-image и добавляет линейный градиент к фону изображения.
Синтаксис
linear-gradient(
[<угол> | to <направление>]?,
<цвет> <стоп-позиция>?,
[<стоп-позиция>?, <цвет> <стоп-позиция>?]#
)
Значения
- <угол> – угол наклона градиентной прямой, проходящей через центр элемента, который отсчитывается относительно вертикальной прямой. При этом значение угла может быть как положительным (отсчет ведется по часовой стрелке), так и отрицательным (отсчет ведется против часовой стрелки). После числового значения сразу и без пробела должно записываться обозначение единицы измерения deg (например, 30deg). Значению 0deg соответствует направление градиента снизу вверх, а значению 90deg - слева направо.
-
<направление> – направление градиента, которое задается комбинацией допустимых ключевых слов и
может использоваться вместо указания значения угла:
- to top – направление градиента снизу вверх (0deg);
- to top right – направление градиента от нижнего левого угла к верхнему правому;
- to right – направление градиента слева направо (90deg);
- to bottom right – направление градиента от верхнего левого угла к нижнему правому;
- to bottom – направление градиента сверху вниз (180deg);
- to bottom left – направление градиента от верхнего правого угла к нижнему левому;
- to left – направление градиента справа налево (270deg);
- to top left – направление градиента от нижнего правого угла к верхнему левому.
- <цвет> – цвет в любой доступной в CSS цветовой модели (смотреть).
- <стоп-позиция> – координаты точки на градиентной прямой в любых доступных в CSS единицах измерения (смотреть), а также процентах, по достижении которой браузер начнет создавать переход от текущего цвета к следующему в списке. При этом, если два соседних цвета в списке идентичны, то их стоп-позиции разрешается указывать через пробел после требуемого цвета. Например, вместо linear-gradient(0deg, red 10%, red 35%, blue 100%) можно сокращенно записать linear-gradient(0deg, red 10% 35%, blue 100%). Более того, можно вообще не указывать стоп-позиции или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки.
Таким образом, функция linear-gradient() принимает в качестве аргументов угол или ключевое слово, обязательное стартовое значение цвета и, как минимум, одно обязательное конечное значение цвета. При этом разрешается через запятую указывать несколько цветов, в случае необходимости дополняя их через пробел точками остановки. Например, запись linear-gradient(30deg, #000000 10%, #ffffff 100%) создает линейный градиент цвета от черного к белому с соответствующими точками остановки вдоль градиентной прямой, которая расположена под углом в 30 градусов относительно вертикальной прямой.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-images-3/#linear-gradients
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/linear-gradient
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 500px; height: 100px; margin: 4em; padding: 10px; } .background_1{ background: linear-gradient(90deg, #ff0000 10%, #00ff00 20%, #0000ff 100%); } .background_2{ background: linear-gradient(to top, #000000, #ffffff); } .background_3{ background: linear-gradient(225deg, #000000, #ffffff); } .background_4{ background: linear-gradient(to bottom left, #000000, #ffffff); } .background_5{ background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); } </style> </head> <body> <p class="background_1"> Несколько значений указываются через запятую: <br> linear-gradient(90deg, #ff0000 10%, #00ff00 20%, #0000ff 100%) </p> <p class="background_2"> linear-gradient(to top, #000000, #ffffff) </p> <p class="background_3"> linear-gradient(225deg, #000000, #ffffff) </p> <p class="background_4"> linear-gradient(to bottom left, #000000, #ffffff) </p> <p class="background_5"> Небольшая палитра (не поллитра!). </p> </body> </html>
Пример №1