CSS: Радиальный градиент для фона. Градиенты CSS3
Чтобы не искать по Интернету обрывки информации, лучше собрать все в одном месте. Сегодня поговорим о градиентах CSS3 — фишка нужная, часто используемая и, безусловно, полезная при разработке и верстке. Было желание сделать энциклопедическую статью, а как получилось — судить вам.
«Градиент - вид заливки в компьютерной графике, в которой необходимо задать цвет и прозрачность определённых (ключевых) точек, а цвет и прозрачность остальных точек рассчитываются относительно них по определённым математическим алгоритмам. Таким образом можно получать плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.» Википедия
Кстати, для тех, кто только начинает осваивать CSS — замечательная статья от Натальи Митрофановой — Как использовать CSS . Всем новичкам очень рекомендую
ознакомиться. Доступно, понятно — в общем, на отлично
Но вернемся к теме статьи. В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим каждый вид подробнее, чтобы понять специфику их использования.
Линейный градиент CSS3
Линейный градиент это такой, в котором цвет переходит один в другой пропорционально между двумя точками по прямой линии. Проще всего — на примере:
Div {/*-префикс-linear-gradient(стартовый цвет,финишный цвет);*/ background: -moz-linear-gradient(#FFF, #000); background: -ms-linear-gradient(#FFF, #000); background: -o-linear-gradient(#FFF, #000); background: -webkit-linear-gradient(#FFF, #000); }
Элементарный пример — линейный градиент, начинающийся с белого и заканчивающийся черным цветом. Префикс вендора — обязателен на данный момент, единого стандарта нет, так как градиенты — все же экспериментальная функция, несмотря на поддержку всеми браузерами.
Пойдем дальше и рассмотрим более сложный пример — изменим направление градиента. Направление в синтаксисе носит название point и требует двух значений — откуда и куда. Всего есть пять значений: top , bottom , left , right и center. Соответственно, в написании направления нужно использовать два значения. Первым идет «откуда», вторым — «куда». Но есть небольшая тонкость — если указано только одно расположение — второе по умолчанию будет center . Учитывайте это в своих проектах.
В примере выше не указано направление градиента, поэтому по умолчанию выбирается направление top center.
Div { background: linear-gradient(center top, #FFF, #000); } div { background: linear-gradient(top, #FFF, #000); }
Эти записи, на самом деле, аналогичны предыдущему примеру, но для простоты и уменьшения размера обычно в таком случае направление опускают, за ненадобностью.
Как альтернатива направлению, а скорее, как дополнение — в записи можно использовать углы, значение которых может задаваться в нескольких величинах, среди которых градусы, радианы и прочие геометрические штуки. Но для простоты — лучше использовать градусы, так будет понятно для всех. Градуировка расположена по часовой стрелке — 0 или 360 это верх, 90 — право, 180 — низ и 270 — лево. Допустима запись со знаком минус — в таком случае градуировка идет против часовой стрелки.
Рассмотрим несколько примеров, для понимания процесса:
Ex1 { background: linear-gradient(left, #FFF, #000); } ex2 { background: linear-gradient(right, #FFF, #000); } ex3 { background: linear-gradient(225deg, #FFF, #000); }
Первый вариант — слева направо, второй — справа налево, третий — 225градусов. Градусы позволяют более точно направить градиент, чего нельзя добиться с помощью слов.
Следующий интересный момент при работе с градиентами —
Добавление стоп-цвета
Пока мы использовали только простые градиенты, состоящие из двух цветов. Теперь займемся примером посложнее — добавим еще один цвет к градиенту. Примерно так:
Div {background: linear-gradient(left,#000,#FFF,#000);}
В этом примере добавляется белый цвет между двумя черными. В результате получится градиент, который из черного переходит в белый и возвращается в исходное состояние — к черному. Нагляднее работу стоп-цвета покажу в нескольких примерах:
Ex1 {background: linear-gradient(left,#000,#FFF,#000);} ex2 {background: linear-gradient(left,#000,#FFF 75%,#000);} ex3 {background: linear-gradient(bottom,#000,#FFF 20px,#000);} ex4 {background: linear-gradient(45deg,#000,#FFF,#000,#FFF,#000);}
Результат на картинке:
В первом примере как раз то, о чем говорилось выше — белый точно между двумя черными(черт, как неполиткорректно получилось).
Второй пример — тоже самое, только указывается, в каком месте будет находится стоп-цвет. В данном случае — 75% от начала. Синтаксис прост — на примере видно. После значения цвета указываем позицию в процентах. Никаких запятых ставить не нужно.
Третий пример — показывает, что значение позиции стоп-цвета можно указывать не только в процентах, но и в пикселах (а также во всех других единицах, которые CSS понимает, но в основном используются проценты и пикселы)
Четвертый — пять стопов цвета, измененное направление. Все достаточно просто.
Радиальный градиент CSS3
На самом деле — гораздо интереснее с ним работать, чем с линейным градиентом. Но, к сожалению, его вписать в дизайн удается не всегда. Радиальный градиент — тот, который распространяется от точки в центре по окружности.
E { background: radial-gradient(позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп); }
Синтаксис практически тот же, с одним отличием — добавилась форма и размер. Форма бывает двух видов — эллипс и круг (ellipse и circle, соответственно, по умолчанию значение:эллипс) Значение размера может принимать одно из шести значений. О них чуть ниже.
Простейший синтаксис выглядит так:
Div {background: radial-gradient(#FFF,#000);}
Радиальные градиенты нужно указывать с вендорным префиксом браузера:
Div { background: -moz-radial-gradient(#FFF, #000); background: -ms-radial-gradient(#FFF, #000); background: -webkit-radial-gradient(#FFF, #000); }
Результат выполнения кода — на картинке:
Рассмотрим код посложнее:
Div { background: radial-gradient(contain circle, #FFF, #000); }
Обратите внимание, в примере два селектора, о которых говорилось выше — форма и размер(положение). Размером значение селектора назвать сложно, скорее это расположение. Но в официальной документации этот селектор обозначен как size, поэтому будем называть его размером. Circle — как раз означает, что градиент будет круглым, а не эллиптическим. Contain — одно из ключевых слов, которое может принять селектор размера. Я опишу каждое, чтобы было понятнее:
- closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle ), или к обоим, горизонтальной и вертикальной сторонам (для ellipse ).
- closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
- farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle ), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse ).
- farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
- contain — Аналогично closest-side .
- cover — Аналогично farthest-corner .
Несколько примеров для наглядности:
Ex1 { background: radial-gradient(circle farthest-side, #000, #FFF); } ex2 { background: radial-gradient(left,circle farthest-side,#000,#FFF); } ex3 { background: radial-gradient(right top,circle cover,#FFF,#000); } ex4 { background: radial-gradient(80% 50%,circle closest-side,#FFF,#000); }
Результат выполнения каждого кода:
Первый пример — круглый градиент, который распространяется к дальней стороне (используется farthest-side )
Второй — центр находится слева, градиент распространен к дальней стороне.
Третий — центр справа сверху, градиент к дальнему углу.
Четвертый — центр расположен в точке, 50% по ширине, 80% по высоте и круглый градиент к ближайшей стороне.
Добавление стоп-цвета
Как и линейные градиенты — радиальные тоже умеют работать с несколькими цветами. Их применение ничем не отличается от линейных, поэтому описывать не буду, только приведу несколько примеров:
Ex1 { background: radial-gradient(circle farthest-side,#000,#FFF,#000); } ex2 { background: radial-gradient(circle farthest-side,#000,#FFF 25%,#000); } ex3 { background: radial-gradient(left,circle farthest-side,#FFF,#000 25%,#FFF 75%,#000); } ex4 { background: radial-gradient(40% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); }
Из кода все видно, вы уже опытные градиентщики
На сегодня все. Статья и так получилась неприлично огромной. Спасибо всем, кто дочитал до этого места. Ретвиты и всякая социальщина только приветствуется. Удачного дня
Рис. 1. Радиальный и линейный градиент
Радиальный градиент создаётся с помощью свойства background или background-image .
Синтаксис
Background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]? , | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]? , | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]? , | at <позиция> , <цвет> [ , <цвет> ]*)
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
circle Радиальный градиент круглой формы. ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию. <радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения - радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента. <позиция>
Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.
- top left = left top = 0% 0% (в левом верхнем углу);
- top = top center = center top = 50% 0% (по центру вверху);
- right top = top right = 100% 0% (в правом верхнем углу);
- left = left center = center left = 0% 50% (по левому краю и по центру);
- center = center center = 50% 50% (по центру) - это значение по умолчанию;
- right = right center = center right = 100% 50% (по правому краю и по центру);
- bottom left = left bottom = 0% 100% (в левом нижнем углу);
- bottom = bottom center = center bottom = 50% 100% (по центру внизу);
- bottom right = right bottom = 100% 100% (в правом нижнем углу).
Значение | Код | Описание | Вид |
---|---|---|---|
closest-side | background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(closest-side at 30px 20px, #fff, #000); | Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса). | |
background: radial-gradient(circle closest-corner at 30px 20px , #fff, #000); background: radial-gradient(closest-corner at 30px 20px , #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока. | ||
background: radial-gradient(circle farthest-side at 30px 20px , #fff, #000); background: radial-gradient(farthest-side at 30px 20px , #fff, #000); | Похож по своему действию на closest-side , но градиент распространяется до дальней стороны блока. | ||
farthest-corner | background: radial-gradient(circle farthest-corner at 30px 20px , #fff, #000); background: radial-gradient(farthest-corner at 30px 20px , #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока, |
Пример
Результат данного примера показан ниже.
Примечание
Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-radial-gradient() .
Opera до версии 12.10 поддерживает -o-radial-gradient() .
Firefox до версии 16 поддерживает -moz-radial-gradient() .
Все свойства с префиксами не используют ключевое слово at при задании положения отправной точки градиента.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- - свойство полностью поддерживается браузером со всеми допустимыми значениями;
- - свойство браузером не воспринимается и игнорируется;
- - при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Радиальный градиент распространяется из центральной точки градиента во все стороны в форме круга или эллипса (форма по умолчанию), демонстрируя плавный переход от одного оттенка цвета к другому. Радиальный градиент создаётся с помощью функции radial-gradient(). Функция создаёт изображение, которое представляет собой радиальный градиент между указанными оттенками цветов. По умолчанию размер градиента соответствует размеру элемента, к которому он применён.
Функция radial-gradient() принимает следующие, разделяемые запятой, аргументы:
- В качестве первого аргумента указываются ключевые слова и/или единицы измерения CSS, определяющие конечную форму, размер и начальное расположение градиента. Необязательный аргумент.
- Разделяемый запятыми список, состоящий из двух или более цветов, за каждым из которых может следовать стоп позиция.
Простейший радиальный градиент требует только два аргумента, определяющие начальный и конечный цвет:
Div { background-image: radial-gradient(cyan, indigo); width: 400px; height: 100px; } Попробовать »
Как и в случае использования линейных градиентов, радиальный градиент может включать список более чем из двух цветов, и к любому цвету можно указать стоп позицию.
Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(cyan, yellow, indigo, white); } #two { background-image: radial-gradient(cyan, yellow 10%, indigo 30%, white 50%); } Попробовать »
Форму радиального градиента можно определить с помощью ключевых слов circle (круг) и ellipse (эллипс), указав одно из них в качестве первого аргумента:
Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(ellipse, cyan, indigo); } #two { background-image: radial-gradient(circle, cyan, indigo); } Попробовать »
По умолчанию браузер располагает центральную точку радиального градиента в центре элемента. Центр градиента можно позиционировать с помощью ключевого слова at, за которым располагаются ключевые слова (top, left, right, bottom, center) или значения в указанных единицах измерения CSS:
Значение | Описание |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom | Если вы указываете только одно ключевое слово, второе будет "center". |
x% y% | Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0% 0%. Правый нижний угол это позиция 100% 100%. Если вы указываете только одно значение, другое значение будет 50%. |
x-pos y-pos | Первое значение это горизонтальная позиция, второе - вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями (0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения. |
Позиционирование градиента указывается до значений цветовых оттенков, но после ключевого слова, определяющего форму градиента (если оно указано):
Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(at right, cyan, indigo); } #two { background-image: radial-gradient(circle at 300px 50px, cyan, indigo, yellow); } #three { background-image: radial-gradient(circle at top left, cyan, indigo, yellow); } Попробовать »
Размер градиента (на сколько большой должна быть конечная форма градиента), можно определить с помощью одного из четырёх ключевых словосочетаний или указания радиуса с помощью единиц измерения CSS (для определения радиуса нельзя использовать проценты).
Ключевые слова | Описание | |
---|---|---|
Конечный размер градиента зависит от расстояния между центром градиента и ближайшей к нему стороной элемента (для круга) или от расстояния между центром и двумя ближайшими к нему сторонами элемента (для эллипса). | ||
Конечный размер градиента зависит от расстояния между центром градиента и ближайшим к нему углом элемента. | ||
Конечный размер градиента зависит от расстояния между центром градиента и самой дальней от него стороны элемента (для круга) или от расстояния между центром градиента и двумя самыми дальними от него сторонами (для эллипса). | ||
Конечный размер градиента зависит от расстояния между центром градиента и самым дальним от него углом элемента. Используется по умолчанию для формы круга или эллипса. |
Ключевые слова, определяющие размер градиента или радиус, указываются до или после ключевого слова, определяющего форму, и обязательно до определения позиции.
Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(circle closest-corner at 100px, cyan 50%, indigo); } #two { background-image: radial-gradient(circle closest-side, cyan, red, indigo); } #three { background-image: radial-gradient(100px circle at 200px, cyan 50%, indigo); } #four { background-image: radial-gradient(170px 50px ellipse at 175px, cyan, #90EE90, rgba(172,160,160,0)); }
Значение -moz-radial-gradient
Обозначает радиальный (круговой) градиент. Применяется к , .
Синтаксис
-moz-radial-gradient
([
Используемые значения
|
Замечания
Градиент - это комбинация двух и более заданных цветов, плавно переходящих друг в друга. В CSS градиенты используют вместо каких-либо изображений, как индикатор загрузки, для улучшения восприятия web-страницы при масштабировании и т.д. Mozilla Firefox поддерживает два вида градиентов: линейный и радиальный.
Mozilla Firefox корректно поддерживает градиенты только как значения для свойства , а заодно и . Вы можете задать значение для градиента вместо URL изображения.
Радиальный или круговой градиент, задаваемый с помощью -moz-radial-gradient , также распространяется вдоль оси. Его можно представить как последовательность кругов, расположенных вдоль оси, для каждого из которых задана точка отсчета (центр) и длина радиуса. Радиальный градиент выглядит следующим образом:
Background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
-moz-radial-gradient не поддерживает повторяющиеся градиенты. По умолчанию градиент растягивается, чтобы заполнить весь элемент, для которого он применяется. Посмотрите статью , чтобы узнать как сделать повторяющийся круговой градиент.
Примеры
В примерах показано как описываются радиальные градиенты с помощью -moz-radial-gradient
Background: -moz-radial-gradient(45px 45px 45deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
Результат выполнения примера:
Background: -moz-radial-gradient(45px 45px, ellipse farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%); no-repeat;
Результат выполнения примера:
Background: -moz-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
a! Градиент является прекрасным инструментом манипуляции с цветом в CSS3 . Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.
Линейный градиент
Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.
В общем случае синтаксис градиента (линейного) выглядит так:
1 | div {
|
Итак, давайте обо всем по порядку.
Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;
Если угол будет отрицательным то позиция смениться с нижнего левого угла на верхний левый.
Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0% .
Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100% . Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50% , то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:
Получаем одинаковые по высоте полоски. C четкой границей, перехода цвета не будет. Чтобы лучше понять как это работает поэкспериментируйте со значениями.
Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:
div {
|
Если не указывать форму, то по-умолчанию будет установлен эллипс.
Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.
Комбинации команд:
- По центру вверху — top — 50% 0%;
- В левом верхнем углу — left top — 0% 0%;
- В правом верхнем углу — right top — 100% 0%;
- По центру — center — 50% 50%;
- Слева по центру — left center — 0% 50%;
- Справа по центру — right center — 100% 50%;
- По центру снизу — bottom — 50% 100%;
- В левом нижнем углу — left bottom — 0% 100%;
- В правом нижнем углу — right bottom — 100% 100%.
Вот пример с процентами:
div {
|
Первое значение по оси Х второе по У .
Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:
Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:
div {
|
Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X .
А теперь до дальних сторон:
div {
|
Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.
В радиальном как и в линейном градиенте для цвета могут быть применены стоп позиции. Хочется также заметить, если необходимо достигнуть прозрачности цветов то использовать следует rgba .
div {
|
Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.
В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.
div {
|
Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.
div {
|
0%
,
#FFAE00
100%
)
;
/* для Firefox */
background-image
:
-ms-linear-gradient(top
,
#FF5A00
0%
,
#FFAE00
100%
)
;
/* для IE 10+ */
background-image
:
-o-linear-gradient(top
,
#FF5A00
0%
,
#FFAE00
100%
)
;
/* для Opera */
background-image
:
linear-gradient(top
,
#FF5A00
0%
,
#FFAE00
100%
)
;
/* стандартный синтаксис */
}
div {
filter
:
progid:
DXImageTransform.Microsoft
.gradient(startColorstr=
#33FF5A00
,
endColorstr=
#33FFAE00
)
;
}
Где 33 сразу после решетки это процент насыщенности цвета.
Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на