Vous êtes ici > CSS Débutant | CSS3 | Réaliser un fond en dégradé

Avant les CSS3, pour réaliser de jolis boutons ou tout autre fond de couleur en dégradé, il convenait de réaliser une image que l'on déclarait en image de fond à l'aide de background-image.

On peut maintenant s'en passer grâce à de nouvelles valeurs de background : linear-gradient et radial-gradient.

CSS 3 : Réaliser un fond en dégradé sans image

Sommaire

Principe de base

Fonctionne avec :

  • Chrome 3, Safari 5.0
  • Firefox 3.6, SeaMonkey
  • MSIE 10
  • Opera 11.6

Propriétés et valeurs :

  • background-image:
    • linear-gradient()
    • radial-gradient()

Le principe de base est très simple :

  • On définit le type de dégradé voulu : linéaire (linear-gradient) ou radial (radial-gradient) ;
  • On indique les couleurs de départ et d'arrivée et, éventuellement, leurs proportions de mélange.

Attention : Les codes CSS indiqués ci-après ne tiennent compte que ponctuellement des préfixes propriétaires à rajouter selon le navigateur (-moz- pour Firefox, -webkit- pour Safari et Chrome, et -o- pour Opera). Il convient néanmoins de les indiquer systématiquemt si l'on veut assurer une retro-compatibilité.

Le code HTML utilisé pour ce tutoriel sera le suivant :

<div class="Degrade">
  <p>Dégradé [xxx]</p>
</div>

Dégradés linéaires

Codes CSS
.Degrade {
background-image:linear-gradient(white, black);
}

Ne rien indiquer comme proportions revient à déclarer (white 0%, black 100%), ce qui donne le mélange maximum entre les deux couleurs. Le fondu atteint ses limites on déclarant 50% aux deux couleurs (white 50%, black 50%) ou toute autre quantité où le % de la couleur initiale est supérieur à celui de la couleur finale.
Toujours par défaut, le dégradé se fait vers le bas, ce qui équivaut à déclarer (to bottom, white, black).

Zone de test

Dégradé de haut en bas

Résultat attendu :
dégradé noir et blanc de haut en bas

Pour un dégradé linéaire allant vers la droite, le code CSS sera le suivant :

.Degrade {
background-image:linear-gradient(to right, white, black);
}

Attention : les navigateurs utilisant les préfixes propriétaires ont implémenté la propriété gradient sur la base d'une ancienne spec. utilisant les mots clés top, right, bottom, left. Ceux-ci indiquent le côté d'orgine du dégradé et non to bottom, to left (etc.) indiquant le sens du dégradé. Le code précédent préfixé, pour Firefox par exemple, donnera :

background-image:-moz-linear-gradient(left, white, black);
Zone de test

Dégradé de gauche à droite

Résultat attendu :
dégradé noir et blanc de gauche à droite

Avec cet exemple, on voit bien à quel point il est important de veiller au choix des couleurs et aux contrastes. Dans une véritable mise en application on doit éviter de se retrouver, comme ici, avec deux couleurs identiques qui se superposent, sous peine de ne rien pouvoir déchiffrer !

Pour un dégradé suivant un angle de 60 degrés, ce sera :

.Degrade{
background-image:linear-gradient(60deg, white, black);
}

Zone de test

Dégradé en diagonale

Résultat attendu :
dégradé noir et blanc en diagonale

Attention : les navigateurs utilisant encore des versions préfixées et ceux implémentant les dernières spécifications du W3C ne mesurent pas les angles de la même façon. Les anciens suivent le principe du cercle trigonométrique alors que le W3C prend l'origine de l'angle à la verticale et tourne dans le sens des aiguilles d'une montre.

Ainsi une même orientation aura pour mesure 30 degrés en version préfixée et 60 degrés en version normalisée W3C.

Le code devra donc être pour un maximum de compatibilité :

.Degrade{
background-image:-moz-linear-gradient(30deg, white, black);
background-image:-webkit-linear-gradient(30deg, white, black);
background-image:-o-linear-gradient(30deg, white, black);
background-image:linear-gradient(60deg, white, black);
}

En complément, voir avec différents navigateurs cette page de tests.

Dégradé radial

Et un dernier exemple pour un dégradé radial :

.Degrade {
background-image:radial-gradient(white, black);
}
Zone de test

Dégradé radial

Résultat attendu :
dégradé noir et blanc des bords vers le centre

Réaliser un bouton

Dans le tutoriel "Boutons CSS", j'utilise l'image suivante pour réaliser un bouton à l'état survolé :

Image avec effet de relief et d'éclairement

Est-il possible de réaliser la même chose en CSS ? Oui.

Grâce à la possibilité de déclarer plusieurs images de fond et d'arrondir les coins, on va pouvoir s'approcher de l'apparence de cette image.

Zone de test

Résultat attendu :
Image du bouton CSS avec effet de relief et d'éclairement

Et vous savez quoi ? Fainéasse que je suis, je ne me suis même pas embêtée à coder. J'ai utilisé tout simplement le Ultimate CSS Gradient Generator qui m'a permis d'obtenir, sans me fatiguer, le code nécessaire pour le dégradé :

.bouton {
width:150px;
height:50px;
background: black;
color:white;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.hover {
background: -moz-linear-gradient(top, 
  #ccc6c3 0%, 
  #828c95 24%, 
  #000000 41%, 
  #7f7f7f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, 
  color-stop(0%,#ccc6c3), 
  color-stop(24%,#828c95), 
  color-stop(41%,#000000), 
  color-stop(100%,#7f7f7f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, 
  #ccc6c3 0%,
  #828c95 24%,
  #000000 41%,
  #7f7f7f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, 
  #ccc6c3 0%,
  #828c95 24%,
  #000000 41%,
  #7f7f7f 100%); /* Opera 11.10+ */
background: linear-gradient( 
  #ccc6c3 0%,
  #828c95 24%,
  #000000 41%,
  #7f7f7f 100%); /* W3C */
}

Vous remarquerez que le code pour les navigateurs webkit est double pour assurer la retro-compatibilté.

Filtre pour Internet Explorer

Pour les versions d'Internet Explorer antérieures à la 10, quelques précautions...

La 1ère précaution (valable aussi pour d'autres vieux navigateurs) est de bien sûr de déclarer une couleur de fond compatible avec la couleur d'écriture en cas d'absence de dégradé. Dans les exemples du début, j'ai pris soin d'indiquer une couleur de fond noire afin de ne pas avoir du blanc sur blanc en cas de non reconnaissance de gradient.

La seconde, si on ne peut renoncer à l'effet dégradé est de faire une feuille de style spécifique à IE avec des images, ou d'utiliser la syntaxe propriétaire donnant le "même" (enfin, même... de loin) résultat.

Accrochez-vous, le voici pour obtenir le même dégradé linéaire noir et blanc qu'au tout début de ce tutoriel :

filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='#FFFFFF',endColorstr='#000000', 
GradientType=0);
}

Pour un dégradé de gauche à droite, le GrandientType devra être égal à 1.

Heureusement l'Ultimate CSS gradient Générator cité ci-dessus le fournira automatiquement. Sinon, microsoft met aussi à disposition un générateur de son filtre propriétaire.

Attention, encore une fois la solution est loin d'être miraculeuse : border-radius n'est pas compatible avec filter. Il faudra donc faire un choix, soit des coins arrondis (en ajoutant la partie conditionnelle proposée en supplément), soit un dégradé primaire très loin de l'effet voulu dans le cas du bouton proposé en exemple.

Lectures complémentaires

précédent suivant

Haut

Contact : pascale at mammouthland.net

Creative Commons License

En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/css3/degrades-sans-image.php