31. Радиальные и конические градиенты

CSS: Радиальные и Конические Градиенты

Иллюстрация к уроку В этом уроке мы углубимся в мир градиентов CSS, изучив радиальные и конические градиенты. Эти типы градиентов позволяют создавать визуально привлекательные и динамичные фоны для ваших веб-страниц, предлагая больше контроля над цветом и формой, чем линейные градиенты.

Радиальные Градиенты

Радиальный градиент создает переход цвета, исходящий из центра. Представьте, что вы бросили камень в воду – круги, расходящиеся от точки падения, похожи на радиальный градиент. Синтаксис: radial-gradient( shape size at position, color-stop1, color-stop2, ... );

shape: Определяет форму градиента (circle или ellipse). По умолчанию – ellipse.
size: Определяет размер градиента. Может быть closest-side, farthest-side, closest-corner, farthest-corner.
at position: Определяет положение центра градиента. Используются ключевые слова (top, bottom, left, right, center) или процентные значения.
color-stop: Определяет цвет и его положение в градиенте (например, red 20%).

.radial-gradient-example {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, red, yellow, green); /* Круглый градиент от красного к желтому к зеленому */
}

.radial-gradient-position {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle at top left, red, yellow, green); /* Круглый градиент от красного к желтому к зеленому, центр в верхнем левом углу */
}

.radial-gradient-size {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(farthest-corner at center, red, yellow, green); /* Круглый градиент от красного к желтому к зеленому, размер до дальнего угла, центр */
}

Конические Градиенты

Конический градиент создает переход цвета вокруг центральной точки, как кусок пирога, разделенный на разноцветные сектора. Синтаксис: conic-gradient( from angle at position, color-stop1, color-stop2, ... );

from angle: Задает угол начала градиента (в градусах). По умолчанию – 0deg.
at position: Определяет положение центра градиента. Используются ключевые слова (top, bottom, left, right, center) или процентные значения.
color-stop: Определяет цвет и его положение в градиенте (например, red 20%).

.conic-gradient-example {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(red, yellow, green); /* Конический градиент от красного к желтому к зеленому */
}

.conic-gradient-angle {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(from 90deg, red, yellow, green); /* Конический градиент от красного к желтому к зеленому, начиная с 90 градусов */
}

.conic-gradient-position {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(at top right, red, yellow, green); /* Конический градиент от красного к желтому к зеленому, центр в верхнем правом углу */
}

Жизненный пример

Радиальные и конические градиенты часто используются для создания:

Круговых диаграмм и индикаторов прогресса: Конические градиенты идеально подходят для визуализации данных в круговой форме.
Фонов с эффектом освещения: Радиальные градиенты могут имитировать свет, исходящий из определенной точки.
Сложных текстур и узоров: Комбинируя несколько градиентов, можно создавать уникальные визуальные эффекты.

Например, многие веб-сайты, использующие CSS-фреймворки, применяют радиальные градиенты для создания тонких фоновых эффектов на кнопках или карточках, добавляя глубину и визуальный интерес. Конические градиенты часто встречаются в дашбордах для отображения данных в виде круговых диаграмм.

Ключевые моменты

Радиальные градиенты распространяются от центра, а конические – вращаются вокруг центра.
shape, size и position позволяют контролировать форму, размер и положение радиальных градиентов.
from angle и at position управляют углом начала и центром конических градиентов.
Оба типа градиентов могут быть использованы для создания широкого спектра визуальных эффектов, от простых фонов до сложных диаграмм.
Экспериментируйте с разными цветами и положениями, чтобы найти наилучшие комбинации для ваших проектов.