Линейный градиент CSS онлайн урок.


Возможно, наиболее распространенным типом градиента, который мы видим в веб-дизайне, являетсяlinear-gradient (). Это называется «линейным», потому что цвета текут слева направо, сверху вниз или под любым углом, выбранным вами в одном направлении.

Линейные градиенты были введены на уровне CSS 3 как часть значений CSS Image Values ​​и замененного содержимого . Может показаться забавным каталогизировать эту функцию с изображениями, но градиенты - это в основном способ генерации изображения изначально в коде без использования программного обеспечения для редактирования изображений. Таким образом, градиенты применяются к свойствам фона, которые мы будем использовать прямо сейчас.

# Синтаксис

Синтаксис довольно прост и объявлен либо в объектеbackground, либо вbackground-imageв CSS. В основном это читается на простом английском языке:

Создайтефоновое изображение, которое представляет собойлинейный градиент, который перемещается[в этом направлении или под этим углом]и начинается с[одного цвета] и заканчивается[другой цвет].

Официальный синтаксис выглядит следующим образом:

linear-gradient() = linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

# Использование

В самом основном, это переводится на практике:

.gradient {
background-image:
linear-gradient(
red, #f06d06
);
}

Мы не объявляли& lt; angle & gt;в приведенном выше примере. CSS будет считатьсверхув этом сценарии, гдекрасныйявляется начальным цветом и переходит в следующий цвет:

Мы могли бы написать то же самое двумя другими способами:

/* Explicitly declare the direction */
background-image: linear-gradient(to bottom, red, #f06d06);

/* Explicitly declare the angle, in degrees */
background-image: linear-gradient(72deg, red, #f06d06);

# Изменение направлений

Чтобы сделать это слева направо, вы передаете дополнительный параметр в начале функцииlinear-gradient (), начиная со словадо, который указывает направление:

.gradient {
background-image:
linear-gradient(
to right,
red, #f06d06
);
}

Этот синтаксисtoтакже работает для углов. Например, если вы хотите, чтобы ось градиента начиналась в нижнем левом углу и переходила в верхний правый угол, вы могли бы сказатьв верхнем правом углу:

.gradient {
background-image:
linear-gradient(
to top right,
red, #f06d06
);
}

Если это поле было квадратным, угол этого градиента был бы45deg, но поскольку это не так, это не так. Если вы хотите убедиться, что это45deg, вы можете объявить точный угол, только отбрасываядоиз синтаксиса:

.gradient {
background-image:
linear-gradient(
45deg,
red, #f06d06
);
}

# Цепь нескольких цветов

Вы не ограничены только двумя цветами. Фактически, вы можете иметь столько разделенных запятыми цветов, сколько хотите. Вот четыре:

.gradient {
background-image:
linear-gradient(
to right,
red,
#f06d06,
rgb(255, 255, 0),
green
);
}

... и обратите внимание, что функция принимает все формы синтаксиса цвета , включая именованные, шестнадцатеричные, RGB и HSL.

Вы также можете объявить, где вы хотите, чтобы какой-либо конкретный цвет начинался. Эти начальные точки называютсяcolor-stops. Предположим, вы хотите, чтобы желтый цвет занимал большую часть пространства, но немного красный в начале. Вы можете сделать желтыйcolor-stopдовольно рано. В следующем примереredработает до10%, а затемжелтыйотбирает оттуда:

.gradient {
background-image:
linear-gradient(
to right,
red,
yellow 10%
);
}

# Жесткий цвет останавливается

Мы склонны думать о градиентах как затухающих цветах, но если у вас есть две остановки цвета, которые являются одинаковыми, вы можете сделать сплошной цвет мгновенно измениться на другой сплошной цвет. Это может быть полезно для объявления фона полной высоты, который имитирует столбцы или полосы:

.columns-bg {
background-image:
linear-gradient(
to right,
#fffdc2,
#fffdc2 15%,
#d7f0a2 15%,
#d7f0a2 85%,
#fffdc2 85%
);
}

# Поддержка браузера

Поддержка браузера для линейных градиентов является прочной. Был момент, когда все основные браузеры поддерживали градиенты с использованием префикса поставщика. Если ваша поддержка браузера должна быть очень глубокой, вы можете использовать Autoprefixer или аналогичный инструмент, который обрабатывает префикс поставщика для вас, а не сам управлять ими.

Эти данные поддержки браузера - от Caniuse , который имеет более подробную информацию. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

10 *11.6 *3.6 *10

Android Firefox57
iOS SafariOpera MobileOpera MiniAndroidAndroid Chrome
5.0-5.1 *12 *Нет4 *64

/* "Invalid", but works in 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* Valid, works in 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Здесь есть некоторые соображения относительно принятия решения об использовании этого или нет:

  1. фильтробычно считается плохой практикой для производительности
  2. background-imageпереопределяетфильтр, поэтому, если вам нужно использовать это для резервного копирования, затем фильтры отключены. Если сплошной цвет является приемлемым отступлением (background-color), тогда фильтр является возможностью.

Несмотря на то, что фильтры работают только с шестнадцатеричными значениями, вы все равно можете получить альфа-прозрачность, предварительно задав шестнадцатеричное значение с прозрачностью от 00 (0%) до FF (100%). Пример:

rgba (92,47,90,1) == # FF5C2F5A
rgba (92,47,90,0) == # 005C2F5A

# Wrapping Up

Phew, это было много информации для кажущейся простой концепции! Линейные градиенты, по своей сути, - это то, как цвета переходят из одного в другое в одном направлении. Однако синтаксис позволяет нам манипулировать тем, как и где происходят эти переходы, которые позволяют нам создавать интересные шаблоны.

# Дополнительные ресурсы