Gradient : dégradés de couleurs en CSS3 Zoom

Gradient : dégradés de couleurs en CSS3

Gradient est une valeur de background-image de CSS3. Grâce à GRADIENT, vous pouvez créer une image de fond avec des dégradés de couleurs linéaires ou radiaux de votre choix (utilisation de deux à plusieurs couleurs).

Plus de détails

Gradient, Border-radius, Box-shadow... le trio magique de CSS3
Gradient de css3
Bien que notre tuto consiste à expliquer ce que c'est GRADIENT de CSS3, on va quand même en profiter pour aller encore plus loin en utilisant d'autres propriétés de CSS3 : border-radius et box-shadow.

Ci-dessus, nous avons un joli bouton (ou un onglet, si vous voulez). Il s'agit d'une image png avec des effets de dégradé de couleurs, des angles arrondis et, enfin, une ombre portée.

Maintenant, on va essayer de reproduire le même bouton. Mais cette fois-ci, avec seulement  du style CSS3.

Commençons par écrire le code html.
Supposons que notre bouton est un élément <li>.

<ul>
      <li id="bouton_YES">YES !</li>
</ul>

 

Maintenant, on va lui donner un style CSS3.
Afin d"éviter toute mauvaise surprise quant à la compatibilité des propriétés CSS3 avec les navigateurs, on va rajouter à ces propriétés des préfixes bien spécifiques:

  • -webkit- pour Chrome 10 et suivants ainsi que pour Safari 5.1 et suivants,
  • -moz- pour Firefox 3.6, et suivants,
  • -ms- pour IE 10 et suivants,
  • -o- pour Opera 11.10, et suivants.

Le style CSS3 :

#bouton_YES {
 
            width : 290px ;
            height : 80px ;
            border : 2px solid #CCFF33 ;
            font-size : 36px ;
            line-height: 80px ;
            color : #CCFF33 ;

            -webkit-border-radius : 40px ;
            -moz-border-radius : 40px ;
            border-radius : 40px ;

            -moz-box-shadow : 5px 1px 5px 0px #ccc ;
            -webkit-box-shadow : 5px 1px 5px 0px #ccc ;
            -o-box-shadow : 5px 1px 5px 0px #ccc ;
             box-shadow : 5px 1px 5px 0px #ccc ;

             background-image : -webkit-linear-gradient (center top , #006837 0%, #8cc63f 100%) ;
             background-image : -moz-linear-gradient (center top , #006837 0%, #8cc63f 100%) ;
             background-image : -ms-linear-gradient (center top , #006837 0%, #8cc63f 100%) ;
             background-image :  -o-linear-gradient (center top , #006837 0%, #8cc63f 100%) ;
             background-image :   linear-gradient (center top , #006837 0%, #8cc63f 100%) ;

}

 Et voici le résultat

YES !


Un peu d'explication...

    - Nous avons appliqué un dégradé linéaire de HAUT vers le BAS à notre élémént : center top, indique la position de départ
    - La couleur de départ est le vert #006837 [vous pouvez remplacer cette valeur par rgba(0, 104, 55, 1) ]
    - La couleur d'arrivée est un autre vert plus clair #8cc63f [vous pouvez remplacer cette valeur par rgba(140, 198, 63, 1) ]
    - L'étendue de notre dégradé va de 0 à 100%

    - Si vous voulez un dégradé de droite vers la gauche, vous remplacez center top par right top
    - Si vous voulez un dégradé de gauche vers la droite, vous remplacez center top par left top

Vous pouvez voir un tuto sur BOX-SHADOW par ici

Donner votre avis

Gradient : dégradés de couleurs en CSS3

Gradient : dégradés de couleurs en CSS3

Gradient est une valeur de background-image de CSS3. Grâce à GRADIENT, vous pouvez créer une image de fond avec des dégradés de couleurs linéaires ou radiaux de votre choix (utilisation de deux à plusieurs couleurs).

Donner votre avis