148 подписчиков

Создание сайтов с нуля - урок 24 - Линейный градиент на CSS

18 июля 201818 июл 2018

1 мин

Линейный градиент задается при помощи свойства background и специальной функции linear-gradient. Самый простой вариант задания линейного градиента: background: linear-gradient (red, blue). Добавим НЕОБЯЗАТЕЛЬНЫЙ параметр – направление, которое по умолчанию направлено сверху вниз: background: linear-gradient (to bottom, red, blue). Обратите внимание на наличие обязательной приставки to. Цвет также можно задавать прозрачным при помощи ключевого слова transparent. Вместо направления можно использовать угол: background: linear-gradient (45deg, red, blue). При указании градусов направление изменяется по часовой стрелке. Также можно задавать градус в отрицательных значениях: background: linear-gradient (-45deg, red, blue). Точки переход цвета можна задавать: Первые и последние значения точек перехода можно не ставить, без значений они автоматом устанавливаются в 0% и 100%. При помощи линейного градиента можно сделать на фоне элемента ровные цветные полосы: background: linear-gradient (red

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

Самый простой вариант задания линейного градиента: background: linear-gradient (red, blue).

Добавим НЕОБЯЗАТЕЛЬНЫЙ параметр – направление, которое по умолчанию направлено сверху вниз: background: linear-gradient (to bottom, red, blue). Обратите внимание на наличие обязательной приставки to.

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

Вместо направления можно использовать угол: background: linear-gradient (45deg, red, blue). При указании градусов направление изменяется по часовой стрелке. Также можно задавать градус в отрицательных значениях: background: linear-gradient (-45deg, red, blue).

Точки переход цвета можна задавать:

либо в пикселях: background: linear-gradient (to right, red 0px, red 100px, blue 200px);
либо в процентах: background: linear-gradient (to right, red 0%, red 20%, blue 50%).

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

При помощи линейного градиента можно сделать на фоне элемента ровные цветные полосы: background: linear-gradient (red 0, red 33%, blue 33%, blue 66%, green 66%, green 100%).

Также можно задавать сразу несколько градиентов (через запятую): background: linear-gradient (to bottom, red, blue), linear-gradient (to right, green, transparent).

При этом, один из цветов «верхнего» градиента должен быть прозрачным, иначе второй будет не виден.

Градиент – это тоже фон, поэтому при задании свойства background-size размер градиента будет ограничен.

Пример:

background: linear-gradient(to right, red 30px, blue 30px, blue 60px);

background-size: 60px 60px;

background-repeat: repeat;

Для кроссбраузерности необходимо использовать вендорные префиксы moz-, webkit-, o-. При этом для старых браузеров направление градиента задавалось без приставки to!

Градиент можно применять для границ элементов (свойство border-image с градиентом).