5 августа буду в отъезде. отвечаю по возможности

Функция 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 или их комбинацией: top left, top right и так далее. Порядок слов не важен: можно писать top left и left top, разницы нет. Параметр необязательный: если его не написать, градиент будет идти сверху вниз (как при to top). Перед направлением ставится слово 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,
    которая создает радиальный градиент