Повторяющиеся градиенты в CSS3

CSS3 также позволяет создавать повторяющиеся фоновые градиенты. Посмотрим, как это делается:

Background: repeating-linear-gradient (90deg, #ffffff 0px, hsla (0, 1%, 50%,0.1) 5px);

Результат применения этого градиента к нашей врезке показан На рисунке 6.16. Прежде всего необходимо добавить префикс repeating к свойству linear-gradient или radial-gradient, а затем будет следовать тот же синтаксис, что и для обычного градиента. Здесь я использовал интервалы в пикселах между белым и серым цветами (соответственно 0px и 5px), однако их также можно было бы указать в процентах. Для получения наилучших результатов рекомендуется придерживаться одних и тех же единиц измерения (например, пикселов или процентов) в рамках синтаксиса того или иного градиента.

Опробуем повторяющийся радиальный градиент:

Background: repeating-radial-gradient (2px 2px, ellipse, hsla (0,0%,100%,1) 2px, hsla (0,0%,95%,1) 10px, hsla (0,0%,93%,1) 15px, hsla (0,0%,100%,1) 20px);

Он очень схож со стандартным радиальным градиентом, который мы использовали ранее. Я лишь изменил «отправную точку», удалил значение cover, поскольку оно больше не требуется, а затем задал интервалы для каждой «остановки цвета» в пикселах. Моя «конечная точка» — 20px, поэтому узор повторяется каждые 20 пикселов. Чуть ниже приведен результат применения этого правила к разделу body. Обращаю ваше внимание — он некрасиво смотрится (рисунок 6.17)!

У врезки теперь есть фоновый повторяющийся линейный градиент.

ПРИМЕЧАНИЕ.

Прочесть спецификацию W3C повторяющихся градиентов можно по следующему адресу: http://dev. w3.Org/csswg/css3-images/#repeating-gradients.

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

Пример повторяющегося радиального градиента, примененного ко всей странице.