-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é.

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é.

• 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%'.

Exemple de code -webkit-gradient() CSS

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

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

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.