Une fonctionnalité du CSS3 très pratique si vous souhaitez mettre un dégradé de couleurs sur le background d'un div (ou autre), c'est les fonctions gradient !
Pour un dégradé linéaire du blanc vers noir de gauche à droite :
background: linear-gradient(to right, #fff, #000);
On peut aussi enchainer les couleurs en ajoutant des codes couleurs en paramètre. Par exemple, passer du vert au rouge en passant par le jaune (rastafari !) :
background: linear-gradient(to right, #0f0, #f0ff00, #f00);
Pour un dégradé circulaire du blanc vers noir calé à gauche du bloc :
background: radial-gradient(at left center, #fff, #000);
Cette fonctionnalité CSS3 est prise en charge par les navigateurs récents (même IE10 le comprend, c'est dire !), mais pour garantir d'avoir une couleur même sur les vieux navigateurs ne prenant pas en charge cette fonctionnalité, on peut en amont de la déclaration du dégradé déclarer une couleur unie :
background: #f00;
background: radial-gradient(at left center, #f00, #fff);
De cette manière, les navigateurs ne comprenant pas radial-gradient() l'ignoreront et la ligne précédente sera utilisée, donc un fond uni rouge dans le cas présent.
Et si les codes de couleur en hexadécimal vous fiche la nausée, il existe une fonction permettant de codifier les couleurs en décimal : rgba(rouge, vert, bleu, alpha).
Très pratique car en plus on peut préciser le degré de transparence de la couleur (alpha: 0 pour complètement transparente, 1 pour complètement opaque).
Une couleur bleue transparente à 50% sera codifiée ainsi :
background: rgba(0, 0, 255, 0.5);
Et on peut bien sûr utiliser cette fonction en lieu et place des codes #hexa, dans les propriétés CSS background, color,