CSS Gradients
Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS определяет два типа градиентов:
- Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
- Радиальные градиенты (определяемые их центром)
CSS линейные градиенты
Для создания линейного градиента необходимо определить не менее двух цветовых ограничителей. Цветовые ограничители — это цвета, которые вы хотите сделать плавными переходами между ними. Можно также задать начальную точку и направление (или угол) вместе с эффектом градиента.
Синтаксис
background: linear-gradient(direction, color-stop1,
color-stop2, ...);
Линейный градиент-сверху вниз (по умолчанию)
В следующем примере показан линейный градиент, начинающийся сверху. Оно начинает красно, переходя к желтому цвету:
Пример
#grad {
background: linear-gradient(red, yellow);
}
Линейный градиент-слева направо
В следующем примере показан линейный градиент, начинающийся слева. Оно начинает красно, переходя к желтому цвету:
Пример
#grad {
background: linear-gradient(to right, red , yellow);
}
Линейный градиент-Диагональ
Можно сделать градиент по диагонали, указав как горизонтальные, так и вертикальные начальные позиции.
В следующем примере показан линейный градиент, начинающийся в левом верхнем углу (и направляется в нижний правый угол). Оно начинает красно, переходя к желтому цвету:
Пример
#grad {
background: linear-gradient(to bottom right, red, yellow);
}
Использование углов
Если требуется больший контроль над направлением градиента, можно определить угол, а не предопределенные направления (снизу, сверху, вправо, влево, вниз вправо и т.д.).
Синтаксис
background: linear-gradient(angle, color-stop1,
color-stop2);
Угол указывается в виде угла между горизонтальной линией и линией градиента.
В следующем примере показано, как использовать углы на линейных градиентах:
Пример
#grad {
background: linear-gradient(-90deg, red, yellow);
}
Использование нескольких цветовых остановок
В следующем примере показан линейный градиент (сверху вниз) с несколькими остановками цвета:
Пример
#grad {
background: linear-gradient(red, yellow, green);
}
В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:
Пример
#grad {
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}
Использование прозрачности
CSS градиенты также поддерживают прозрачность, которая может быть использована для создания эффектов затухания.
Чтобы добавить прозрачность, мы используем функцию RGBA () для определения ограничителей цвета. Последний параметр в функции RGBA () может быть значением от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).
В следующем примере показан линейный градиент, начинающийся слева. Он начинает полностью прозрачным, переходя к полному красному цвету:
Пример
#grad {
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Повторение линейного градиента
Функция повторения-линейного градиента () используется для повторения линейных градиентов:
Пример
Повторяющийся линейный градиент:
#grad {
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
CSS радиальные градиенты
Радиальный градиент определяется его центром.
Для создания радиального градиента необходимо также определить по крайней мере два цветовых ограничителя.
Синтаксис
background: radial-gradient(shape size at position, start-color, ..., last-color);
По умолчанию форма имеет эллипс, размер — самый дальний угол, а положение — центр.
Радиальный градиент-равномерное расстояние между цветами останавливается (по умолчанию)
В следующем примере показан радиальный градиент с равномерно раскрытием цветовых остановок:
Пример
#grad {
background: radial-gradient(red, yellow, green);
}
Радиальный градиент-по-разному пробелом останавливается цвет
В следующем примере показан радиальный градиент с разными интервалами цвета:
Пример
#grad {
background: radial-gradient(red 5%, yellow 15%, green 60%);
}
Задать форму
Параметр Shape определяет форму. Он может принимать значение окружности или эллипса. Значением по умолчанию является эллипс.
В следующем примере показан радиальный градиент с формой окружности:
Пример
#grad {
background: radial-gradient(circle, red, yellow, green);
}
Использование различных ключевых слов размера
Параметр size определяет размер градиента. Он может принимать четыре значения:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Пример
Радиальный градиент с различными ключевыми словами размера:
#grad1 {
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
Повторение радиального градиента
Функция повторения-радиального градиента () используется для повторения радиальных градиентов:
Пример
Повторяющийся радиальный градиент:
#grad {
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
}