Радиальный градиент CSS

Радиальный градиент – градиент для создания эффектов при переходе одного цвета в другой. В отличии от линейного градиента, здесь используется либо круговой, либо эллипсообразный переход. Направления изменения цвета идет в разных направлениях от центра. Радиальный градиент еще называют “круговым градиентом”.

Радиальный градиент задается с помощью свойства radial-gradient совместно с background. У него есть довольно много параметров, которые мы рассмотрим последовательно.

Синтаксис CSS radial-gradient

background: radial-gradient([at позиция форма размер,] цвет1, цвет2,...);

Где:

  • позиция – начальные координаты Х и У (чаще всего задаются в процентах). Есть константы:

    • top – по центру сверху (50% 0%)
    • left top – верхний левый угол (0% 0%)
    • right top – верхний правый угол (100% 0%)
    • center (стоит по умолчанию) – центр области (50% 50%)
    • left center – слева по центру (0% 50%)
    • right center – справа по центру (100% 50%)
    • bottom – снизу по центру (50% 100%)
    • left bottom – слева снизу (0% 100%)
    • right bottom – справа снизу (100% 100%)

    Обязательно необходимо ключевое слово at.

  • форма — задание формы градиента. Есть два варианта:

    • circle – круг
    • ellipse – эллипс

  • размер — как будет растягиваться градиент. Может принимать следующие значения

    • closest-side – градиент стремится к ближайшей границе элемента.
    • closest-corner – градиент стремится к ближайшему углу.
    • farthest-side (по умолчанию) – градиент распространяется до дальней границы элемента.
    • closest-corner – градиент распространяется до дальнего угла элемента.

    Ниже будут приведена таблица с примерами

  • цвет1 – начальный цвет
  • цвет2 – конечный цвет

Цвет можно задавать в формате RGB, конкретный цвет или в фомрате rgba (см. коды цветов html для сайта).

Примечание 1

Можно задавать переход нескольких цветов через запятую.





В самом простом варианте можно задать только два цвета. Например

background: radial-gradient(#ADFF2F, #006400)

Примечание 2

Для браузеров нужно задавать это свойство с вендорными префиксами: -moz-,-webkit-, -ms-, -o-:

background: -moz-radial-gradient
background: -webkit-radial-gradient
background: -ms-radial-gradient
background: -o-radial-gradient

Примечание 3

Свойство radial-gradient также можно сделать повторяющимся: repeating-radial-gradient

background: repeating-radial-gradient(circle, #8FBC8F, #8FBC8F .5em, transparent .5em, transparent 1.5em);

Примеры с радиальными градиентами

Пример 1. Разная позиция старта

Через ключевое слово at можно задавать позицию центра радиального градиента.

<html>
<head>
<style>
.primer1{
width: 200px;
height: 200px;
background: radial-gradient(at 20% 50%, #ADFF2F, #228B22, #006400);
margin: 10px;
}
.primer2{
width: 200px;
height: 200px;
background: radial-gradient(at 75% 40%, #ADFF2F, #228B22, #006400);
margin: 10px;
}
.primer3{
width: 200px;
height: 200px;
background: radial-gradient(at 180px 40px, #ADFF2F, #228B22, #006400);
margin: 10px;
}
.primer4{
width: 200px;
height: 200px;
background: radial-gradient(at top, #ADFF2F, #228B22, #006400);
margin: 10px;
}
</style>
</head>
<body>
<div class="primer1"></div>
<div class="primer2"></div>
<div class="primer3"></div>
<div class="primer4"></div>
</body>
</html>

На странице преобразуется в следующее

Пример 2. Размер градиента

Ниже представлен пример, который показывает работу границы

<html>
<head>
<style>
.primer5{
width: 400px;
height: 150px;
background: radial-gradient(circle closest-side at 70px 50px, #ADFF2F, #006400);
margin: 10px;
}
.primer6{
width: 400px;
height: 150px;
background: radial-gradient(circle closest-corner at 70px 50px, #ADFF2F, #006400);
margin: 10px;
}
.primer7{
width: 400px;
height: 150px;
background: radial-gradient(circle farthest-side at 70px 50px, #ADFF2F, #006400);
margin: 10px;
}
.primer8{
width: 400px;
height: 150px;
background: radial-gradient(circle farthest-corner at 70px 50px, #ADFF2F, #006400);
margin: 10px;
}
</style>
</head>
<body>
<div class="primer5"></div>
<div class="primer6"></div>
<div class="primer7"></div>
<div class="primer8"></div>
</body>
</html>

На странице преобразуется в следующее


closest-side

Ближайшая граница

closest-corner

Ближайший угол

farthest-side

Дальняя граница

farthest-corner

Дальний угол






Пример 3. Резкие переходы радиального градиента

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

background: radial-gradient(цвет1 20%, цвет2 70%, цвет3 100%)

Приведем практический пример

<html>
<head>
<style>
.primer9{
width: 200px;
height: 200px;
background: radial-gradient(circle at center, #00FF7F 10%, #228B22 60%, #006400 70%, #211 100%);
margin: 10px;
}
.primer9{
width: 200px;
height: 200px;
background: radial-gradient(circle at center, #000 5%, #fff 7%, #000 30%, #fff 80%, #000 83%);
margin: 10px;
}
</style>
</head>
<body>
<div class="primer9"></div>
<div class="primer10"></div>
</body>
</html>

На странице преобразуется в следующее






Читайте также:

• Что такое JavaScript

• Что такое HTML

• Свойство font

• Свойство border

• Свойство background

• Свойство transition

• Коды символов для HTML

• Самые основные html теги

• Какой движок выбрать для сайта


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.