Повтор градиента: repeating-linear-gradient() and repeating-radial-gradient()
Существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
Пример 1: Повтор линейного градиента.
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Код HTML:
HTML:
<div class="rlg"></div>
CSS:
.rlg {
width: 600px;
height: 200px;
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Код HTML:
HTML:
<div class="rrg"></div>
CSS:
.rrg {
width: 600px;
height: 200px;
background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);
}