CSS - СSS3 Градиент
CSS3 градиенты позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS3 определяет два типа градиентов:
- Линейные градиенты (вниз/вверх/влево/вправо/по диагонали)
- Радиальные градиенты (определяются по центру)
CSS3 Линейные градиенты
Для создания линейного градиента необходимо определить по крайней мере, два цвета. Остановки цвета - это цвета, которые вы хотите отобразить плавными переходами. Можно также задать начальную точку и направление (от угола) вдоль с эффектом градиента.
Синтаксис
Фон: линейный градиент(направление, цвет-стоп1,
цвет-стоп2, ...);
Линейный градиент - сверху вниз (по умолчанию)
В следующем примере показан линейный градиент, начинающийся сверху. Он начинает красный, переход к желтому:
Линейный градиент - слева направо
В следующем примере показан линейный градиент, начинающийся слева. Он начинает красный, переходит в желтый:
Линейный градиент - по диагонали
Вы можете сделать градиент по диагонали, указав как горизонтальное, так и вертикальное начальное положение.
В следующем примере показан линейный градиент, который начинается в левом верхнем углу (и идет в нижний правый угол). Он начинается красным, переход к желтому:
Использование углов
Если вы хотите больше контроля над направлением градиента, вы можете определить угол, вместо предопределенных направлений (снизу, сверху, справа, слева, снизу справа и т. д.).
Синтаксис
Фон: линейный градиент(угол, цвет-стоп1, цвет-стоп2);
Угол определяется, как угол между горизонтальной линией и линией градиента.
В следующем примере показано, как использовать углы для линейных градиентов:
Использование нескольких цветов
В следующем примере показан линейный градиент (сверху-вниз) внесколько цветовых стоков:
В следующем примере показано, как создать линейный градиент (слева-направо) с цветом радуги и текстом:
Пример
#grad {
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}
Редактор кода »
Использование прозрачности
Градиенты CSS3, также поддерживают прозрачность, которую можно использовать для создания эффектов затухания.
Чтобы добавить прозрачность, мы используем функцию rgba() для определения цветовых стопов.
Последним параметром в функции rgba(), может быть значение от 0
до 1, и это определяет прозрачность цвета: 0
означает полную прозрачность, 1 указывает на полный цвет (без прозрачности).
В следующем примере показан линейный градиент, начинающийся слева. Он начинает полно-прозрачным, переходящий к полному красному цвету:
Пример
#grad {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Редактор кода »
Повторение линейного градиента
Функция repeating-linear-gradient() используется для повтора линейных градиентов:
Пример
Повторяющийся линейный градиент:
#grad {
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Редактор кода »
CSS3 Радиальный градиент
Радиальный градиент определяется по центру.
Чтобы создать радиальный градиент, необходимо определить как минимум два цвета.
Синтаксис
фон: радиальный градиент(формировать размер at положение, начало-цвет, ..., последний-цвет);
По умолчанию форма эллипс, размер, самый дальний угол и положение по центру.
Радиальный градиент - равномерно расположенные остановки цвета (по умолчанию)
В следующем примере показан радиальный градиент равномерного цвета:
Радиальный градиент - различные цветовые остановки
В следующем примере показан радиальный градиент с различными цветовыми остановками:
Установить фигуру
Параметр shape определяет фигуру. Может принимать значение circle или ellipse.
Значение по умолчанию - ellipse.
В следующем примере показан радиальный градиент с фигурой круга:
Использование ключевых слов разного размера
Параметр side определяет размер градиента. Он может принимать четыре значения:
closest-sidefarthest-sideclosest-cornerfarthest-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);
}
Редактор кода »
Повторение радиального градиента
Функция repeating-radial-gradient() используется для повтора радиальных градиентов:
Пример
Повторяющийся радиальный градиент:
#grad {
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Редактор кода »
