Astuce CSS : Ajouter des fonds dégradés sans image
A l'initiative d'Apple, en 2008, et désormais appliqué à la norme CSS standard, nous avons la possibilité de créer des dégradés de couleurs à mettre en fond de cellules HTML.
Ainsi, au lieu d'utiliser une image, nous utilisons une définition CSS, bien plus légère en poids. Ces définitions sont compatibles avec tous les navigateurs modernes, et nous verrons comment faire en sorte que l'affichage ne soit pas catastrophiques sur les vieux navigateurs.
1/ La base
Basiquement, nous allons commencer par créer des cellules avec un dégradé de deux couleurs, il faut pour cela indiquer une couleur de début, et une couleur de fin.
Les valeurs des couleurs sont les valeurs habituelles que l'on utilise pour les styles :
- les couleurs nommées, prédéfinies par les navigateurs (ex. black, white, y compris la valeur transparent)
- les couleurs hexadécimales, (ex. #000000, #FFFFFFF)
- les couleurs RGB (ex. rgb(0,0,0), rgb(255, 255, 255))
- les couleurs RGB avec couche Alpha (ex. rgba(0,0,0, 0.5), rgba(1,1,1, 0.5))
Ecrivons notre première classe CSS utilisant un fond dégradé :
.fond {background-image:linear-gradient(yellow, orange);}
Pour tester, appliquez la à une cellule HTML (div par exemple) avec une certaine taille, afin de bien voir les CSS en action.
Vous savez dés à présent faire un dégradé HTML/CSS sans image.
2/ Valeur par défaut
Comme je vous le disais, cette propriété n'est compatible qu'avec les navigateurs modernes, mais pour les anciens, il y a une astuce toute simple, que l'on utilisait déjà avec les images.
Il suffit d'ajouter une couleur de fond en complément, et qui prendra le relais en cas de besoin. Vous pouvez soit le définir sur la valeur de début, de fin ou une valeur intermédiaire.
.fond {background:yellow; background-image:linear-gradient(yellow, orange);}
Il est possible de mettre directement la valeur du dégradé dans la propriété "background", mais l'on perd la possibilité d'avoir cette valeur par défaut en "fallback".
3/ La direction
Par défaut, les dégradés se font toujours du haut vers le bas. Mais il est possible de définir une direction pour multiplier les possibilités.
Cette direction peut s'indiquer via :
- une valeur textuelle indiquant le côté cible : to left, to right, to top, to bottom
- une valeur textuelle indiquant l'angle : 90deg par exemple, sachant que l'angle "0" est l'angle par défaut et que cela tourne dans le sens des aiguilles d'une montre.
Attention, la valeur de la direction se met avant les valeurs des couleurs.
.fond {background-image:linear-gradient(25deg, #ff9600, #ff7e00);}
4/ Les positions clés
Il est possible de faire un dégradé multiple, il est par exemple possible d'aller du vert au bleu, puis au jaune :
.fond {background-image:linear-gradient(green, blue, yellow);}
Vous pouvez ajouter autant couleur que vous souhaitez, pour faire par exemple un arc-en-ciel :
.fond {background:linear-gradient(red, orange, yellow, green, blue, indigo, violet);}
5/ Décalage des couleurs
Pour étendre encore plus les possibilités, il est possible de renforcer une des couleurs en leur appliquant un décalage. Si vous souhaitez que le jaune soit plus présent que le orange :
.fond {background-image:linear-gradient(yellow, yellow 25%, orange);}
Ainsi que le dégradé affichera, de 0 à 25% de la zone, un dégradé du jaune au jaune ... soit un jaune plein, puis à partir de 25% jusqu'à la fin, un dégradé du jaune au orange.
Les décalages sont indiqués en pourcentage de la longueur de l'objet ou en pixels si vous souhaitez être plus précis.
6/ Et on peut, bien entendu, tout mélanger
Et, c'est tout l'intérêt de cette fonctionnalité, on peut enchainer les couleurs, et les positions sur un seul dégradé afin de créer un objet complexe.
Sachant que l'on peut ajouter autant de couleurs clés que l'on souhaite, on comprend désormais mieux pourquoi la direction est indiquée en premier.
Pour faire une barre au fond plein, mais aux bords dégradés vers le transparent.
.fond {background-image:linear-gradient(to top, transparent, blue 20%, blue 80%, transparent);}
