CSS3
October 19, 2020

① Линейный градиент

CSS-градиент представляет собой переходы от одного цвета к другому.

Градиенты создаются с помощью функций linear-gradient() и radial-gradient().

Градиентный фон можно устанавливать в свойствах background, background-image, border-image и list-style-image.


Содержание:

1. Линейный градиент

2. Радиальный градиент

3. Повтор градиента

4. Кроссбраузерный градиент, комбинация градиента и фонового изображения


Поддержка браузерами

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

Линейный градиент linear-gradient()

📷 РИС. 1. ЛИНИЯ ГРАДИЕНТА, НАЧАЛЬНАЯ И КОНЕЧНАЯ ТОЧКИ И УГОЛ ГРАДИЕНТА

Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.

Если направление не указано, используется значение по умолчанию — сверху-вниз.

Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

CSS
background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);

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

CSS
div {
height: 200px;
background: linear-gradient(45deg, #EECFBA, #C5DDE8);
}
📷 linear-gradient(45deg, #EECFBA, #C5DDE8)

С помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.

CSS
div {
height: 200px;
background: linear-gradient(to right, #F6EFD2, #CEAD78);
}
📷 linear-gradient(to right, #F6EFD2, #CEAD78)

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

CSS
div {
height: 200px;
background: linear-gradient(to top left, powderblue, pink);
}
📷 linear-gradient(to top left, powderblue, pink)

Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:

CSS
div {
height: 200px;
background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
}
📷 linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%)

Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

CSS
div {
height: 200px;
background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);
}
📷 linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%)

Продолжение в следующей статье!