Niveau : 
Arrière-plans avec CSS 3 Backgrounds
Un dégradé en CSS
Tutoriel par Simon-K (Infographiste, Concepteur - Designer Graphique et Multimédia, Strasbourg)
Sommaire
Un dégradé en CSS
De nouvelles propriétés permettent de réaliser et gérer des arrière-plans de teintes dégradées. Ces propriétés CSS3 sont déjà prises en charge dans la version 3.6 de Firefox -moz-radial-gradient et –moz-linear-gradient, et -webkit-gradient dans Safari.
Créons un fond avec un dégradé de type radial.
Voici le code pour FireFox :
div {
width: 500px;
height: 200px;
background-image: -moz-radial-gradient(center,10px,center,500px,from(#aedae5),to(white));
background-repeat: no-repeat;
position: relative;
}
La valeur des propriétés, center + pixels, correspond au départ et à la fin du dégradé.
La valeur des propriétés, from() + to(), correspond à la couleur de départ et à la couleur de fin.
Voici le code pour Safari :
div {
width: 500px;
height: 200px;
background-image: -webkit-gradient(radial,center center,10,center center,480,from(#aedae5),to(white));
background-repeat: no-repeat;
position: relative;
}
On définit : le type de dégradé,les coordonnées (position) de début et de fin, le rayon (si dégradé radial) et on termine avec les couleurs de début et de fin.
Conclusion
Ces ébauches de propriétés développées dans la troisième mouture de CSS ont tout pour plaire et pour élargir les horizons des webdesigners. Un bon nombre de limites de CSS2 devraient être levées, même si l'on peut se mettre à rêver de fonctionnalités encore plus folles telles que la rotation des images d'arrière-plan.
