CSS dégradé circulaire. CSS : dégradé radial pour l'arrière-plan. Dégradé radial radial-gradient()

Définition et application

La fonction CSS radial-gradient() est positionnée le long de son rayon, s'étendant vers l'extérieur à partir du centre de l'élément dans une forme circulaire ou elliptique, les couleurs du dégradé étant réparties uniformément dans tout l'espace de l'élément.

Le principe de création de dégradés radiaux est similaire à la création de dégradés linéaires (linear-gradient()), pour cela il vous suffit de préciser la couleur de départ - elle sera située au milieu du dégradé et la couleur de fin, qui sera située à la fin du dégradé.

Vous pouvez en savoir plus sur le travail avec les dégradés dans les articles « » et « ». Veuillez noter que les articles mettent en évidence les nuances du travail avec les anciens navigateurs et fournissent de nombreux exemples.

Prise en charge du navigateur

Syntaxe CSS :

Formulaire

Forme elliptique est définie par la valeur de l'ellipse, qui est la valeur par défaut (pas besoin de la spécifier), et la forme circulaire est définie par la valeur du cercle.

Mot-clé

La pente est calculée en fonction de la distance à côté proche/éloigné, ou coin le plus proche/le plus éloignéélément.

Taille

Définit la taille de la forme du dégradé. Il n'est pas nécessaire de spécifier les valeurs du cercle ou de l'ellipse, Il est interdit d'utiliser des mots-clés si la taille est précisée. Si vous précisez une valeur, alors il sera considéré par le navigateur comme . Si vous précisez deux significations, Que première valeur sera considéré par le navigateur comme rayon horizontal, UN deuxième sens Comment rayon vertical pour élément elliptique .

J'attire votre attention sur le fait que Vous n'êtes pas autorisé à utiliser des valeurs en pourcentage si vous spécifiez une seule valeur(rayon pour élément rond), lorsqu'il est utilisé deux significations(pour dégradé elliptique) Il est permis d'indiquer ces valeurs sous forme de pourcentages.

Position

La position de départ du dégradé radial est déterminée par le mot-clé -center, mais peut être modifiée à l'aide de unités de longueur(Par exemple: px ou em), valeurs en pourcentage Et mots clés, qui sont utilisés dans Propriété CSS background-position , il est responsable de la position (position) de l'image d'arrière-plan.

Signification	Description
en haut à gauche centre gauche En bas à gauche En haut à droite centre droit en bas à droite centre en haut centre centre centre en bas	Définit la position de l'image. La première valeur est la position horizontale et la deuxième valeur est la position verticale. Si vous spécifiez un seul mot-clé, l'autre valeur serait "center"
x%y%	0% 0% (Ceci est la valeur par défault). Dans le coin inférieur droit 100% 100%. Si une seule valeur est spécifiée, alors l'autre valeur sera 50%.
xy	Définit la position de l'image. La première valeur est la position horizontale et la deuxième valeur est la position verticale. Le coin supérieur gauche a 0 0. Les valeurs peuvent être en pixels ou en d'autres unités CSS. Si une seule valeur est spécifiée, alors l'autre valeur sera 50%. Vous pouvez partager intérêt Et unités.

Couleur

Il est permis d'utiliser non seulement des "couleurs prédéfinies", mais également n'importe quel "" - hexadécimal (hexagonal), Valeurs de couleur RVB/-A et HSL/-A .

Arrêt

Valeurs points d'arrêt (la couleur s'arrête ) sont précisés dans unités de longueur(Par exemple - px ou em) et en valeurs en pourcentage . Le point d'arrêt indique au navigateur que le dégradé radial doit atteindre couleur spécifiéeÀ valeur définie et passez en douceur à la couleur suivante, s'il y en a une.

Exemple d'utilisation

Examinons les dégradés radiaux de formes circulaires et elliptiques et voyons quelle est leur différence dans l'exemple pratique suivant :

Dans cet exemple, nous avons créé quatre blocs et leur avons attribué des dégradés radiaux. Les blocs supérieurs ont forme elliptique, et les blocs inférieurs forme ronde.

Regardons un exemple de positionnement d'un dégradé radial.

Dans cet exemple, nous avons créé six blocs avec différentes formes de dégradés (circulaires et elliptiques) et positionné le dégradé différemment pour chaque bloc, en indiquant les valeurs dans pixels, pour cent et en utilisant mots clés.

Veuillez noter que si un dégradé radial est positionné centré par défaut et que l'élément est de forme carrée, alors vous ne verrez pas de différence entre un dégradé circulaire et un dégradé en forme d'ellipse.

Regardons un exemple d'utilisation de points d'arrêt de dégradé radiaux :

Dans cet exemple, nous avons créé six blocs: trois blocs supérieurs différer trois plus bas seulement par forme de dégradé, les points clés sont les mêmes:

• Premier et quatrième bloc – dégradé de deux couleurs couleur rouge, qui se transforme en douceur en vert, occupant le reste de l'élément.
• Deuxième et cinquième bloc – dégradé de trois couleurs, dans lequel 10% du centre est occupé couleur rouge, qui se transforme en douceur en vert, avec un point d'arrêt de 50 %, il passe à son tour en douceur vers bleu, qui occupe le reste de l'élément.
• Troisième et sixième bloc – dégradé de trois couleurs, dans lequel 50% du centre est occupé couleur rouge, qui se transforme en douceur en vert, avec un point d'arrêt de 85 %, il passe à son tour en douceur vers bleu, qui occupe toute la petite partie restante de l'élément.

Voyons comment contrôler la taille d'un dégradé radial en CSS.

Dans cet exemple, nous avons créé trois blocs :

Premier bloc- nous avons indiqué une valeur 50px , qui a été interprété par le navigateur comme rayon pour dégradé circulaire. Spécifié pour le dégradé 7 couleurs. Notez que la couleur la plus à l’extérieur remplit la zone restante.

Deuxième bloc- nous avons indiqué deux significations en pourcentages : première valeur - rayon horizontal, UN deuxième sens - rayon vertical pour un dégradé elliptique. Spécifié pour le dégradé 8 couleurs. Veuillez noter que nous avons spécifié le blanc comme couleur finale, qui remplit la zone restante.(une option consiste à ne laisser que la forme du dégradé).

Troisième bloc- nous avons indiqué deux significations en unités de longueur (px Et em): première valeur - rayon horizontal, UN deuxième sens - rayon vertical pour un élément elliptique. Spécifié pour le dégradé 7 couleurs.

Dégradé radial- dégradé pour créer des effets lorsqu'une couleur passe à une autre. Contrairement à un dégradé linéaire, celui-ci utilise une transition circulaire ou elliptique. La direction du changement de couleur va dans des directions différentes à partir du centre. Un dégradé radial est également appelé « dégradé circulaire ».

Le dégradé radial est défini à l'aide de la propriété radial-gradient en conjonction avec background . Il comporte de nombreux paramètres que nous examinerons séquentiellement.

Syntaxe CSS à dégradé radial

fond : dégradé radial ( couleur1, couleur2,...);

• position - coordonnées initiales X et Y (le plus souvent spécifiées en pourcentage). Il y a des constantes :
  • en haut - en haut au centre (50 % 0 %)
  • en haut à gauche - coin supérieur gauche (0% 0%)
  • en haut à droite - coin supérieur droit (100 % 0 %)
  • centre (par défaut) - centre de la zone (50% 50%)
  • centre gauche - centre gauche (0% 50%)
  • centre droit - centre droit (100% 50%)
  • en bas - en bas au centre (50 % 100 %)
  • en bas à gauche - en bas à gauche (0% 100%)
  • en bas à droite - en bas à droite (100% 100%)
  Le mot clé at est obligatoire.
• shape - spécifiant la forme du dégradé. Il existe deux options :
  • cercle - cercle
  • ellipse - ellipse
• taille - comment le dégradé s'étirera. Peut prendre les valeurs suivantes
  • côté le plus proche : le dégradé va jusqu'à la bordure la plus proche de l'élément.
  • coin le plus proche : le dégradé tend vers le coin le plus proche.
  • côté le plus éloigné (par défaut) - Le dégradé s'étend jusqu'au bord le plus éloigné de l'élément.
  • coin le plus proche : le dégradé s'étend jusqu'au coin le plus éloigné de l'élément.
  Ci-dessous un tableau avec des exemples
• color1 - couleur initiale
• color2 - couleur finale

La couleur peut être définie Format RVB, une couleur spécifique ou au format rgba (voir codes couleurs html du site).

Vous pouvez spécifier la transition de plusieurs couleurs séparées par des virgules.

Dans le très version simplifiée Seules deux couleurs peuvent être spécifiées. Par exemple

arrière-plan : dégradé radial (#ADFF2F, #006400 )

Pour les navigateurs, vous devez définir cette propriété avec les préfixes du fournisseur : -moz-, -webkit-, -ms-, -o- :

arrière-plan : -moz-radial-gradient arrière-plan : -webkit-radial-gradient arrière-plan : -ms-radial-gradient arrière-plan : -o-radial-gradient

La propriété radial-gradient peut également être rendue répétitive : répéter-radial-gradient

arrière-plan : dégradé radial répétitif ( cercle, #8FBC8F, #8FBC8F .5em, transparent .5em, transparent 1.5em);

Exemples avec des dégradés radiaux

Exemple 1. Position de départ différente

À l’aide du mot-clé at, vous pouvez spécifier la position du centre du dégradé radial.

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

Ниже представлен пример, который показывает работу границы

На странице преобразуется в следующее

When we talk about gradients, it"s worth beginning with the fact that gradients are an image replacement in CSS. That"s a fancy way of saying that creating a gradient in CSS provides the browser with instructions for painting an image on the screen rather than you providing the browser with the source URL of a file you created in an image editing application, like Photoshop or Sketch. It"s a native CSS way for doing the same thing in code and, as such, gradients are included in the CSS Image Values and Replaced Content specification .

You can see how that gradient assumes the shape is ellipse . That"s because the element itself is not a perfect square. In that case, it would have assumed a circle instead. Pretty smart! Here"s what would happen if we had explicitly declared circle as the shape value:

Gradient { background-image: radial-gradient(circle, yellow, #f06d06); }

Notice the gradient is circular, but only fades all the way to the ending color along the farthest edge. Now we can explicitly declare the position value to ensure that the fade ends by the "closest-side" of the shape instead, like this:

Gradient { background-image: radial-gradient(circle closest-side, yellow, #f06d06); }

The possible values there are: closest-corner , closest-side , farthest-corner , farthest-side . You can think of it like: "I want this radial gradient to fade from the center point to the __________ , and everywhere else fills in to accommodate that."

A radial gradient doesn"t have to start at the default center either, you can specify a certain point by using "at ______ " as part of the first parameter, like:

Gradient { background-image: radial-gradient(circle at top right, yellow, #f06d06); }

I"ll make it more obvious here by making the example a square and adjusting a color-stop:

Browser Support

Browser support for radial-gradient() is largely the same as . The exception is a very old version of Opera. Right when they started supporting gradients they only accounted for linear and not radial.

But similar to linear-gradient() , if your browser support needs to go super deep, then you might consider using or a similar tool that handles vendor prefixing for you rather than having to manage those yourself.

This browser support data is from

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 - градиент круглой формы.

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

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

Размер

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

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

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

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

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

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

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

Рис. 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);	Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,

Пример

Cet élément est utile lorsque vous êtes conscient du fait que vous n’avez absolument aucune idée de qui peut vous aider et comment. C'est à ce moment-là que nous suggérons que personne ne puisse vous aider.

Résultat cet exemple indiqué ci-dessous.

Note

Chrome avant la version 26, Safari avant la version 6.1 et Android avant la version 4.4 prennent en charge -webkit-radial-gradient() .

Opera jusqu'à la version 12.10 prend en charge -o-radial-gradient() .

Firefox jusqu'à la version 16 prend en charge -moz-radial-gradient() .

Toutes les propriétés préfixées n'utilisent pas le mot-clé at lors de la définition de la position du point de départ du dégradé.

spécification

Chaque spécification passe par plusieurs étapes d'approbation.

• Recommandation - La spécification a été approuvée par le W3C et est recommandée comme norme.
• Recommandation du candidat ( Recommandation possible ) - le groupe responsable de la norme est convaincu qu'elle atteint ses objectifs, mais a besoin de l'aide de la communauté de développement pour mettre en œuvre la norme.
• Recommandation proposée Recommandation suggérée) - à ce stade, le document est soumis au Conseil consultatif du W3C pour approbation finale.
• Brouillon de travail - Une version plus aboutie d'un brouillon qui a été discuté et modifié pour examen par la communauté.
• Brouillon de l'éditeur ( Projet éditorial) - une version préliminaire de la norme après modifications apportées par les éditeurs du projet.
• Brouillon ( Projet de spécification) - la première version préliminaire de la norme.