CSS Градиенты
Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS определяет два типа градиентов:
- Линейные градиенты (идет вниз/вверх/влево/вправо/по диагонали)
- Радиальные градиенты (определяемые их центром)
CSS Линейные градиенты
Чтобы создать линейный градиент, вы должны определить как минимум две точки цвета. Цветовые точки - это цвета, между которыми вы хотите сделать плавные переходы. Вы также можете установить начальную точку и направление (или угол) вместе с эффектом градиента.
Синтаксис
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Направление - сверху вниз (по умолчанию)
В следующем примере показан линейный градиент, который начинается сверху. Он начинается с красного, переходя в желтый:
Направление - слева направо
В следующем примере показан линейный градиент, начинающийся слева. Он начинается с красного, переходя в желтый:
Направление - диагональ
Вы можете создать градиент по диагонали, указав как горизонтальное, так и вертикальное начальное положение.
В следующем примере показан линейный градиент, который начинается слева вверху (и идёт вниз справа). Он начинает с красного, переходя в жёлтый:
Использование углов
Если вам нужен больший контроль над направлением градиента, вы можете определить угол вместо предопределенных направлений (вниз, вверх, вправо, влево, вправо внизу и т.д.). Значение 0deg эквивалентно "вверху". Значение 90deg эквивалентно "вправо". Значение 180deg эквивалентно "вниз".
Синтаксис
background-image: linear-gradient(angle, color-stop1, color-stop2);
В следующем примере показано, как использовать углы для линейных градиентов:
Использование нескольких цветовых точек
В следующем примере показан линейный градиент (сверху вниз) с несколькими цветовыми точками:
В следующем примере показано, как создать линейный градиент (слева направо) с цветом радуги и некоторым текстом:
Пример
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Попробуйте сами »
Использование прозрачности
Градиенты CSS также поддерживают прозрачность, которую можно использовать для создания эффектов затухания.
Чтобы добавить прозрачности, мы используем функцию rgba() для определения цветовых точек. Последний параметр в функции rgba() может иметь значение от 0 до 1, и он определяет прозрачность цвета: 0 указывает на полную прозрачность, 1 указывает на полный цвет (без прозрачности).
В следующем примере показан линейный градиент, начинающийся слева. Он начинается полностью прозрачным, переходя в полностью красный цвет:
Пример
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Попробуйте сами »
Повторение линейного градиента
Функция repeat-linear-gradient() используется для повторения линейных градиентов:
Пример
Повторяющийся линейный градиент:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Попробуйте сами »
