Когда мы говорим о градиентах в 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 через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.
- Перевод
Работа над переводом о проекте singlediv.com показала, что некоторые инструменты CSS имеют более широкое применение, чем я привыкла думать. Но для того чтобы суметь найти это применение, необходимо четко понимать особенности свойства. Ярким примером стал linear-gradient, который Линн Фишер виртуозно использовала в своих работах.
Хотите сделать симпатичный градиентный фон на своем сайте? background-image: linear-gradient(red, blue); готово! Да, это немного скучно. Поэтому, если вы хотите чего-то большего, рекомендую вам эту с советами по css и MDN страницу. Вы еще здесь? Тогда давайте рассмотрим некоторые моменты, как на самом деле работают линейные градиенты. Для начала, давайте вспомним синтаксис, который можно использовать в функции линейного градиента:
linear-gradient ([от <угла> | до <стороны-или-угла>]?,
Функция принимает опциональный первый аргумент, который определяет угол градиента, и который можно выразить с помощью единицы измерения (градус, радиус, град, оборот) или в виде ключевого слова (стороны или угла.
После этого функция принимает список цветов.
Поле градиента
У градиентного изображения нет размеров, оно бесконечно в отличие от других фоновых изображений. Видимые размеры ему придает поле градиента, т.е. область, в которой оно отображается.Как правило, когда вы применяете фоновое изображение в виде линейного градиента к элементу DOM, этой областью является рамка границ элемента (которая является той самой областью, в которой отображается фоновый цвет).
При этом если вы используете еще и CSS-свойство background-size (размер фона) и устанавливаете его, скажем, на 200px * 200px, тогда поле градиента будет иметь этот размер и будет, по умолчанию, размещаться в левом верхнем углу DOM-элемента, если только вы также не установите background-position (положение фона).
Поэтому, читая следующие разделы, просто помните, что поле градиента не всегда расположено так же и имеет такие же размеры, как и DOM-элемент, к которому вы применяете этот градиент.
Линия градиента
В поле градиента линия, которая проходит через центр и вдоль которой распределяются цвета, называется линией градиента. Эту линию можно описать проще в ходе разъяснения угол градиента, поэтому об этом более подробно следующем разделе.Угол градиента
Вполне очевидно, что угол линейного градиента используется для определения того, в каком направлении пойдет градиент. Но давайте рассмотрим этот аспект подробнее.Если С – это центральная точка поля градиента, тогда А – это угол между вертикальной линией, проходящей через С, и линией градиента, которая также проходит через С, и вдоль которой распределяются стоп-цвета градиента.
Этот угол можно определить двумя способами:
С помощью одного из ключевых слов: to top (вверх), to bottom (вниз), to left (влево), to right (вправо), to top right (вправо вверх), to top left (влево вверх), to bottom right (вправо вниз), to bottom left (влево вниз);
Или путем определения угла с числом и единицей измерения, например 45deg (45 градусов), 1turn (1 оборот);
Если угол не указывается, то по умолчанию он направляется вниз (то есть это 180 градусов или 0,5 оборота):
На этом и на следующих изображениях поле градиента ограничено прямоугольником, а линия градиента – это жирная серая линия, которая проходит через центр, и вдоль которой отображаются цвета.
В вышеприведенном примере угол не указан, поэтому градиент от белого к красному двигается сверху вниз, что соответствует ключевому слову to bottom (вниз), как показано ниже:
И, как показано на 2 следующих изображениях, to top (вверх) соответствует углу в ноль градусов:
Еще один важный момент, который стоит учитывать, используя ключевые слова угла - что to top right (вправо вверх), например, (или любое другое ключевое слово угла) зависит от размеров поля градиента.
Логика заключается в том, что если бы вы хотели сделать градиент от красного к синему в направлении верхнего правого угла элемента, тогда такой элемент должен быть именно синим в верхнем правом углу, а фиолетовый цвет в середине градиента должен формироваться вокруг линии, которая проходит из верхнего левого в нижний правый угол. Вот как это выглядит на изображении:
Поэтому to top right (вправо вверх) не означает, что линия градиента проходит через правый верхний угол, и это даже не значит, что угол градиента равен 45 градусам!
Давайте посмотрим на то, как перемещается линия градиента при изменении угла, с помощью следующей анимации:
На этой анимации угол наклоняется от 0 до 360 градусов с шагом в 10 градусов. Низкое разрешение GIF даже позволяет лучше рассмотреть, как различные цвета отображаются в виде «линий», которые всегда перпендикулярны линии градиента.
Давайте вспомним, что мы знаем об углах градиента:
Угол измеряется между линией градиента и линией, которая выходит из центра поля градиента и движется вверх.
Поэтому 0 градусов означает вверх.
Стандартное значение угла, если оно не указывается, это вниз, что равно 180 градусам.
Ключевые слова угла зависят от размеров поля градиента.
Длина линии градиента
Прежде чем мы сможем увидеть, как распределяются цвета вдоль линии градиента, нам нужно объяснить один момент. Вы, возможно, заметили в предыдущей анимации, что цвета иногда располагаются за пределами поля градиента, что может с первого взгляда выглядеть немного странным, но это логично, если вы знаете причину.Посмотрите на пример:
Нам нужен градиент от красного к синему с углом 45 градусов, и, ввиду соотношения сторон поля градиента, линия градиента не может проходить через правый верхний угол.
Но браузер хочет (то есть, спецификации заставляют его) сделать правый верхний угол чисто синим. Если бы мы сделали так, чтобы линия градиента начиналась и заканчивалась на краях поля, тогда бы синий цвет занял большую часть поля, а градиент бы так не расплывался.
Поэтому, чтобы это сделать, линия градиента иногда должна выходить за рамки поля градиента. При этом довольно легко узнать, где она начинается, и где заканчивается. Просто начертите линию, которая проходит через ближайший угол, и которая перпендикулярна линии градиента. Точка, где эта линия пересекает линию градиента, и есть местом начала/конца.
Фактически, если вы задает ширину поля градиента W, высоту H, и угол градиента, тогда длина линии градиента составляет:
Abs(W * sin(A)) + abs(H * cos(A))
Цвета
Цвета представляют собой список, разделенный запятыми, в котором каждый элемент можно определить следующим образом:<цвет> [<процентное соотношение> | <длина>]?
Поэтому необязательно указывать, где должны размещаться цвета на линии градиента. Например:
Ни один из цветов не имеет своего положения, поэтому браузер сам определил их позиции.
На самом простом примере только с 2 цветами, цвет 1 будет размещаться на 0% (в начале линии градиента), а цвет 2 – на 100% (в конце линии градиента).
Потом, если вы добавите третий цвет, цвет 1 у вас все равно останется на 0%, цвет 2 будет на 50%, а цвет 3 – на 100%, и так далее.
В вышеприведенном примере было задано 5 стоп-цветов, и браузер рассчитал их относительное положение как 0%, 25%, 50%, 75%, 100%. Причиной тому является равномерное распределение вдоль поля градиента.
Позицию цвета можно выразить либо с помощью процентного соотношения (по отношению к размеру линии градиента) или в виде длины CSS (где действует любая единица измерения CSS).
Вот пример:
Как вы видите, каждый из 5 стоп-цветов имеет свое положение, заданное в пикселях. Эти положения рассчитываются от начала линии градиента.
Используя такие позиции, вы можете получить несколько интересных эффектов. Например, вы можете использовать градиент, чтобы не рисовать градиент как таковой, а оставить несколько цветов:
На изображении выше 7 цветов, и они установлены таким образом, чтобы следующий цвет начинался в точно той же позиции, что и последний, что означает, что браузеру не нужно заполнять пространство между двумя стоп-цветами градиентом.
Конечно, это все мило и забавно, но что произойдет, если вы смешаете позиционированные цвета с непозиционированными? Тогда вы заставите браузер работать больше и попросите его автоматически распределять цвета, для которых вы не указали позицию:
В этом простом примере второй цвет (оранжевый) не имеет позиции, поэтому браузер сам определяет ее и находит подходящее место между ранее заданным и следующим цветом. Здесь это очень просто, так как непосредственные соседи второго цвета имеют свою позицию, но если позиции есть только у некоторых цветов, или если предыдущие или следующие цвета не имеют позиции, все усложняется.
Давайте рассмотрим несколько примеров:
На примере выше только третий цвет (желтый) позиционирован на 30%. Поэтому, чтобы лучше распределить все остальные, первый размещается на 0%, последний – на 100%, а остальные цвета распределяются в промежутке (так, что оранжевый заканчивается непосредственно между 0% и 30%, а красный – между 30% и 100%).
На примере выше первый и последний цвета позиционированы, поэтому остальные равномерно распределяются между этими двумя.
Конечно, было бы слишком просто, если бы 0% и 100% были жесткими рамками, за которые нельзя выходить. Но как видно из предыдущего примера, последний цвет расположен на 120%, и поэтому все остальные цвета должны распределяться соответствующим образом относительно данной позиции (начальной точкой по умолчанию в этом случае остается 0%).
И если вы хотите заставить свой браузер работать еще больше, почему бы не указать порядок позиций?
На самом деле цвета должны иметь порядок, но ничто не запрещает вам этого не делать, и ничего ужасного не произойдет, если вы этого не сделаете. Ваш браузер просто все исправит, как показано ниже:
Начнем с первого цвета (красного), расположенного на 30%. Дальше второй цвет расположен на 10%, что уже неправильно, так как, как сказано выше, цвета должны указываться по возрастанию позиции. Поэтому здесь браузер исправляет позицию второго цвета и устанавливает его в то же положение, что и у предыдущего цвета (30%). Далее идет третий цвет (желтый), расположенный на 60%, что правильно, но за ним следует четвертый (синий) на 40%. Опять же позиция корректируется и устанавливается на то же значение, что и предыдущего позиционированного цвета.
В конечном итоге, как показано на примере выше, последний цвет (синий) позиционируется неправильно и браузер делает его позицию такой же, как и у предыдущего цвета, который в данном случае не является ни его непосредственным соседом (желтым), ни соседом цвета, который стоит перед ним (оранжевым), поэтому он должен вернуться к первом цвету (красному). Таким образом, все цвета между красным и синим установлены в положение 30% и поэтому невидимы.
Инструменты
Все скриншоты в этой статье взяты из простого инструмента , который я сделал на codepen, и который позволяет вводить функцию линейного градиента и видеть поле градиента, линию градиента, угол, а также информацию о цветах поверх элемента.В инструменте есть все виды багов и ограничений (см. комментарии в javascript), поэтому не ожидайте от него многого.
Теги:
- CSS
- linear-gradient
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами . Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter , также для IE9 можно использовать SVG.
Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .
Linear-gradient
Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:
Background: linear-gradient(orangered, gold);
Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.
Направление можно задавать градусами или ключевыми словами.
Ключевыми словами: to top = 0deg ; to right = 90deg ; to bottom = 180deg - значение по умолчанию; to left = 270deg .
Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left .
Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:
Вот код самого первого квадрата, для примера:
Top-left { background: linear-gradient(to top left, purple, crimson, orangered, gold); }
Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg - располагается строго под этим углом независимо от размеров фигуры.
Разница хорошо видна на прямоугольных фигурах:
Также можно задавать точки остановки для цветов градиента, значения задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.
Примеры задания значений в % , в em и значения, выходящие за границы элемента:
Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:
Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:
Полоски на фоне сайдбара - ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.
Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.
При отсутствии ограничений код может быть гораздо короче:
Light { background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) center center / 2em; } .dark { background: steelblue linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) center center / 100% 1em; }
В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй - определяем цвета градиента и границу между ними, в третьей - задаем положение и размер получившегося изображения. Самая важная часть - размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно:)
Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.
Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:
Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать .
Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться CSS.coloratum , инструментом от Lea Verou .
Помимо обычного linear-gradient можно сделать repeating-linear-gradient - повторяющийся градиент
Примерный код:
Background: repeating-linear-gradient(green, green .5em, transparent .5em, transparent 1em);
К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .
Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.
Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти .
Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/ . Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.
Последнее обновление: 21.04.2016
Градиенты представляют плавный переход от одного цвета к другому. В CSS3 имеется ряд встроенных градиентов, которые можно использовать для создания фона элемента.
Градиенты в CSS не представляют какого-то специального свойства. Они лишь создают значение, которое присваивается свойству background-image .
Линейный градиент распространяется по прямой от одного конца элемента к другому, осуществляя плавный переход от одного цвета к другому.
Для создания градиента нужно указать его начало и несколько цветов, например:
Background-image: linear-gradient(left,black,white);
В данном случае началом градиента будет левый край элемента, который обозначается значением left . Цвета градиента: черный (black) и белый (white). То есть начиная с левого края элемента до правого будет плавно идти переход из черного цвета в белый.
В использовании градиентов есть один недостаток - многообразие браузеров вынуждает использовать префикс вендора:
Webkit- /* Для Google Chrome, Safari, Microsoft Edge, Opera выше 15 версии */ -moz- /* Для Mozilla Firefox */ -o- /* Для Opera старше 15 версии (Opera 12) */
Так, полноценное использование градиента будет выглядеть следующим образом:
Линейный черно-белый градиент
Для установки начала градиента можно использовать следующие значения: left (слева направо), right (справа налево), top (сверху вниз) или bottom (снизу вверх). Например, вертикальный градиент будет выглядеть следующим образом:
Background-image: linear-gradient(bottom,black,white);
Также можно задать диагональное направление с помощью двух значений:
Background-image: linear-gradient(top left,black,white);
Кроме конкретных значений типа top или left также можно указать угол от 0 до 360, который определит направление градиента:
Background-image: linear-gradient(30deg,black,white);
После величины углы указывается слово deg .
К примеру, 0deg означает, что градиент начинается в левой части и перемещается в правую часть, а при указании 45deg он начинается в нижнем левом углу и перемещается под углом 45° в верхний правый угол.
После определения начала градиента, можно указать применяемых цветов или опрные точки. Цветов не обязательно должно быть два, их может быть и больше:
Background-image: linear-gradient(top, red, #ccc, blue);
Все применяемые цвета распределяются равномерно. Однако можно также указать конкретные места фона для цветовых точек. Для этого после цвета добавляется второе значение, которое и определяет положение точки.
Background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);
Повторяющийся градиент
С помощью repeating-linear-gradient можно создавать повторяющиеся линейные градиенты. Например:
Background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);
В данном случае градиент начинается с левого края элемента с полоски серого цвета (#ccc) шириной 20 пикселей, далее до 30 пикселей идет переход к красному цвету, а затем до 40 пикселей выполняется обратный переход к светло-синему цвету (rgba(0, 0, 126, .5)). После этого браузер повторяет градиент, пока не заполнит всю поверхность элемента.
