Линейный градиент CSS - это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background .
Синтаксис CSS linear-gradient
позиция, цвет1, цвет2,... );
- позиция
- указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
- to top - переход снизу вверх (0deg)
- to left - переход справа налево (270deg)
- to bottom - переход сверху вниз (180deg)
- to right - переход слева направо (90deg)
- to top left - переход правого нижнего угла к левому верхнему
- to top right - переход от левого нижнего угла к правому верхнему
- to bottom left - переход от правого верхнего угла к левому нижнему
- to bottom right - переход от левого верхнего угла к правому нижнему
- цвет1 - начальный цвет
- цвет2 - конечный цвет
Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).
Примечание 1Можно задавать переход нескольких цветов через запятую.
Как сделать нелинейное изменение градиентаСинтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например
background : linear-gradient (позиция, цвет1 процент, цвет2 процент );
Примечание 2
Для браузеров нужно задавать это свойство с вендорными префиксами : -moz-,-webkit-, -ms-, -o
Примеры с линейными градиентами
Пример 1. Стандартные переходы цветов
Пример 2. Множественный линейный градиент
Сделаем множественный линейных градиент, т.е. цвет будет меняться из одного в другой несколько раз.
На странице преобразуется в следующее
Пример 3. Красивая кнопка на сайте с линейным градиентом
Сделаем множественный линейный градиент, т.е. цвет будет меняться из одного в другой несколько раз на примере html кнопки на сайте .
BUTTON
На странице преобразуется в следующее
Когда мы говорим о градиентах в CSS, мы говорим о цветных градиентах .
В CSS существует два типа градиентов:
- линейные : цвета идут от одной точки к другой, по прямой линии;
- радиальные : цвета идут от центра круга к его краям, во всех направлениях.
Градиент считается фоновым изображением и должен использоваться с соответствующим свойством.
linear-gradient
Синтаксис для линейных градиентов является довольно сложным , но основная идея заключается в следующем:
- определить желаемые цвета ;
- где эти цвета должны появиться вдоль оси (в начале, середине, конце и т. д.);
- в каком направлении должен идти градиент.
Давайте начнём с простого градиента из двух цветов:
Div { background-image: linear-gradient(red, blue); }
По умолчанию:
- направление вертикальное , сверху вниз;
- первый цвет в начале (вверху);
- второй цвет в конце (внизу).
Изменение направления
Если направление сверху вниз вам не подходит, вы можете поменять его на один из вариантов:
- определить назначение градиента , с помощью таких ключевых слов, как to left top ;
- определить конкретный угол в градусах, вроде 45deg .
Это направление должно быть установлено перед цветом:
Div { background-image: linear-gradient(to bottom right, yellow, purple); width: 200px; }
Если вы хотите задать конкретный угол , то можете использовать значение в градусах :
- 0deg - снизу вверх;
- 20deg - немного по диагонали, идущей по часовой стрелке;
- 90deg - подобно 15 часам, слева направо;
- 180deg - это значение по умолчанию, сверху вниз.
Div { background-image: linear-gradient(20deg, green, blue); width: 150px; }
Добавление большего количества цветов
Вы можете вставить столько цветов, сколько захотите. Они будут равномерно распределены вдоль оси:
- два цвета : 0% и 100%
- три цвета : 0%, 50% и 100%
- четыре цвета : 0%, 33%, 67% и 100%
Div { background-image: linear-gradient(orange, grey, yellow); width: 150px; }
Определение конкретных точек цвета
Если вы не хотите, чтобы цвет распределялся равномерно, то можете установить определённые позиции цвета , используя либо проценты (%), либо пиксели (px):
Div { background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px; }
В данных параметрах:
- у цвета orange не задана позиция цвета, так что значение по умолчанию равно 0%;
- цвет grey ближе к верху, на 10% вместо 50%;
- цвет yellow занимает половину градиента, от 50% и до конца 100%.
radial-gradient
В то время как линейные градиенты идут вдоль одиночной оси, радиальные градиенты распространяются во всех направлениях. Их синтаксис очень похож на линейные градиенты, поскольку у тех и других есть точки цвета . Но вместо указания направления вам необходимо задать:
- форму : круг или эллипс;
- начальную точку : которая будет центром круга или эллипса;
- конечную точку : где будет край круга или эллипса.
Div { background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px; }
По умолчанию:
- градиент является эллипсом ;
- первый цвет начинается в центре ;
- последний цвет заканчивается в самом дальнем углу .
Начальная позиция
Начальная позиция работает как background-position . Вы можете установить её через ключевое слово at .
Div { background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px; }
Конечная позиция
По умолчанию форма завершается в самом дальнем углу . Вы можете выбрать:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
Div { background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px; } div:hover { background-image: radial-gradient(farthest-side at 20px 20px, green, blue); }
Фиксированный размер
Вместо установки начальной и конечной позиций, вы можете просто задать конкретные размеры :
Div { background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px; }
Градиенты в CSS являются мощным средством, учитывая бесконечное число вариантов.
Влад Мержевич
Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.
Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.
Пример 1. Градиент
Здесь обсценная идиома традиционно начинает прозаический образ, но языковая игра не приводит к активно-диалогическому пониманию.
Результат данного примера показан на рис. 1.
Рис. 1. Линейный градиент для абзаца
В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.
Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.
| Позиция | Описание | Вид | |
|---|---|---|---|
| to top | 0deg | Снизу вверх. | |
| to left | 270deg | Справа налево. | |
| to bottom | 180deg | Сверху вниз. | |
| to right | 90deg | Слева направо. | |
| to top left | От правого нижнего угла к левому верхнему. | ||
| to top right | От левого нижнего угла к правому верхнему. | ||
| to bottom left | От правого верхнего угла к левому нижнему. | ||
| to bottom right | От левого верхнего угла к правому нижнему. |
Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.
Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.
Для значения top left и ему подобных угол наклона градиентной линии вычисляется, исходя из размеров элемента так, чтобы соединять две диагонально противоположные угловые точки.
Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.
Пример 2. Полупрозрачные цвета
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Градиент с полупрозрачными цветами
Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.
Пример 3. Градиентная кнопка
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Градиентная кнопка
За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.
Пример 4. Однотонные полоски
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Типичная европейская буржуазность и добропорядочность изящно иллюстрирует официальный язык.
Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.
Рис. 4. Фон из горизонтальных полосок
Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.
CSS функцииОпределение и применение
CSS функция linear-gradient() (линейный градиент) используется для заливки определенной области заданной последовательностью цветовых оттенков с плавными переходами между ними.
Функция линейный градиент является самой простой в понимании, она распространяет градиент по прямой от одного края элемента к другому с плавно переходящими цветовыми оттенками. Для построения линейного градиента достаточно задать начальный и конечный цвет.
Более подробно о работе с градиентами вы можете ознакомиться в статьях « » и « ». Обращаю Ваше внимание, что в статьях освещены нюансы работы со старыми браузерами и приведены многочисленные примеры.
Поддержка браузерами
| Функция | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 12.1 11.1 -o- | 6.1 5.1 -webkit- | 10.0 | 12.0 |
CSS синтаксис:
background-image / background цвет 1 – остановка 1 , . . . , цвет n – остановка n ); /* допускается использование нескольких линейных градиентов в одном объявлении через запятую */Цвет
Создавая градиент, допускается использовать не только «Предопределенные цвета », но и любые « » - шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A.
Направление
Все линейные градиенты (по умолчанию) размещаются по направлению от верхнего края элемента к нижнему . В CSS есть несколько вариантов изменения начальной позиции градиента - это использование значений в градусах, либо ключевых слов.
Для указания начальной позиции градиента применяются следующие ключевые слова:
Для того, чтобы задать угол градиента в градусах необходимо указать значение в диапазоне от 0 до 360 совместно с ключевым словом deg . Современный стандарт допускает использование отрицательных значений.
Линейный градиент, заданный в градусах проходит через середину точки центра элемента и отображается (рендерится) вдоль этой линии. Ниже представлено изображение, на котором указано как располагается градиент под тем или иным углом на примере квадратного элемента:
Значения 0deg , 90deg , 180deg и 270deg соответствуют значениям ранее рассмотренных ключевых слов независимо от того является элемент квадратным или имеет прямоугольную форму. В случае если элемент полностью квадратный, то следующие значения в градусах будут полностью соответствовать ключевым словам:
| Значение в градусах | Соответствует ключевому слову | Размещение градиента |
|---|---|---|
| 0 deg | to top | Снизу вверх. |
| 45deg | to right top * | Градиент размещается под углом 45 градусов к точке пересечения линии координат. |
| 90deg | to right | Слева направо. |
| 135 deg | to right bottom * | Градиент размещается от левого верхнего угла к правому нижнему. |
| 180deg | to bottom | Сверху вниз. Это значение по умолчанию. |
| 225deg | to left bottom * | Градиент размещается от правого верхнего угла к левому нижнему. |
| 270deg | to left | Справа налево. |
| 315deg | to left top * | Градиент размещается от правого нижнего угла к левому верхнему. |
* - верно, только для квадратного элемента. На изображении ниже отображена разница между значениями в 45 градусов и значениями to right top для прямоугольного элемента. Главное, что необходимо понять, что для квадратных элементов значения 45deg и to right top , 135 deg и to right bottom , 225deg и to left bottom , 315deg и to left top будут одинаковы, а для прямоугольных градиентов эти значения будут отличаться:
Точки остановки
Синтаксисом предусмотрена возможность задать для определенного цвета градиента размер, который он занимает по отношению к другим цветам, используя специальные точки остановки .
Точка остановки сообщает браузеру, что градиент должен достичь заданного цвета к заданному значению и плавно перейти к следующему цвету, если он есть.
Допускается указывать значения точек остановки (color stops ) в единицах измерения длины (например – px или em ), так и в процентных значениях . Как правило, процентные значения являются более удобными и адаптивными в использовании.
Версия CSS
CSS3Пример использования
Рассмотрим как указать позицию градиента с использованием ключевых слов:
В данном примере мы создали восемь блоков , для каждого блока мы указали различные направления размещения градиента, которые можно задать с использованием ключевых слов. Кроме того, применили вертикальное выравнивание , , , указали внешние отступы для всех сторон.
Результат нашего примера представлен на изображении:
Рассмотрим как указать позицию градиента с использованием градусов:
В данном примере мы создали элемент высотой 100 пикселей (ширина автоматически растягивается на весь экран). Задали для него трехцветный градиент под углом 135 градусов . Кроме того применили вертикальное выравнивание , выравнивание текста по центру и установили высоту строки равную высоте элемента .
Рассмотрим использование точек остановки градиента на следующем примере:
В данном примере мы создали пять элементов высотой 50 пикселей (ширина автоматически растягивается на весь экран). Задали для них трехцветный градиент , располагающийся слева направо . Кроме того, применили вертикальное выравнивание , выравнивание текста по центру , установили высоту строки равную высоте элемента и указали внешний отступ с нижней стороны равный 0.7em . Для первых четырех блоков указаны значения точки остановки только для красного цвета (остальные цвета занимают равномерное расстояние). Для последнего блока мы указали три точки остановки :
- Первая точка – для красного градиента (15% );
- Вторая точка – для зеленого градиента (60% );
- Третья точка – для синего градиента (70% ). Это значение не повлияет на отображение, так как после этого градиента нет других цветов, и он в любом случае растянется в ширину всего элемента.
Результат нашего примера:
Современный стандарт CSS по аналогии работы с фоновыми изображениями позволяет указать для одного элемента несколько линейных градиентов (функций). Для этого необходимо перечислить их через запятую.
background-image / background : linear-gradient (направление , цвет 1 – остановка 1 , . . . , цвет n – остановка n ), /* запятые после каждой функции обязательны */ linear-gradient (направление , цвет 1 – остановка 1 , . . . , цвет n – остановка n ), ... linear-gradient (направление , цвет 1 – остановка 1 , . . . , цвет n – остановка n );В следующем примере мы создадим флаг Швейцарии (один к одному), используя три градиента , которые мы укажем в одном объявлении:
- Первый градиент задает сверху вниз три части градиенту: 30% красный цвет , с 30% до 70% прозрачный и оставшаяся часть красный цвет . Зеленым отображен прозрачный участок.
- Второй градиент задает слева направо (под углом 90 градусов ) симметричное сочетание красный – прозрачный – прозрачный – белый – белый – прозрачный – прозрачный – красный . Как вы можете догадаться, повтор цвета необходим, чтобы убрать плавный переход между цветами (отсутствие размытия).
- Третий градиент придает окончательный вид, флагу окрашивая не нужные в нашей композиции места.
Результат нашего примера.
CSS-градиент представляет собой переходы от одного цвета к другому.
Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .
Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .
Как сделать градиент в CSS
Поддержка браузерами
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
1. Линейный градиент linear-gradient()
Рис. 1. Линия градиента, начальная и конечная точки и угол градиента
Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента .
Если направление не указано, используется значение по умолчанию — сверху-вниз .
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
Background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);
Направление
градиента может быть задано двумя способами:
с помощью угла наклона
в градусах deg , значение которого определяет угол наклона линии внутри элемента.
Div { height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); }
с помощью ключевых слов to top , to right , to bottom , to left , которые соответствуют углу градиента, равному 0deg , 90deg , 180deg и 270deg соответственно.
Div { height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); }
Если направление задано парой ключевых слов, например, to top left , то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.
Div { height: 200px; background: linear-gradient(to top left, powderblue, pink); }
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops . Точки остановки задаются в % , где 0% — начальная точка, 100% — конечная точка, например:
Div { height: 200px; background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%); }
Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:
Div { height: 200px; background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%); }
2. Радиальный градиент radial-gradient()
Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
Background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);
Форма градиента определяется ключевыми словами circle или ellipse . Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.
Div { height: 200px; background: radial-gradient(white, #FFA9A1); }
Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position , с добавлением приставки at . Если позиция центра не задана, используется значение по умолчанию at center .
Div { height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); }
С помощью пары значений, указанных в единицах длины % , em или px , можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.
Div { height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); }
Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).
div { height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); }С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.
Мяч
div { width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 65% 15%, aqua, darkblue); }Кнопка
Почтовая марка
Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.
Jpg">
