Tutoriel par Simon-K (Infographiste, Concepteur - Designer Graphique et Multimédia, Strasbourg)Mis à jour le 14 Avril 2010. 18225 lectures. Tags : css, background, css3, degrades

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 :

On définit la couleur du centre (#aedae5) puis la couleur externe (#d8edf2)

Voici le code pour Safari :

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.