Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

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

Sommaire

• Principe de base
  • Dégradés linéaires
  • Dégradé radial
• Réalisation d'un bouton
• Filtre pour Internet Explorer
• Lectures complémentaires

Principe de base

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

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);

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);
}

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);
}

Réaliser un bouton

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

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.

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

• Bonnes pratiques sur les dégradés en CSS3 (Babylon design)
• Dégradés de couleurs avec CSS3 (html5-CSS3.fr)
• Propriétés:gradient (CSS3 create)
• Spécification W3C gradients

Haut