Линейный градиент. Взгляд на CSS3 градиент (линейный и радиальный градиенты)

Когда мы говорим о градиентах в 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 являются мощным средством, учитывая бесконечное число вариантов.

Последнее обновление: 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)). После этого браузер повторяет градиент, пока не заполнит всю поверхность элемента.

Скоро, уже совсем скоро, сайты будут легче загружаться, и делать их можно будет вообще без картинок.

Уже сейчас в современных браузерах можно сделать градиентный фон любой сложности при помощи CSS, и при этом совершенно без картинок.

Создаём CSS-градиенты без картинок

Предположим, что мы хотим сделать градиентный переход в фоне от серого к черному. Для этого корпорация W3 предложила в CSS3 использовать специальную директиву linear-gradient.

Итак, по версии W3 для того, чтобы сделать градиентный фон достаточно написать в селекторе блока:

Background: linear-gradient(start, color1 position1, color2 position2,...,colorN positionN);

И браузер самостоятельно прорисует градиентный фон в блоке.

Очевидно, что цветов и контрольных точек в градиенте может быть много. Параметр start указывает в каком направлении должен распространяться градиент - это может быть или top для вертикально-направленного градиента или left для горизонтально-направленного.

Не все браузеры поддерживают такую фишку, поэтому пока существует ряд ухищрений. Для совсем старых браузеров нужно либо указывать какой-то средний цвет фона (градиента не будет вовсе, но фон не будет белым), или указывать картинку с градиентом (правда, если цель использования linear-gradient на CSS - это сокращение количества загружаемых картинок, то это бесполензно, потому, что во всех браузерах картинка все-равно подгрузится, хоть и будет потом заменена на linear-gradient).
Для IE-подобных браузеров можно использовать градиенты, основанные на фильтрах, а для браузеров на webkit (Safari, Chrome) и gecko (Mozilla), как всегда существует альтернатива: -webkit-gradient и -moz-linear-gradient, которые принимают похожие параметры. Как это всё должно работать смотрите в следующем код-блоке:

Background: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); background: -moz-linear-gradient(top, #ccc, #000);

После рендеринга это выглядит вот так.

Влад Мержевич

Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.

Пример 1. Градиент

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

Результат данного примера показан на рис. 1.

Рис. 1. Линейный градиент для абзаца

В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.

Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется 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 через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.