логотип PurpleSchool
логотип PurpleSchool

Функция repeating-radial-gradient в CSS. Полное руководство с примерами

Автор

Дмитрий Нечаев

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

Основы repeating-radial-gradient()

Функция repeating-radial-gradient() создаёт повторяющийся радиальный градиент, который можно использовать в качестве значения свойства background-image. Основной синтаксис функции выглядит следующим образом:

background-image: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);
  • shape — форма градиента (например, circle или ellipse).
  • size — размер градиента.
  • position — положение центра градиента.
  • color-stop — точки остановки цвета, определяющие, где и как цвета должны переходить друг в друга.

Пример простого повторяющегося радиального градиента

background-image: repeating-radial-gradient(circle, red, yellow 10%, green 20%);

В этом примере создаётся радиальный градиент круговой формы, который повторяется каждые 20% ширины элемента, создавая узор из красного, жёлтого и зелёного цветов.

Указание формы и размера градиента

Форма градиента

Форма градиента может быть круговой (circle) или эллиптической (ellipse). По умолчанию, если форма не указана, градиент будет эллиптическим.

background-image: repeating-radial-gradient(circle, red, yellow, green);
background-image: repeating-radial-gradient(ellipse, red, yellow, green);

Размер градиента

Размер градиента может быть задан ключевыми словами (closest-side, farthest-side, closest-corner, farthest-corner) или конкретными значениями (например, пиксели или проценты).

background-image: repeating-radial-gradient(circle closest-side, red, blue);
background-image: repeating-radial-gradient(circle farthest-corner, red, blue);

Положение центра градиента

Центр градиента можно задать с помощью ключевых слов (например, center, top, bottom, left, right) или конкретных координат (например, в процентах или пикселях).

background-image: repeating-radial-gradient(circle at center, red, blue);
background-image: repeating-radial-gradient(circle at 50% 50%, red, blue);
background-image: repeating-radial-gradient(circle at top left, red, blue);

Точки остановки цвета

Основные точки остановки

Цвета в градиенте могут располагаться в определённых точках, что позволяет создавать более сложные узоры. По умолчанию цвета равномерно распределяются от центра к краям градиента.

background-image: repeating-radial-gradient(circle, red 0%, yellow 10%, green 20%);

В этом примере жёлтый цвет занимает 10% радиуса градиента, создавая повторяющийся узор.

Использование нескольких цветов

Можно использовать больше двух цветов для создания многоцветного повторяющегося градиента.

background-image: repeating-radial-gradient(circle, red, yellow 10%, green 20%, blue 30%);

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

Создание радиального градиента для фона кнопки

button {
    background-image: repeating-radial-gradient(circle, #ff7e5f, #feb47b 10%, #ff7e5f 20%);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

Градиентный фон для блока

div.gradient-box {
    background-image: repeating-radial-gradient(ellipse at center, #ff7e5f, #feb47b 10%, #ff7e5f 20%);
    padding: 20px;
    border-radius: 5px;
    color: white;
}

Радиальный градиент с заданным размером и положением

div.custom-gradient {
    background-image: repeating-radial-gradient(circle farthest-corner at 70% 30%, #ff7e5f, #feb47b 10%, #ff7e5f 20%);
    height: 200px;
    width: 100%;
}

Создание узоров с помощью repeating-radial-gradient()

Полосы

div.stripes {
    background-image: repeating-radial-gradient(circle at center, black, white 10px, black 20px);
    height: 200px;
    width: 100%;
}

Шахматный узор

div.checkerboard {
    background-image: repeating-radial-gradient(circle at center, #000000, #000000 25px, #ffffff 25px, #ffffff 50px);
    height: 200px;
    width: 100%;
}

Заключение

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

Стрелочка влевоФункция url в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиСтрелочка вправо

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний