91 lines
5.1 KiB
Markdown
91 lines
5.1 KiB
Markdown
|
---
|
|||
|
|
title: Linear Gradient
|
|||
|
|
localeTitle: Линейный градиент
|
|||
|
|
---
|
|||
|
|
## Линейный градиент
|
|||
|
|
|
|||
|
|
Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/linear-gradient/index.md) .
|
|||
|
|
|
|||
|
|
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
В линейном градиенте цвета движутся в одном направлении, т. Е. Слева направо, сверху вниз или любым выбранным вами углом.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**Линейный градиент с двумя цветами**
|
|||
|
|
|
|||
|
|
### Синтаксис-
|
|||
|
|
|
|||
|
|
Чтобы создать линейный градиент, вы должны определить как минимум два прекращения цвета. (Это цвета, из которых создаются переходы). Он объявляется либо в **фоновом,** либо в **фоновом изображении** .
|
|||
|
|
```
|
|||
|
|
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](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
|