-webkit-gradient() CSS fonction

Définition de la CSS -webkit-gradient().

La fonction CSS -webkit-gradient() permet de créer un dégradé de couleur linéaire ou radial. Utilise l'ancienne syntaxe des spécifications Css de dégradé.

Exemple de syntaxe CSS -webkit-gradient() :
background-image : -webkit-gradient( linear, left top, right bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0) );
background-image : -webkit-gradient( radial, left top, 0px, right bottom, 100%, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0) );

La fonction CSS -webkit-gradient() peut prendre comme paramètres dans l'ordre pour un dégradé linéaire :

  • linear : spécifie le type de dégradé.
  • point de départ : Spécifie le point de départ du dégradé.
  • point d'arrivé : valeurs possible, identiques au point de départ. Spécifie le point d'arrivé du dégradé.
  • from(non couleur), couleur de départ du dégradé.
  • color-stop(pourcentage, non couleur) : représente les couleurs intermédiaires. Pourcentage, représente la position de la couleur dans le dégradé. Valeur comprise entre 0 (début) et 1 (fin). Optionnel
  • to(non couleur) : couleur de fin du dégradé.

La fonction CSS -webkit-gradient() peut prendre comme paramètres dans l'ordre pour un dégradé radial :
  • radial : spécifie le type de dégradé.
  • point de départ : Spécifie le point de départ du dégradé.
  • position du début du rayon : nombre suivi d'une unité de longueur CSS.
  • point d'arrivé : valeurs possible, identiques au point de départ. Spécifie le point d'arrivé du dégradé.
  • position de fin du rayon : nombre suivi d'une unité de longueur CSS.
  • from(non couleur), couleur de départ du dégradé.
  • color-stop(pourcentage, non couleur) : représente les couleurs intermédiaires. Pourcentage, représente la position de la couleur dans le dégradé. Valeur comprise entre 0 (début) et 1 (fin). Optionnel
  • to(non couleur) : couleur de fin du dégradé.

La valeur de point de départ CSS peut prendre la valeur de (origine coin haut gauche de l'élément):

  • numerique numerique : première valeur correspond à sa position sur l'axe X et la seconde correspond à sa position sur l'axe Y. X et Y sont suivis d'une unité de longueur CSS. Si une seule valeur, cela revient à mettre deux valeurs identiques.
  • top left ou left top : revient à placer le point du dégradé en '0% 0%'.
  • top : place le point du dégradé en '50% 0%'.
  • top center ou center top : place le point du dégradé en '50% 0%'.
  • right top ou top right : place le point du dégradé en '100% 0%'.
  • left : place le point du dégradé en '0% 50%'.
  • left center ou center left : place le point du dégradé en '0% 50%'.
  • center ou center center : place le point du dégradé en '50% 50%'. Valeur par défaut.
  • right : place le point du dégradé en'100% 50%'.
  • right center, ou center right : place le point du dégradé en '100% 50%'.
  • bottom left ou left bottom : place le point du dégradé en '0% 100%'.
  • bottom : place le point du dégradé en '50% 100%'.
  • bottom center, ou center bottom : place le point du dégradé en '50% 100%'.
  • bottom right ou right bottom : place le point du dégradé en '100% 100%'.

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

La fonction CSS -webkit-gradient() est applicable avec les propriétés CSS et .

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

La fonction de feuille de style -webkit-gradient() CSS pose des problèmes car n'est pas reconnue que par Chrome et Safari.

Compatibilités navigateurs de la fonction -webkit-gradient()

Fonctions CSS préfixées de -webkit-gradient()

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la fonction -webkit-gradient() CSS :

La propriété Css -webkit-gradient a évoluée pour les propriétés Css et .


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

Votez pour la définition CSS -webkit-gradient()

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

Avis sur la page https://www.zonecss.fr/proprietes-css/webkit-gradient-css-fonction.html Votes: 4 / 5 - 3 votes
Cliquez sur une étoile pour voter.