Доступ к готовым решениям

Переход в группу "Пользователь"

300.00
Одноразовый платёж
Быстрый переход в группу "Пользователи", без надобности написания постов и ожидания.

Покупка дает возможность:
Быть полноправным участником форума
Нормальное копирование кода
Создавать темы
Скачивать файлы
Доступ к архиву Pawno-Info

CSS repeating-linear-gradient() and repeating-radial-gradient()

Serg_Brain

Мастер
Пользователь
Регистрация
15 Янв 2012
Сообщения
3,975
Лучшие ответы
7
Репутация
595
Награды
5
Повтор градиента: repeating-linear-gradient() and repeating-radial-gradient()


Существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.

Пример 1: Повтор линейного градиента.


Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Код HTML:
HTML:
<div class="rlg"></div>
Код CSS:
CSS:
.rlg {
    width: 600px;
    height: 200px;
    background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}
Пример 2: Повтор радиального градиента.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Код HTML:
HTML:
<div class="rrg"></div>
Код CSS:
CSS:
.rrg {
    width: 600px;
    height: 200px;
    background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);
}
 
Сверху Снизу