5.1 Линейные градиенты
Градиенты являются мощным инструментом в веб-дизайне, позволяя создавать плавные переходы между цветами без использования изображений. CSS предоставляет два основных типа градиентов: линейные (linear-gradient) и радиальные (radial-gradient). Эти градиенты используются для фона элементов, создания кнопок и других визуальных эффектов.
Линейные градиенты (linear-gradient)
Линейный градиент создает плавный переход между двумя или более цветами вдоль определенной линии (оси). Линия может быть горизонтальной, вертикальной или под любым углом.
Синтаксис
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Значения
direction: направление градиента. Может быть указано в градусах (например,90deg), с использованием ключевых слов (например,to right,to bottom left)color-stop: цветовая остановка, определяющая цвет и его положение в градиенте
Примеры использования
Горизонтальный градиент:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Горизонтальный градиент</div>
</body>
Вертикальный градиент:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Вертикальный градиент</div>
</body>
Диагональный градиент:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Диагональный градиент</div>
</body>
Многоцветный градиент:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Многоцветный градиент</div>
</body>
Объяснение кода:
to right: градиент идет слева направоto bottom: градиент идет сверху вниз45deg: градиент идет под углом 45 градусовred,yellow,green,blue: несколько цветовых остановок для создания многоцветного градиента
5.2 Радиальные градиенты
radial-gradient создает плавный переход между цветами, исходящий из центра и распространяющийся к краям окружности или эллипса. Радиальные градиенты могут создавать интересные визуальные эффекты, такие как имитация трехмерности.
Синтаксис:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Значения:
shape: форма градиента, может бытьcircle(круг) илиellipse(эллипс) (значение по умолчанию)size: размер градиента, может бытьclosest-side,closest-corner,farthest-side,farthest-cornerposition: положение центра градиента, может быть указано в процентах, пикселях или с использованием ключевых слов (например,center,topleft)color-stop: цветовая остановка, определяющая цвет и его положение в градиенте
Примеры использования
Круговой градиент:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Круговой градиент</div>
</body>
Эллиптический градиент:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Эллиптический градиент</div>
</body>
Градиент из центра:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Градиент из центра</div>
</body>
Градиент из угла:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Градиент из угла</div>
</body>
Объяснение кода:
circle: создает круговой градиентellipse: создает эллиптический градиентat center: градиент начинается из центраat top left: градиент начинается из верхнего левого углаred,blue,green: несколько цветовых остановок для создания многоцветного градиента
5.3 Дополнительные настройки градиентов
Повторяющиеся градиенты
1. Линейные повторяющиеся градиенты (repeating-linear-gradient)
Повторяющиеся линейные градиенты создают повторяющийся узор с линейным градиентом.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Радиальные повторяющиеся градиенты (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Прозрачные цветовые остановки
Цветовые остановки могут включать прозрачность для создания более сложных визуальных эффектов.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Совместное использование нескольких градиентов
Можно использовать несколько градиентов для создания сложных фонов.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ