Радиальный градиент css3. CSS: Радиальный градиент для фона. Линейный градиент CSS3

Рис. 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% (в правом нижнем углу).

<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. <размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента. Табл. 1. Ключевые слова для изменения размера градиента

Значение	Код	Описание	Вид
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 (Черновик спецификации ) - первая черновая версия стандарта.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.

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

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

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

Linear-gradient

На самом деле существует сразу несколько видов CSS3 градиентов. Это самый простой градиент.
div {
background-color: #444444;
background-image: -webkit-gradient (linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-linear-gradient (top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background-image: -moz-linear-gradient (top, #444444, #999999); /* Firefox 3.6+ */
background-image: -ms-linear-gradient (top, #444444, #999999); /* IE 10+ */
background-image: -o-linear-gradient (top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient (to bottom, #444444, #999999);
}

Кроме указания начального и конечного цветов, градиенты позволяют изменять угол наклона, позицию начала и завершения цветового перехода, количество цветов и направление градиента.

У Safari до версии 5 и у Chrome до версии 10 был свой собственный синтаксис, да и IE 10 с Opera добавляют свои префиксы, увеличивая количество кода.

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

Repeating-linear-gradient

Позволяет повторять градиент, дает возможность создавать фоновые паттерны.

Div {
background-color: #444444;
background-image: -webkit-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background-image: -moz-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Firefox 3.6+ */
background-image: -ms-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* IE 10+ */
background-image: -o-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Opera 11.10+ */
background-image: repeating-linear-gradient (top, #444444 18%, #999999 25%);
}

Radial-gradient

Круговой градиент. Так же можно иметь несколько цветовых переходов, можно определять точку начала градиента (не обязательно из центра круга).

Div {
background: #444444;
background: -webkit-gradient (radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 */
background: -webkit-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background: -moz-radial-gradient (center, ellipse cover, #444444 0%, #999999 100%); /* Firefox 3.6+ */
background: -o-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* Opera 11.6+ */
background: -ms-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* IE 10+ */
background: radial-gradient (center, ellipse cover, #444444 0%,#999999 100%);
}

Opera не поддерживала круговой градиент до версии 11.6. В остальном ситуация такая же, как с линейным градиентом.

Инструменты:

1. gradients.glrzad.com выдает кроссбраузерный код, можно создавать множество цветовых переходов
2. www.colorzilla.com/gradient-editor самый навороченный генератор. Можно создавать линейные и круговые градиенты, есть возможность выбора формата записи цветов, множество готовых градиентов.
3. lea.verou.me/css3patterns галерея CSS3 паттернов. Можно посмотреть код каждого паттерна.

Множественные фоны

Это возможность назначать сразу несколько фоновых изображений одному элементу.
div {
background: url(fallback.png) no-repeat 0 0;
background: url(foreground.png) no-repeat 0 0, url(middle-ground.png) no-repeat 0 0, url(background.png) no-repeat 0 0 ; /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ */
}

Не стоит забывать о браузерах, не поддерживающих множественные фоны.

Порядок фонов такой: от верхнего к нижнему, то есть самый нижний фон нужно прописывать в конце. Вместо фоновых картинок можно прописывать и CSS3 градиенты.

Border-radius

Закругленные уголки у блока. Все просто, если нужен одинаковый радиус закругления.

Div {
-webkit-border-radius : 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius : 12px; /* Firefox 1-3.6 */
border-radius : 12px; /* Opera 10.5+, IE 9+, Safari 5, Chrome , Firefox 4+, iOS 4+, Android 2.1+ */
}

Все производители уже отказались от вендорных префиксов в последних версиях браузеров.

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

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

div {
-moz-border-radius : 15px 30px 45px 60px;
-webkit-border-radius : 15px 30px 45px 60px;
border-radius : 15px 30px 45px 60px;
}

Интересной возможностью является передача пар значений радиусов для каждого угла. Так можно добиться более сложных форм, чем просто закругления:

Div {
border-top-left-radius : 5px 30px;
border-top-right-radius : 30px 60px;
border-bottom-left-radius : 80px 40px;
border-bottom-right-radius : 40px 100px;
}

Если все одинковы:

Div {
border-radius : 8px / 13px;
}

Инструменты:

Upd Для желающих автоматизировать процесс создания префиксов написана .

Сегодня мы хотим продолжить рассказывать о CSS3, а именно – о градиентах. В предыдущих статьях мы рассказывали вам о различных параметрах в CSS3, позволяющих создавать незамысловатые фигуры или наносить эффекты. На этот раз давайте поговорим о двух типах градиентов – круговых и эллиптических.

Синтаксис градиентов

Градиенты в CSS3 объявляются при помощи параметра background-image. Это связано с намерением обеспечить лучшую совместимость, когда нам также, в одном правиле, нужно будет использовать background-color. Затем, для того чтобы создать радиальный градиент, мы просто вызываем его при помощи функции radial-gradient(). Есть 4 значения, которые нужно включить в функцию, чтобы градиент был создан правильно.

Первое значение определяет позицию градиента. Мы можем использовать описательные ключевые слова вроде top, bottom, center и left, либо мы можем указывать более конкретные значения вроде 50% 50% для того, чтобы градиент был по центру или 0% 0% для того, чтобы градиент начинался в верхнем левом углу.

Второе значение определяет форму и размер градиента. Существует два аргумента формирования градиентов, первый отвечает за эллипс (который используется по умолчанию), и второй отвечает за круговые градиенты.

Что касается параметра размера градиента, то здесь мы можем использовать следующие 6 аргументов:

* closest-side – Форма градиента рассчитана по направлению к стороне блока, которая находится ближе всего к центру градиента (для круговых градиентов), либо по направлению к вертикальным и горизонтальным сторонам (для эллипсов).
* closest-corner - Форма градиента рассчитана по направлению к ближайшему углу блока от его центра.
* farthest-side – аргумент немного похож на closest-side, за исключением того, что форма градиента направлена к дальней стороне блока от центра градиента (либо вертикальные, либо горизонтальные).
* farthest-corner - Форма градиента направлена к дальнему углу блока от центра градиента.
* contain – то же самое, что и closest-side.
* cover – то же самое, что и farthest-corner.

Наконец, третий и четвертый параметры определяют комбинацию цветов. Итак, давайте посмотрим, каким образом мы пишем код для создания эллиптических градиентов, и на этот раз мы будем использовать значение cover в параметре gradient size, чтобы градиент распространялся очень широко, покрывая контейнер.

Body {
background-image: radial-gradient(center center, ellipse cover, #ffeda3, #ffc800);
}

Для создания круговых градиентов мы можем сделать следующее:

Body {
background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
}
Как видно из названия, форма градиента будет образовывать круг.

Браузерная поддержка

Только учтите, что на данный момент практически все браузеры вряд ли смогут полностью поддерживать данный параметр, поэтому для многих браузеров понадобится прописывать префиксы. Итак, полный код, который будет работать во всех перечисленных браузерах будет выглядеть так (IE10+, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ и Opera 11+).

Body {
background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
}
Не забудьте посмотреть демо, и скачать исходный код.

Градиент (от лат. Gradiens - шагающий) - характеристика, показывающая направление наискорейшего возрастания некоторой величины, значение которой меняется от одной точки пространства к другой. Градиент создаёт заливку с плавным переходом между двумя или несколькими цветами. Применяется очень часто, поэтому отличное владение этим инструментом является обязательным условием эффективной работы в Фотошоп.
Градиент можно применить непосредственно к содержимому слоя или использовать новый слой заливки градиентом (градиент будет находиться на собственном слое и обладать маской слоя, с помощью которой можно маскировать пиксели слоя).
Значок Градиент (1 ) вы найдёте в одной группе с инструментом Заливка (Paint Bucker), клавиша G (или Shift + G для переключения между ними).

Вид градиента задаётся кнопками на панели параметров (2 )
Линейный градиент (Linear Gradient) – переход осуществляется по прямой линии вдоль определённого направления.

Радиальный градиент (Radial Gradient) – изменение цвета равномерно во все стороны от центральной точки.

Конусовидный градиент (Angle Gradient) – переход цвета по кругу с центром в заданной точке по часовой стрелке.

Зеркальный градиент (Reflected Gradient) – два линейных градиента, которые распространяются от начальной точки в противоположных направлениях.

Ромбовидный градиент (Diamond Gradient) – образующие линии выстраиваются в виде ромба.

В прямоугольном окошке (3 ) вы можете видеть текущий вариант предлагаемого по умолчанию градиента. Если щёлкнуть кнопкой мыши на стрелке, расположенной рядом с ним, откроется палитра градиентов. Вы можете выбрать нужный вам градиент, щёлкнув на нём кнопкой мыши.

Окно редактирования градиента открывается при щелчке на образце градиентной заливки (3 ).
Раздел Наборы (Presets) содержит готовые градиенты.
Имя (Name) – имя градиента. Заказной (Custom) – это градиент с пользовательскими настройками.
Градиент (Gradient Type). Есть два варианта: Непрерывный (Solid) и Шумовой (Noise)
Сглаживание (Smoothness) – мягкость перехода цветов в градиенте.

Если вы хотите редактировать уже существующий градиент, щёлкните на его образце.
Обратите внимание на цветовую полосу в центре окна – это образец редактируемого градиента с переходами цвета и прозрачности. Под полосой и над ней расположились маркеры (4 ) (квадратики с треугольниками над или под ними). Те, что под полосой отвечают за переходы цвета. Если вы щёлкнете кнопкой мыши на каком-нибудь маркере, треугольник над ним станет цветным, значит, маркер стал активным и готов к редактированию. Что можно сделать? Можно переместить его в любую сторону вдоль цветовой полосы, можно поменять его цвет. Для этого щёлкните на окошке Цвет (Color) (5 ) и в окне Цветовая палитра (Color Picker) выберите нужный оттенок (6 ).

Если вы щёлкнете на любом свободном месте между маркерами, появится новый маркер, который вы тоже можете двигать и настраивать. Перемещать маркер можно мышью, или меняя числовое значение в поле Позиция (Location). 0% - левый край цветовой полосы, 100% - правый.

Ползунки прозрачности располагаются над цветовой полосой, они ограничивают прозрачность градиентной заливки. Редактируются они также как и цветовые, только вместо настройки цвета необходимо задать значение прозрачности (opacity), расположение маркеров прозрачности можно указывать в поле Позиция (Location).

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

Если же необходимо удалить ненужный цветовой ограничитель, просто передвиньте его за пределы полосы с цветовыми переходами или выделите и нажмите одну из кнопок Удалить (Delete): нижнюю кнопку – для цветовых маркеров, верхнюю – для маркеров прозрачности.

Создадим новый градиент. Откроем диалоговое окно (щёлкнув по окошку 3 ). Выберите цвет заливки для левого цветового маркера, кликните по правому маркеру (8 ), установите для него свой цвет, в поле Имя (Name) (10 ) введите его название и нажмите кнопку Новый (New) (11 ), ваш градиент появится в окошке Наборы (Presets), нажмите ok.

Перевод : Оксана Гудкова.

Значение -moz-radial-gradient

Обозначает радиальный (круговой) градиент. Применяется к , .

Синтаксис

-moz-radial-gradient ([ || ,]? [ || ,]? , [, ]*)

Используемые значения

Это позиция или точка отсчета для градиента, обозначающая тоже самое, что и в свойствах или . Если пропущено, то автоматически присваивается значение center . Задает угол, под которым распространяется градиент. По умолчанию принимает значение 0deg . Задает форму градиента. Она может быть в форме круга (circle ) или эллипса (ellipse ). По умолчанию принимает значение ellipse . Задает размер градиента: closest-side - Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle ), или к обоим, горизонтальной и вертикальной сторонам (для ellipse ). closest-corner - Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента. farthest-side - Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle ), или к обоии, горизонтальной и вертикальной, сторонам (для ellipse ). farthest-corner - Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента. contain - Аналогично closest-side . cover - Аналогично farthest-corner . Отвечает за отображение color-stops (мест смены цветов) в CSS градиентах по таким же правилам, как и в SVG градиентах. Может задаваться в процентах или мерах длины, например, пикселях.

Замечания

Градиент - это комбинация двух и более заданных цветов, плавно переходящих друг в друга. В 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%);