Voici le résultat obtenu avec juste du CSS3
Ce dégradé est obtenu avec du CSS3 et est compatible avec Internet Explorer
Et voici le code vous permettant de pouvoir réaliser vos background en dégradé de couleurs sans avoir recours à une image.
<head>
<style type="text/css">
#degrade
{
/*...*/
background-image: -moz-linear-gradient(top, #91c225, #4477a1);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #91c225));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#91c225', endColorstr='#4477a1');
-ms-filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#91c225', endColorstr='#4477a1');
/*...*/
}
</style>
...
</head>
Pour obtenir un dégradé horizontal, laissez la valeur GradientType à 0 ; pour un dégradé vertical, passez cette valeur à 1.
Pourquoi ma réponse à été aussi "tardive"
Parce qu'il y a quelques contraintes que j'ai cherché à résoudre sans y parvenir :
- Ce code vous empeche d'utiliser la propriété "border-radius" dans la règle ou class CSS concernée sous Internet Explorer, mais elle restera fonctionnelle pour les autres navigateurs.
- Impossibilité d'utiliser un dégradé radial, la fonction ne le supporte pas.
Si vous avez une réponse complémentaire à ces contraintes, n'hésitez pas à me la communiquer afin de compléter cet article.
Ce petit bout de code apportera néanmoins une solution provisoire à tous ceux m'en ayant fait la demande.