-o-linear-gradient() CSS fonction

Définition de la CSS -o-linear-gradient().

La fonction de Dégradé linéaire CSS -o-linear-gradient() de la propriété d'Image de fond CSS permet spécifier le dégradé de couleurs linéaire à appliquer sur l'arrière-plan d'un élément (X)HTML.

Exemple de syntaxe CSS -o-linear-gradient() :
 /* première version W3C */
background-image : -o-linear-gradient( bottom, hsl(0, 80%, 70%), #BADA55 );

/* seconde version W3C */
background-image : -o-linear-gradient( to bottom, hsl(0, 80%, 70%), #BADA55 );

background : -o-linear-gradient( 45deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100% );

La fonction de Dégradé linéaire CSS -o-linear-gradient(direction , liste de couleurs) peut prendre comme paramètres de dégradé :

  • direction : peut prendre la valeur d'un angle ou d'un mot clé. Optionnel, si omise la valeur est considérée comme top.
  • L'angle est un numérique positif ou négatif suivi d'une unité CSS d'angle (deg, grad, rad, turn), il permet de spécifier l'inclinaison de votre dégradé par exemple si vous voulez un dégradé en diagonale. L'angle débute à droite.
  • Le mot clé est toujours précédé par to dans la seconde version et n'existe pas dans la première version proposée, il précise le sens du dégradé. Pour le dégradé l'horizontal vous pouvez utiliser left ou right et pour le dégradé vertical top ou bottom. Vous pouvez aussi faire un left top pour les dégradés en diagonal.
  • liste de couleurs : représente l'ensemble des couleurs qui vont constituer votre dégradée. Chaque couleur est séparée par une virgule.
  • On peut aussi y ajouter un numérique en % ou suivit d'une unité de longueur (px ou ex ou em, etc...) qui spécifie l'endroit où doit être appliquée la couleur. 0% représente le début de votre dégradé et 100% la fin.

Conditions d'application de la CSS -o-linear-gradient().

La fonction de Dégradé linéaire CSS -o-linear-gradient() est applicable avec la propriété d'Arrière-plan CSS et la propriété d'Image de fond CSS .

Problème d'interprétation de -o-linear-gradient() en Css.

La fonction de Dégradé linéaire CSS -o-linear-gradient() CSS pose des problèmes car n'est pas reconnue que par Opera.

Compatibilités navigateurs de la fonction -o-linear-gradient()

Détails des versions de la CSS -o-linear-gradient()
Résumé du support navigateurs de la CSS -o-linear-gradient()

Fonction Css non préfixée de -o-linear-gradient().

-o-linear-gradient() CSS est une version préfixée de la propriété de feuille de style linear-gradient CSS pour le navigateur Opera.

Reportez-vous au chapitre "Propriétés préfixées" de propriété Css linear-gradient pour voir les autres propriétés Css préfixées équivalentes, aussi que le code Css pour avoir un maximum de support navigateurs.

Exemples et astuces CSS pour utiliser -o-linear-gradient()

Différence du point de départ de l'angle

Quand vous utilisez les angles, il faut savoir que le fonctionnement est -o-linear-gradient est différent de celui de .
En effet, le point de départ et le sens de rotation diffères comme le montre le schéma ci-dessous :

Pour connaitre la valeur de l'angle de linear-gradient en degré, vous devez appliquer la formule suivante :

Exemple de code :
abs(ovalPrefix−450) mod 360 = valeur

  • ovalPrefix est la valeur en degré de -o-linear-gradient

Différence de mots clés d'angle avec to

Quand vous utilisez les mots clés d'angles comme left top, right bottom, bottom left, ect ..., il faut savoir que le fonctionnement est différent si vous mettez un to ou pas.
En effet, la manière de générer le dégradé diffère.
Sans le to avec top left :
Le groupe de mots clés correspond à l'angle de départ de la ligne de dégradé qui ira vers l'angle opposé.
Avec le to avec top left :
Le groupe de mots clés correspond à un angle. La ligne de gradient doit être incliné de telle sorte qu'il indique dans le même quadrant que l'angle spécifié, et qui est perpendiculaire à une ligne coupant les deux coins voisins de la zone de dégradé .
Cela provoque une couleur-stop à 50% pour croiser les deux coins voisins (voir exemple).

Votre avis sur la définition -o-linear-gradient() en CSS

Votez pour la définition CSS -o-linear-gradient()

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/o-linear-gradient-css-fonction.html Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.