CSS : -webkit-gradient

La propriété CSS -webkit-gradient permet d’appliquer un effet de dégradé à un élément dans un navigateur webkit.

#mon_identifiant{
background: -webkit-gradient(linear, left top, left bottom, from(#35425d), to(#fff));
}

Elle prend comme valeur :

  • top ou linear pour spécifier la direction du dégradé, soit top : de haut en bas, soit linear : de gauche à droite.
  • Les couleurs renseignées en anglais(yellow, blue,..), en héxadécimal, ou en rvb(rgb), la première spécifie la couleur de départ du dégradé, et la seconde spécifie la couleur d’arrivé.
  • 2 valeurs en pourcentage juste après les couleurs spécifiant le départ et l’arrivée du dégradé.

Exemple

CSS
p{
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
}
Html
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

3 Commentaires pour cet article.

  1. Laurent
    Le 8 février 2011 à 23:06.

    Merci pour les options de cette superbe fonction CSS, par contre quelqu’un sait-il s’il y a moyen de fixer le gradient et qu’il se place en fonction de l’affichage et non de la page entière ? Merci.

  2. Johan
    Le 3 avril 2011 à 23:23.

    Je voudrai faire chez moi une bannière qui a un dégradé de couleur de gauche à droite, débutant pas du blanc et terminant par du noir, j’ai donc insérer cette ligne de code dans mon fichier css :
    -webkit-gradient(linear, left linear, right linear, from(white), to (black));
    mais ma bannière ne change pas. Merci de ton aide

  3. geompse
    Le 25 avril 2011 à 17:59.

    @Johan, il me semble que tu veux utiliser :
    background: -webkit-gradient(linear, left top, right top, from(white), to (black));
    * top à la place de linear

Laisser un commentaire