Html радиальный градиент

Радиальный градиент

Результат данного примера показан на рис. 1. Обратите внимание, что пример корректно работает в IE10 и Opera 12, ранние версии этих браузеров не поддерживают радиальные градиенты, и не работает в Safari 5.1, который требует наличие префикса -webkit.

Рис. 2. Радиальный градиент

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

Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселов или процентов; ниже приведены возможные сочетания.

  • at top left = at left top = at 0% 0% (в левом верхнем углу);
  • at top = at top center = at center top = at 50% 0% (по центру вверху);
  • at right top = at top right = at 100% 0% (в правом верхнем углу);
  • at left = at left center = at center left = at 0% 50% (по левому краю и по центру);
  • at center = at center center = at 50% 50% (по центру) — это значение по умолчанию;
  • at right = at right center = at center right = at 100% 50% (по правому краю и по центру);
  • at bottom left = at left bottom = at 0% 100% (в левом нижнем углу);
  • at bottom = at bottom center = at center bottom = at 50% 100% (по центру внизу);
  • at bottom right = at right bottom = at 100% 100% (в правом нижнем углу).

Если задать позицию начальной точки для примера 1 как at 40px 45px, а второй цвет сделать несколько темнее (#0076a5), то получится чуть более реалистичный шарик (рис. 3).

Рис. 3. Изменение начальной точки градиента

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

Разница между круговым и эллиптическим градиентом для цветов #f9e497 и #ffb60f продемонстрирована на рис. 4.

а. круговой градиент (значение circle)

б. эллиптический градиент (значение ellipse)

Рис. 4. Разные виды градиента

Обратите внимание

Для элемента, у которого ширина равна высоте, как в примере с шариком, разница между типами градиента будет незаметна.

В примере 2 показано создание кругового градиента с заданной начальной точкой. Для усиления контрастности между цветами используется три значения цвета, а не два.

Пример 2. Круговой градиент

HTML5CSS3IE 9IE 10CrOpSaFx

Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.

Обратите внимание на синтаксис, если мы хотим сочетать форму градиента с указанием начальной точки, то вначале идёт ключеве слово circle, а потом уже через пробел позиция. Результат данного примера показан на рис. 5.

Рис. 5. Круговой градиент

Наряду с типом градиента можно задавать и его размер, который зависит от применяемых ключевых слов. Размер пишется через пробел после типа градиента (circle или ellipse).

В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.

Табл. 1. Ключевые слова для изменения размера градиента

ЗначениеКодОписаниеВид
closest-side background: radial-gradient(circle closest-side at 30px 20px, #fff, #000);background: radial-gradient(ellipse closest-side at 30px 20px, #fff, #000); Форма градиента совпадает с ближайшей к нему стороной блока.
closest-corner background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000);background: radial-gradient(ellipse closest-corner at 30px 20px, #fff, #000); Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
farthest-side background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000);background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000); Градиент распространяется до дальней стороны блока.
farthest-corner background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000);background: radial-gradient(ellipse farthest-corner at 30px 20px, #fff, #000); Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,

Для центральной начальной точки градиенты вроде closest-corner и farthest-side совпадают. Но градиенты будут различаться, если установить начальную точку в углу. В примере 3 используется значение closest-corner с заданием начальной точки в пикселах.

Пример 3. Размер градиента

HTML5CSS3IE 9IE 10CrOpSaFx

Содержимое

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

Рис. 6. Использование значения closest-corner

Подобно линейному градиенту можно указывать несколько цветов, устанавливать их позицию и делать резкие переходы между цветами. Для этого произвольное количество цветов перечисляется через запятую, а после значения цвета через пробел идёт его позиция, которая может быть задана в пикселах или процентах. Крайние значения 0% и 100% можно не писать, они подразумеваются автоматически.

Резкие переходы получаются, когда позиция одного цвета совпадает с позицией другого, как показано в примере 4. Разница в один пиксел сделана, чтобы немного сгладить переход, иначе получается «лесенка» из пикселов, что смотрится не очень красиво.

Пример 4. Резкие переходы

HTML5CSS3IE 9IE 10CrOpSaFx

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

Рис. 7. Резкие переходы между разными цветами

Если линейный и радиальный градиент дополнить свойством background-size, тогда мы получим самые разнообразные повторяющиеся фоновые картинки, которые сделаны без использования изображений.

Источник: http://htmlbook.ru/CSS3-na-primerakh/radialnyi-gradient

Радиальные градиенты

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

Спецификация: w3.org/TR/css3-images/#radial-gradients.

Для самого простого градиента достаточно задать только цвета:

background: radial-gradient(gold, orangered);

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

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

Форма (конечная фигура градиента) может быть кругом и эллипсом. По умолчанию — эллипс, градиент стремится занять всё свободное пространство элемента, вытягиваясь, если это необходимо.

Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle.

Важно

Если форма не задана, но задан размер — одно значение задает радиус круга, если значений два — градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.

Положение определяет где будет расположен центр градиента. Используются те же ключевые слова, что и для линейного градиента, но с приставкой at: at top, at right, at bottom, at left и at center — значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.

Ниже можно увидеть как работают разные положения:

Код первого квадрата:

background: radial-gradient(at top left, purple, crimson, orangered, gold);

Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px.

Размер определяет размеры конечной фигуры градиента. Для эллиптических градиентов значения можно задавать в процентах, для круглых — нет.

Если задано одно значение — оно считается радиусом круглого градиента. Если задано два значения — первое считается горизонтальным радиусом эллипса, второе — вертикальным.

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

closest-side — градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента. farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента.

closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы.

farthest-corner — аналогично closest-corner, только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.

Совет

Некоторым градиентам добавлено положение at bottom, чтобы было лучше видно действие кода:

Радиальный градиент также может быть повторяющимся — это repeating-radial-gradient.

Примерный код:

background: repeating-radial-gradient(circle, darkkhaki, darkkhaki .5em, transparent .5em, transparent 1.5em);

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

Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:

See the Pen Rounds by yoksel (@yoksel) on CodePen.

See the Pen Circles by yoksel (@yoksel) on CodePen.

Если при создании узоров использовать относительные единицы (em, %), а не абсоюлютные (px), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.

Если вы заинтересовались кодом паттернов, я бы советовала попробовать повторить узор не подглядывая в исходники, это полезно : )

Источник: http://css.yoksel.ru/radial-gradients/

Функция radial-gradient

Функция radial-gradient задает радиальный градиент.

Данная функция применяется к свойствам, которые задают картинку фона: background, background-image или картинку границы: border-image, background-image-source.

См. все функции для работы с CSS градиентами: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

Синтаксис

селектор { background: radial-gradient([форма тип позиция], цвет1 размер1, цвет2 размер2…);
}

Можно задавать несколько градиентов, перечисляя их через запятую (главное чтобы они не перекрывали друг друга иначе победит только один из них):

селектор { background: linear-gradient(to right, red 0px, blue 30px, transparent 30px), radial-gradient(circle closest-side at center, green, transparent); }

Особенности

Функция очень мощная и имеет много необязательных параметров и особенностей использования.

Самый простой вариант

селектор { background: radial-gradient(начальный цвет, конечный цвет);
}селектор { background: radial-gradient(red, blue);
}

Результат выполнения кода:

Добавим месторасположение градиента

селектор { background: radial-gradient(позиция, начальный цвет, конечный цвет);
}

Положение градиента (положение его центра) задается первым параметром at 30px 100px, где at — обязательное ключевое слово, 30px — отступ слева, 100px — отступ сверху:

селектор { background: radial-gradient(at 30px 100px, red, blue);
}

Результат выполнения кода:

Положение можно задавать и в процентах

селектор { background: radial-gradient(позиция, начальный цвет, конечный цвет);
}

В данном случае 30% — отступ слева, 50% — отступ сверху:

селектор { background: radial-gradient(at 30% 50%, red, blue);
}

Результат выполнения кода:

Положение можно задавать ключевым словом

селектор { background: radial-gradient(позиция, начальный цвет, конечный цвет);
}

Можно использовать ключевые слова top, bottom, left, right, center в различных комбинациях. Поставим, к примеру, градиент справа по центру. Для этого первый параметр установим в at right center:

селектор { background: radial-gradient(at right center, red, blue);
}

Результат выполнения кода:

Размер градиента

селектор { background: radial-gradient(начальный_цвет размер, конечный_цвет размер);
}

В данном случае градиент будет работать так: от 0px до 20px будет чистый красный цвет, от 20px до 60px — градиент от красного к голубому, после 60px — чистый голубой:

селектор { background: radial-gradient(red 20px, blue 60px);
}

Результат выполнения кода:

Читайте также:  Как зайти на заблокированный сайт

Размер также можно задавать и в процентах.

Несколько цветов подряд

селектор { background: radial-gradient(цвет1 размер1, цвет2 размер2, цвет3 размер3…);
}

В данном случае градиент будет работать так: от 0px до 20px будет чистый красный цвет, от 20px до 40px будет чистый голубой цвет, от 40px до 60px — градиент от голубого к зеленому, после 60px — чистый зеленый:

селектор {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
}

Результат выполнения кода:

Размер + позиция

селектор { background: radial-gradient(позиция, начальный_цвет размер, конечный_цвет размер);
}селектор { background: radial-gradient(at 30px 60px, red 20px, blue 60px);
}

Результат выполнения кода:

Форма градиента

Форма градиента задается первым параметром и может принимать 2 значения: circle (круговой градиент) или ellipse (эллиптический градиент, по умолчанию). Почему же до этого мы не видели эллиптических градиентов, хотя он задается по умолчанию? Потому что до этого форма блоков была квадратная. Если мы изменим форму на прямоугольную, то увидим эллиптический градиент:

селектор { background: radial-gradient(цвет1 размер1, цвет2 размер2);
}селектор { background: radial-gradient(red 20px, blue 60px);
}

Результат выполнения кода:

Круглый градиент в прямоугольном блоке

Зададим первым параметром круглую форму градиента с помощью ключевого слова circle:

селектор { background: radial-gradient(форма, цвет1 размер1, цвет2 размер2);
}селектор { background: radial-gradient(circle, red 20px, blue 60px);
}

Результат выполнения кода:

Добавим позицию градиента

селектор { background: radial-gradient(форма позиция, цвет1 размер1, цвет2 размер2);
}селектор { background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
}

Результат выполнения кода:

Добавим тип градиента

селектор { background: radial-gradient(тип форма позиция, цвет1, цвет2);
}

Возможные варианты типа: closest-side, closest-corner, farthest-side, farthest-corner. Тип задает растяжение градиента. Смотрите на примерах ниже.

Тип и форму можно менять местами, а вот позиция должна идти в конце первого параметра: farthest-corner circle at 30px 60px работает, circle farthest-corner at 30px 60px работает, at 30px 60px circle farthest-corner не работает.

Тип градиента и его размер не работают друг с другом (логично, они ведь конфликтуют). Выигрывает размер.

Тип farthest-corner

Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока.

селектор { background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
}

Результат выполнения кода:

селектор { background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
}

Результат выполнения кода:

Тип farthest-side

Градиент распространяется до дальней стороны блока.

селектор { background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
}

Результат выполнения кода:

селектор { background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
}

Результат выполнения кода:

Тип closest-corner

Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока:

селектор { background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
}

Результат выполнения кода:

селектор { background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
}

Результат выполнения кода:

Тип closest-side

Форма градиента совпадает с ближайшей к нему стороной блока:

селектор { background: radial-gradient(circle closest-side at 60px 80px, red, blue);
}

Результат выполнения кода:

селектор { background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
}

Результат выполнения кода:

Значения

ЗначениеОписание
Форма Принимаемые значения: ellipse эллиптический градиент (по умолчанию), circle круговой градиент.
Тип Задает растяжение градиента. Принимаемые значения: closest-side, closest-corner, farthest-side, farthest-corner.
Позиция После ключевого слова at указывается позиция в любых CSS единицах (в том числе и процентах) или с помощью ключевых слов top, bottom, left, right, center в различных комбинациях.
Цвет1 Начальный цвет градиента в любом CSS формате.
Цвет2 Конечный цвет градиента в любом CSS формате.
Размер Задает протяженность определенного цвета градиента в любых CSS единицах (в том числе и процентах).

Значение по умолчанию: нет (?).

Значения для типа

ЗначениеОписание
Тип closest-side Форма градиента совпадает с ближайшей к нему стороной блока.
Тип closest-corner Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
Тип farthest-side Градиент распространяется до дальней стороны блока.
Тип farthest-corner Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока.

Значение по умолчанию: ?.

Значения для позиции

В левом верхнем углу at top left = at left top = at 0% 0%
По центру вверху at top = at top center = at center top = at 50% 0%
В правом верхнем углу at right top = at top right = at 100% 0%
По левому краю и по центру at left = at left center = at center left = at 0% 50%
По центру at center = at center center = at 50% 50%
По правому краю и по центру at right = at right center = at center right = at 100% 50%
В левом нижнем углу at bottom left = at left bottom = at 0% 100%
По центру внизу at bottom = at bottom center = at center bottom = at 50% 100%
В правом нижнем углу at bottom right = at right bottom = at 100% 100%

Значение по умолчанию: at center = at center center = at 50% 50% (по центру).

Кроссбраузерный код

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

#elem { background: #000; /* Для старых браузров */ background: -webkit-radial-gradient(at top, #000, #fff); background: -moz-radial-gradient(at top, #000, #fff); background: -o-radial-gradient(at top, #000, #fff); background: radial-gradient(at top, #000, #fff);
}

Источник: http://code.mu/css/radial-gradient.html

radial-gradient()

The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the data type, which is a special kind of .

As with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

Обратите внимание

To create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead.

Because s belong to the data type, they can only be used where s can be used. For this reason, radial-gradient() won't work on background-color and other properties that use the data type.

Composition of a radial gradient

A radial gradient is defined by a center point, an ending shape, and two or more color-stop points.

To create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.

Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. Each shape is a single color determined by the color on the gradient ray it intersects.

Syntax

/* A gradient at the center of its container, starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)

Values

The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.The gradient's shape. The value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.

A keyword describing how big the ending shape must be. The possible values are:

KeywordDescription
closest-side The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-side Similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-corner The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.

Note: Early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively.

Use the standard keywords only, as some implementations have already dropped those older variants.

A color-stop's value, followed by an one or two optional stop positions (either a or a along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Formal syntax

radial-gradient( [ [ circle || ] [ at ]? , | [ ellipse || [ | ]{2} ] [ at ]? , | [ [ circle | ellipse ] || ] [at ]? , | at , ]? [ , ]+
)
where = closest-corner | closest-side | farthest-corner | farthest-side and = [ [, ? ]? ]#, and = [ ]? and = [ | ]{1,2} and = [ | ]

Examples

Simple gradient

.radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}

Non-centered gradient

.radial-gradient { background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%);
}

Note: Please see Using CSS gradients for more examples.

Specifications

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetBasic support

at syntax

Double-position color stops

Interpolation Hints / Gradient Midpoints

Chrome Full support 26Full support 26Full support YesPrefixedPrefixed Implemented with the vendor prefix: -webkit- Edge Full support 12 Firefox Full support 16NotesFull support 16NotesNotes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.Full support 3.6Prefixed NotesPrefixed Implemented with the vendor prefix: -moz-Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.Full support 49PrefixedPrefixed Implemented with the vendor prefix: -webkit-Full support 44Prefixed DisabledPrefixed Implemented with the vendor prefix: -webkit-Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. IE Full support 10NotesFull support 10NotesNotes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient(). Opera Full support 12.1Full support 12.1No support 11.6 — 15PrefixedPrefixed Implemented with the vendor prefix: -o-Full support 15PrefixedPrefixed Implemented with the vendor prefix: -webkit- Safari Full support 6.1Full support 6.1Full support 5.1Prefixed NotesPrefixed Implemented with the vendor prefix: -webkit-Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes. WebView Android Full support YesFull support YesFull support YesPrefixedPrefixed Implemented with the vendor prefix: -webkit- Chrome Android Full support 26Full support 26Full support 18PrefixedPrefixed Implemented with the vendor prefix: -webkit- Edge Mobile Full support Yes Firefox Android Full support 16NotesFull support 16NotesNotes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.Full support 4Prefixed NotesPrefixed Implemented with the vendor prefix: -moz-Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.Full support 49PrefixedPrefixed Implemented with the vendor prefix: -webkit-Full support 44Prefixed DisabledPrefixed Implemented with the vendor prefix: -webkit-Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. Opera Android Full support 12.1Full support 12.1No support 12 — 14PrefixedPrefixed Implemented with the vendor prefix: -o-Full support 14PrefixedPrefixed Implemented with the vendor prefix: -webkit- Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support 26 Edge Full support 12 Firefox Full support 16NotesFull support 16NotesNotes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.Full support 10Prefixed NotesPrefixed Implemented with the vendor prefix: -moz-Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.Full support 49PrefixedPrefixed Implemented with the vendor prefix: -webkit-Full support 44Prefixed DisabledPrefixed Implemented with the vendor prefix: -webkit-Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. IE Full support 10 Opera Full support 15Full support 15No support 11.6 — 15PrefixedPrefixed Implemented with the vendor prefix: -o- Safari No support No WebView Android Full support Yes Chrome Android Full support Yes Edge Mobile Full support Yes Firefox Android Full support 16Full support 16Full support 10PrefixedPrefixed Implemented with the vendor prefix: -moz- Opera Android No support No Safari iOS No support No Samsung Internet Android Full support Yes
Chrome Full support 71 Edge No support No Firefox Full support 64 IE No support No Opera Full support 58 Safari ?Notes?NotesNotes In Safari Technology Preview Release 66 WebView Android Full support 71 Chrome Android Full support 71 Edge Mobile No support No Firefox Android Full support 64 Opera Android Full support 58 Safari iOS ?Notes?NotesNotes In Safari Technology Preview Release 66 Samsung Internet Android Full support Yes
Chrome Full support 40 Edge No support No Firefox Full support 36 IE No support No Opera Full support 27 Safari Full support 6.1 WebView Android Full support 40 Chrome Android Full support 40 Edge Mobile No support No Firefox Android Full support 36 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes
Читайте также:  Что такое кто такой копирайтер

Full support  Full supportNo support  No supportCompatibility unknown  Compatibility unknownSee implementation notes.See implementation notes.User must explicitly enable this feature.User must explicitly enable this feature.Requires a vendor prefix or different name for use.Requires a vendor prefix or different name for use.

Quantum CSS notes

Источник: https://developer.mozilla.org/docs/Web/CSS/radial-gradient

Radial-gradient(): радиальный градиент — учебник CSS

CSS не ограничивается линейными градиентами. В вашем распоряжении есть и радиальный градиент, который устанавливается соответствующей функцией radial-gradient().

Поскольку о синтаксисе градиентных функций мы уже достаточно рассказали в предыдущих уроках, то сейчас нам уже нет необходимости на нем задерживаться — параметры здесь аналогичны radial-gradient(), вы меняете только имя функции.

background-image: radial-gradient(#5b4ffc, #df02cd);

Позиционирование

Начальная точка вектора радиального градиента находится в центре эллиптической формы (который в свою очередь по умолчанию размещается в центре стилизуемого элемента), откуда градиент расходится кругами. Центр можно смещать, пользуясь теми же значениями, которые принимает background-position. Перед указанием позиции следует использовать приставку at:

background-image: radial-gradient(at top left, #5b4ffc, #df0253);

Форма и радиус

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

  • ellipse — градиент эллиптической формы (значение по умолчанию);
  • circle — градиент круглой формы.

background-image: radial-gradient(circle, #5b4ffc, #df0253);

Значение радиуса может быть указано в любых доступных единицах CSS. Если указать одно значение, то оно будет принято за радиус круга. Два значения интерпретируются как радиус эллипса по оси X и радиус по оси Y. По умолчанию радиальным градиентом полностью заполняется фон элемента.

background-image: radial-gradient(ellipse 180px 90px, #a09af1, #000038);

Размер

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

  • closest-side — создается градиент, который расходится только до ближайшей стороны элемента: background-image: radial-gradient(circle closest-side at 75% 40%, #ffee0e, #2e0a9f);
  • closest-corner — градиент расходится только до ближайшего угла элемента: background-image: radial-gradient(circle closest-corner at 75% 40%, #ffee0e, #2e0a9f);
  • farthest-side — противоположно closest-side, градиент расходится до самой дальней стороны элемента: background-image: radial-gradient(circle farthest-side at 75% 40%, #ffee0e, #2e0a9f);
  • farthest-corner — противоположно closest-corner, градиент расходится до самого дальнего угла элемента: background-image: radial-gradient(circle farthest-corner at 75% 40%, #ffee0e, #2e0a9f);

Опорные точки

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

background-image: radial-gradient(#144bf1 30%, #3ee9ca 60%, #0a38e5);

Поддержка браузерами

По аналогии с linear-gradient(), если вы собираетесь внедрять функцию radial-gradient() в свой проект, стоит дополнить код CSS объявлениями с упоминанием вендорных префиксов, а также указать резервный цветовой фон для старых браузеров IE.

Далее в учебнике: repeating-radial-gradient() — повторяющийся радиальный градиент.

Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/radial-gradient

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

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

Радиальный градиент создаётся с помощью функции 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 centercenter 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 (для определения радиуса нельзя использовать проценты).

Ключевые словаОписание
closest-side Конечный размер градиента зависит от расстояния между центром градиента и ближайшей к нему стороной элемента (для круга) или от расстояния между центром и двумя ближайшими к нему сторонами элемента (для эллипса).
closest-corner Конечный размер градиента зависит от расстояния между центром градиента и ближайшим к нему углом элемента.
farthest-side Конечный размер градиента зависит от расстояния между центром градиента и самой дальней от него стороны элемента (для круга) или от расстояния между центром градиента и двумя самыми дальними от него сторонами (для эллипса).
farthest-corner Конечный размер градиента зависит от расстояния между центром градиента и самым дальним от него углом элемента. Используется по умолчанию для формы круга или эллипса.

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

Читайте также:  Стоит ли регистрировать домен второго уровня

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)); } Попробовать »

Источник: https://puzzleweb.ru/css/19_css_gradient2.php

Как использовать CSS градиенты в вебе

От автора: в этом уроке вы узнаете, как использовать градиент CSS в вебе. Я дам несколько примеров, уроков (например, как создать градиент для рамки) и подкину парочку полезных ссылок, которые сильно упростят создание градиентов.

Смотрите урок на сайте статьи.

Основы градиентов

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

В простейшей форме градиенты представляют собой фоновые изображения. Устанавливается фоновое изображение (с помощью сокращения background) в значение linear-gradient или a radial-gradient. Внутрь значения передается начальный и конечный цвет:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

background: linear-gradient(#000046, #1cb5e0);  

По умолчанию линейный градиент направлен сверху вниз, и мы получаем примерно вот это:

Мы можем изменить направление, если добавим новый параметр перед цветами:

background: linear-gradient(to right, #000046, #1cb5e0);  

Если изменить параметр на to top right, получится диагональный градиент. Диагональ можно создать и по-другому, если установить 45deg (или любой другой угол).

Немного усложним, необязательно использовать 2 цвета. Можно использовать названия цветов:

background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan);  

В этом случае все 4 цвета займут равную площадь, создавая плавный и сбалансированный градиент.

Если необходимо, чтобы один цвет занимал больше места, чем другие, то после цвета можно указать процентное значение:

background: linear-gradient(to right, #f05053 80%, #e1eec3);  

И мы получим:

Радиальные градиенты

Мы можем воспользоваться полученными знаниями и изменить градиент на radial. Нужно лишь заменить linear-gradient на radial-gradient.

background: radial-gradient(#fdbb2d, #22c1c3);    

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

background: radial-gradient(circle, #fdbb2d, #22c1c3);    

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

background: radial-gradient(circle at top left, #fdbb2d, #22c1c3);    

Эффект незаметный, но, возможно, именно это вам и нужно вместо линейного градиента.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Реальное применение

Где же можно использовать градиенты таким интересным образом?

1. Перекрывающий баннерный слой

Пример перекрытия, когда градиент слегка прозрачный (с помощью rgba значений) и расположен поверх фото.

Свойство background может принимать несколько значений, формирующих стек, где первое значение самое верхнее, а последнее расположено в самом низу. Если сначала задать градиент, то он будет расположен поверх всего, что идет следом. Посмотрите на пример ниже:

    background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)),    url(https://bg.jpg);

Результат:

2. Градиент на тексте

Градиент на тексте – крутой эффект, но он не полностью поддерживается. Вместо этого мы используем свойство background-clip (и префиксную версию -webkit-background-cli), которое является хаком, но отлично работает.

Сначала берем текст (h1) и применяем градиент к его background. Затем свойство background-clip со значением text удаляет фон со всего блока кроме области под текстом. Color текста загораживает фон, поэтому делаем цвет transparent, чтобы был виден градиент:

    background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);    -webkit-background-clip: text;

3. Градиентные рамки

Градиентные рамки вы могли видеть на Envato Elements – отличный способ визуально приправить ваш UI. Он очень тонкий, но вы только посмотрите на линейный градиент от синего до фиолетового на рамках этих кнопок:

Добиться такого эффекта можно разными способами. Первый требует сначала задать элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.

    border: 5px solid transparent;    border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d);

Результат:

У подхода несколько проблем. Во-первых, border-image не одинаково поддерживается во всех браузерах. В основном это касается старых версий IE. Во-вторых, этот подход не позволит добавить border-radius, как на UI Envato Elements. Давайте рассмотрим другой способ.

Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (5px у нас):

Так мы получим сплошной градиентный блок поверх нашего div. Добавив z-index -1, мы переместим его под div.

Важно

Далее (фух, в этот раз много шагов) мы добавляем border-radius к псевдоэлементу, равный своему родителю (пусть будет 10px). Далее задаем фон родителя. Если задать цвет фона страницы, то он будет прозрачным.

Наконец, применяем нашего друга background-clip к родителю, но в этот раз со значением padding-box. Так div будет залит до края рамки, но не далее.

Последний способ не совсем рамка, но эффект похож.

Есть и третий способ, на box-shadow. Советую посмотреть Border-gradient mixin от John Grishin на сайте CodePen.

Заключение

Вот и все! Этот пример CSS градиентов показал вам, с чего начать, а также, как использовать градиенты в вебе. Если видели другие креативные способы применения в сети, оставляйте их в комментариях.

Источник: https://webformyself.com/kak-ispolzovat-css-gradienty-v-vebe/

Радиальный градиент

Стандартный синтаксис для радиальных градиентов отличается от рассмотренного синтаксиса линейного градиента всего в нескольких аспектах. Необходимо использовать функцию radial-gradient() и новый атрибут, определяющий форму.

Листинг 3.14. Радиальный градиент

Background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);

Начальное положение — это источник градиента, и его можно задать как значение в пикселах или процентах или как комбинацию ключевых слов center, top, bottom, left и right. Для определения фигуры доступны два ключевых слова — circle и ellipse, а описание промежуточных точек включает в себя значение цвета и позиции, в которой начинается переход.

Замените кодом из листинга 3.14 соответствующий код в листинге 3.11 и проверьте результат в своем браузере (не забудьте добавить префикс — moz — или — webkit — в зависимости от того, какой браузер используете).

RGBA

Пока что мы объявляли только сплошные цвета, используя шестнадцатеричные значения или функцию rgb(), возвращающую полное значение цвета для указанных десятичных компонентов. В CSS3 была добавлена новая функция под названием rgba(), упрощающая определение цветов и прозрачности. Кроме того, она решает упомянутую ранее проблему со свойством opacity.

У функции rgba() четыре атрибута. Первые — такие же, как у rgb(), и они просто описывают комбинацию цветовых компонентов. Последний атрибут позволяет описывать прозрачные цвета. Он может принимать значения от 0 до 1, где 0 означает полностью прозрачный цвет, а 1 — совершенно непрозрачный.

Листинг 3.15. Усовершенствование тени за счет прозрачности #title {

Font: bold 36px MyNewFont, verdana, sans-serif; text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;

}

Листинг 3.15 содержит простой пример, демонстрирующий, насколько привлекательнее становится эффект, если добавить к нему прозрачность. В определении тени заголовка мы заменили функцию rgb() функцией rgba() и задали значение непрозрачности, равное 0,5. Теперь тень заголовка будет постепенно сливаться с фоном поля, создавая более естественный эффект.

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

Совет

Однако у всех них была одна общая проблема: значение непрозрачности, определенное для элемента, наследовалось всеми его потомками.

Функция rgba() решила эту проблему: теперь вы можете запросто связать значение непрозрачности с фоном поля, и это никак не затронет его содержимое.

Замените кодом из листинга 3.15 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.

Источник: http://html5ru.com/radialnyj-gradient.html

CSS функция radial-gradient()


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

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

Рассмотрим пример позиционирования радиального градиента.

at 5px 45px at 50% top at top left
at 0% bottom at center bottom at 100% 100%

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

Синтаксис при позиционировании радиальных градиентов.

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

Рассмотрим пример использования точек остановки радиального градиента:

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

  • Первый и четвертый блокдвухцветный градиент, в котором 10% от центра занимает красный цвет, который плавно переходит в зеленый, занимающий оставшую часть элемента.
  • Второй и пятый блоктрехцветный градиент, в котором 10% от центра занимает красный цвет, который плавно переходит в зеленый, с точкой остановки 50%, он в свою очередь плавно переходит в синий, который занимает всю оставшуюся часть элемента.
  • Третий и шестой блоктрехцветный градиент, в котором 50% от центра занимает красный цвет, который плавно переходит в зеленый, с точкой остановки 85%, он в свою очередь плавно переходит в синий, который занимает всю оставшуюся небольшую часть элемента.

Точки остановки в радиальных градиентах.

Давайте рассмотрим, как управлять размером радиального градиента в CSS.

В этом примере мы создали три блока:

Первый блок – мы указали одно значение 50px, которое было расценено браузером как радиус для круглого градиента. Указали для градиента 7 цветов. Обратите внимание, что крайний цвет заполняет оставшуюся область.

Второй блок – мы указали два значения в процентах: первое значениегоризонтальный радиус, а второе значениевертикальный радиус для эллиптического градиента. Указали для градиента 8 цветов. Обратите внимание, что крайний цвет мы указали белый, который и заполнил оставшуюся область (один из вариантов, чтобы оставить только форму градиента).

Третий блок – мы указали два значения в единицах измерения длины (px и em): первое значениегоризонтальный радиус, а второе значениевертикальный радиус для эллиптического элемента. Указали для градиента 7 цветов.

Пример указания размера для радиальных градиентов.CSS функции

Источник: https://basicweb.ru/css/css_func_radial-gradient.php

Ссылка на основную публикацию