Stop-color et stop-opacity - Propriétés CSS
Résumé des caractéristiques de la propriété stop-color
blackstop-color passe progressivement d'une valeur à une autre.Single : valeur unique (l'ordre n'intervient pas).Description de stop-color et stop-opacity.
En SVG un dégradé se définit par une balise linearGradient ou radialGradient contenant une série de stops. Ceux-ci sont des points de passage obligatoire dans le déroulement du dégradé. Ils sont définis par une position (la plupart de temps en pourcentage), une couleur et une opacité.
<defs>
<linearGradient id="gradient1">
<stop offset="25%" stop-color="red" stop-opacity="1" />
<stop offset="50%" stop-color="blue" stop-opacity="1" />
<stop offset="75%" stop-color="yellow" stop-opacity="1" />
</linearGradient>
<defs>
stop-color et stop-opacity sont deux propriétés qui s'appliquent uniquement aux balises stop. Elles définissent respectivement
la couleur et l'opacité du point.
#gradient1 stop:nth-child(1) {
stop-color:red;
stop-opacity:1;
}
#gradient1 stop:nth-child(2) {
stop-color:blue;
stop-opacity:0.2;
}
#gradient1 stop:nth-child(3) {
stop-color:cyan;
stop-opacity:1;
}
Voici ce que donnent les styles ci-dessus. Le dégradé est appliqué au rectangle. Le cercle lui reçoit un dégradé radial.
Valeurs pour stop-color.
- stop-color: #251445;
La couleur indiquée est appliquée au point correspondant du dégradé.
Toutes les notations reconnues par CSS pour définir une couleur sont reconnues.
Valeurs pour stop-opacity.
- stop-opacity: 1;
L'opacité est indiquée par un nombre sans unité de
0à1, ou un pourcentage. - stop-color: initial; (
black) stop-color: inherit; stop-color: revert; stop-color: revertLayer; stop-color: unset;stop-opacity: initial; (1) stop-opacity: inherit; stop-opacity: revert; stop-opacity: revertLayer; stop-opacity: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de stop-color.
Voici une animation de la propriété stop-color. Celle-ci, attendant une couleur, s'animer très bien, et de façon très fluide.
Il en est de même pour la propriété stop-opacity qui attend un entier ou un pourcentage.
Simulateur avec stop-color.
Vous pouvez ajuster la couleur et l'opacité du deuxième point de dégradé.
Compatibilité des navigateurs avec stop-color.
Les deux propriétés sont très bien reconnues pas tous les navigateurs.
stop-color pour définir la couleur d'un point dans un dégradé.stop-opacity pour définir l'opacité de la couleur d'un point dans un dégradé.stop-colorstop-opacityNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari sur IOS
Safari
Samsung Internet
Chrome
Edge
Firefox
Opéra
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Voir aussi...
Les spécifications CSS éditées par le W3C sont organisées en modules.
La propriété stop-color fait partie du module Scalable Vector Graphics (SVG) .
Les définitions suivantes sont également décrites dans ce même module.