5.1 KiB
| title | localeTitle |
|---|---|
| Linear Gradient | Линейный градиент |
Линейный градиент
Это заглушка. Помогите нашему сообществу расширить его .
Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу .
Дополнительная информация:
В линейном градиенте цвета движутся в одном направлении, т. Е. Слева направо, сверху вниз или любым выбранным вами углом.
Линейный градиент с двумя цветами
Синтаксис-
Чтобы создать линейный градиент, вы должны определить как минимум два прекращения цвета. (Это цвета, из которых создаются переходы). Он объявляется либо в фоновом, либо в фоновом изображении .
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
Примечание. Если ни одно направление не указано, переход по умолчанию сверху вниз
Различные градиентные переходы -
Сверху вниз :
background: linear-gradient(red, yellow);
Слева направо :
Для того, чтобы сделать его слева направо, добавьте дополнительный параметр в начале линейного градиента () , начиная со словом , к которому указывает направление:
background: linear-gradient(to right, red , yellow);
Диагональные позиции:
Вы также можете переместить градиент по диагонали, указав горизонтальные и вертикальные начальные положения, например, левый верхний или нижний правый.
Вот пример градиента, начинающийся в верхнем левом углу,
background: linear-gradient(to bottom right, red, yellow);
Использование углов для указания направления градиентно-
Вы также можете использовать углы, чтобы быть более точными при указании направления градиента:
background: linear-gradient(angle, colour-stop1, colour-stop2);
Угол определяется как угол между горизонтальной линией и градиентной линией.
background: linear-gradient(90deg, red, yellow);
Используя более двух цветов -
Вы не ограничены только двумя цветами, вы можете использовать столько разделенных запятыми цветов, сколько хотите.
background: linear-gradient(red, yellow, green);
Вы можете также использовать другие цветовые синтаксисы, такие как RGB или шестнадцатеричные коды, чтобы указать цвета.
Жесткий цвет останавливается -
Вы можете не только использовать градиенты для перехода с затухающими цветами, но также можете использовать его для немедленного перехода от одного сплошного цвета к другому сплошному цвету
background: linear-gradient(to right,red 15%, yellow 15%);
Дополнительная информация - Линейный градиент в Mozilla Docs