Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 14.09.2024

Наверх

Наверх

Repeating-radial-gradient(): повторяющийся радиальный градиент

По аналогии с линейным градиентом, радиальный градиент также может быть повторяющимся. За это отвечает функция repeating-radial-gradient(). В ней можно указывать те же параметры, что и для просто радиального градиента. Чтобы градиент повторялся, необходимо перечислить не только цвета, но и размеры каждого градиента в подходящих единицах CSS:

background-image: repeating-radial-gradient(#ff00ea 10px, #2417d7 20px);
repeating-radial-gradient CSS

Если вы хотите, чтобы градиентные кольца были размытыми, а не резкими, то первый и последний цвета градиента должны быть одинаковыми:

background-image: repeating-radial-gradient(circle,
                      #ff00ea 10px, #2417d7 20px, #ff00ea 30px);
Размытый repeating-radial-gradient

Примеры использования

Если повторяющиеся радиальные градиенты кажутся вам не чем иным, как инструментом для гипнотизирования пользователей, и вы задумались над их практической пользой, спешим показать вам несколько хороших примеров с использованием repeating-radial-gradient. При правильном подходе к делу радиальный градиент можно сделать стильным элементом веб-страницы либо использовать при создании CSS-рисунков.


Два фона, градиент и изображение, в режиме смешивания saturation (чтобы посмотреть CSS, кликните по рисунку)


Сочетание нескольких градиентов образовало рисунок виниловой пластинки (чтобы посмотреть CSS, кликните по рисунку)


Маленькие повторяющиеся радиальные градиенты создают причудливый узор (чтобы посмотреть CSS, кликните по рисунку)


Далее в учебнике: практический урок — создаем фотогалерею.