852e079310
Fixed typos in the article about linear gradient. The article seemed to be done via google translate. Fixed typos, fixed wrong sentences.
87 lines
4.6 KiB
Markdown
87 lines
4.6 KiB
Markdown
---
|
||
title: Linear Gradient
|
||
localeTitle: Линейный градиент
|
||
---
|
||
## Линейный градиент
|
||
|
||
В линейном градиенте цвета движутся в одном направлении, т.е. слева направо, сверху вниз или под любым выбранным вами углом.
|
||
|
||
|
||
|
||
**Линейный градиент с двумя цветами**
|
||
|
||
### Синтаксис
|
||
|
||
Чтобы создать линейный градиент, вы должны определить как минимум две цветовых остановки. (Это цвета, из которых создаются переходы). Он объявляется либо в свойстве **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%);
|
||
```
|
||
|
||
|
||
|
||
#### Дополнительная информация
|
||
[Линейный градиент в Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
|