Функция repeating-linear-gradient
Функция repeating-linear-gradient
задает повторяющийся линейный градиент. Это
значит, что мы задаем определенный узор градиента,
например, от 0px до 10px - градиент
от красного к голубому и этот градиент будет
повторяться на весь блок: 0px до 10px,
от 10px до 20px, от 20px
до 30px и так далее.
Данная функция применяется к свойствам, которые
задают картинку фона: background,
background-image
или картинку границы: border-image,
background-image-source.
Синтаксис
селектор {
background: repeating-linear-gradient([направление], цвет1 размер1, цвет2 размер2...);
}
Значения
| Значение | Описание |
|---|---|
| направление |
Задает определенное направление градиента в любых единицах для углов
либо ключевыми словами
top, left, right, bottom
или их комбинацией.
Порядок слов не важен. Параметр необязательный:
если его не написать, градиент будет идти сверху вниз.
Перед направлением ставится слово to.
|
| угол | Угол в любых единицах для углов. Может быть положительным или отрицательным. Параметр необязательный. Одновременно может быть задан или угол, или направление (или вообще ничего). |
| цвет1 | Начальный цвет градиента в любых единицах для цвета. |
| цвет2 | Конечный цвет градиента в любых единицах для цвета. |
| размер | Задает протяженность определенного цвета градиента в любых единицах для размера. |
Пример . Самый простой вариант
Градиент будет выглядеть так: от 0px
до 20px чистый красный цвет, от 20px
до 40px - градиент от красного к голубому.
И так будет повторяться сверху вниз (на то
он и повторяющийся градиент):
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(red 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Пример . Четкие цвета
Градиент будет выглядеть так: от 0px
до 20px чистый красный цвет, от 20px
до 40px - чистый голубой (фишка в том, что
второй цвет начинается там, где заканчивается
первый). И так будет повторяться сверху вниз:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Пример . Сменим направление
Сейчас направление градиента будет справа налево:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Пример . Направление в градусах
В качестве направления зададим угол в градусах:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
width: 400px;
height: 200px;
}
:
Пример . Отрицательное значение
Сделаем направление отрицательным значением:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
width: 400px;
height: 200px;
}
:
Смотрите также
-
функцию
repeating-radial-gradient,
которая создает повторяющийся радиальный градиент -
функцию
linear-gradient,
которая создает линейный градиент -
функцию
radial-gradient,
которая создает радиальный градиент