852e079310
Fixed typos in the article about linear gradient. The article seemed to be done via google translate. Fixed typos, fixed wrong sentences.
4.6 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Linear Gradient | Линейный градиент |
Линейный градиент
В линейном градиенте цвета движутся в одном направлении, т.е. слева направо, сверху вниз или под любым выбранным вами углом.
Линейный градиент с двумя цветами
Синтаксис
Чтобы создать линейный градиент, вы должны определить как минимум две цветовых остановки. (Это цвета, из которых создаются переходы). Он объявляется либо в свойстве background, либо в background-image.
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
Примечание. Если ни одно направление не указано, переход по умолчанию сверху вниз
Различные градиентные переходы
Сверху вниз:
background: linear-gradient(red, yellow);
Слева направо:
Для того, чтобы сделать его слева направо, добавьте дополнительный параметр вида to direction, где direction - направление градиента.
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%);
