CSS3 Конические градиенты
CSS Конический градиент
Конический градиент - это градиент с цветовыми переходами, повернутый вокруг центральной точки.
Чтобы создать конический градиент, вы должны определить по крайней мере два цвета.
Синтаксис
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
По умолчанию угол наклона равен 0 град, а положение равно центру.
Если градус не указан, цвета будут равномерно распределены вокруг центральной точки.
Конический градиент: три цвета
В следующем примере показан конический градиент с тремя цветами:
Пример
Конический градиент с тремя цветами:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Попробуйте сами »
Конический градиент: пять цветов
В следующем примере показан конический градиент с пятью цветами:
Пример
Конический градиент с пятью цветами:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Попробуйте сами »
Конический градиент: три цвета и градуса
В следующем примере показан конический градиент с тремя цветами и степенью для каждого цвета:
Пример
Конический градиент с тремя цветами и степенью для каждого цвета:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Попробуйте сами »
Создание круговых диаграмм
Просто добавьте border-radius: 50%, чтобы конический градиент выглядел как круг:
Пример
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Попробуйте сами »
Вот еще одна круговая диаграмма с определенными градусами для всех цветов:
Пример
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Попробуйте сами »
Конический градиент с заданным углом от
Параметр [from angle] задает угол, на который поворачивается весь конический градиент.
В следующем примере показан конический градиент с углом от 90 градусов:
Пример
Конический градиент с углом от:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Попробуйте сами »
Конический градиент с заданным положением центра
[at position] задает центр конического градиента.
В следующем примере показан конический градиент с положением центра 60% 45%:
Пример
Конический градиент с заданным положением центра:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Попробуйте сами »
Повторение конического градиента
Функция repeating-conic-gradient() используется для повторения конических градиентов:
Пример
Повторяющийся конический градиент:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Попробуйте сами »
Вот повторяющийся конический градиент с определенными начальными и конечными цветами:
Пример
Повторяющийся конический градиент с определенными цветовыми началами и цветовыми остановками:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
Попробуйте сами »
CSS Функции градиента
В следующей таблице перечислены функции градиента CSS:
| Функция | Описание |
|---|---|
| conic-gradient() | Создает конический градиент. Определите по крайней мере два цвета (вокруг центральной точки) |
| linear-gradient() | Создает линейный градиент. Определите по крайней мере два цвета (сверху вниз) |
| radial-gradient() | Создает радиальный градиент. Определите по крайней мере два цвета (от центра к краям) |
| repeating-conic-gradient() | Повторяет конический градиент |
| repeating-linear-gradient() | Повторяет линейный градиент |
| repeating-radial-gradient() | Повторяет радиальный градиент |