Créer un dégradé en CSS

degradé-css

A ce jour, aucune propriété CSS pour créer un dégradé existe au niveau de la W3C , donc chaque navigateur y va de sa petite propriété personnelle.

Nous allons donc voir ici, comme créer un dégradé simplement pour Firefox, Chrome/Safari, Opéra, ainsi que Internet Explorer!!! Oui mais pour la version 10, ca reste IE…

Chaque navigateur possède sa propriété, mais elles se ressemblent toutes et fonctionnent de la même manière.

Linéaire

Il existe 2 formes de dégradé, et nous allons commencer par la forme linéaire:

Sur chaque propriété il faut définir la direction du dégradé (ici top), ensuite la première couleur (#000000) et la deuxième couleur (#00a9e0).

Ce qui donne:

Le premier exemple est un dégradé partant de « top », le second de « left » et le dernier du coin en haut a gauche, donc « top left ».

Note:Si vous ne voyez pas de dégradé ou pas de différence entre ces trois blocs, mettez votre navigateur ou changez-en. Merci pour l’internet mondial 🙂

Afin de rester compatible avec les navigateurs vieillissants, il suffit de rajouter un background-color en tout début de votre classe ou id, afin de ne pas court-circuiter les autres propriétés.

Radial

Maintenant nous allons voir la deuxième forme de dégradé, qui est « radial », donc en forme de rond. Ca fonctionne exactement de la manière que pour les dégradés linéaires: une direction, une couleur de départ et une couleur de fin:

Ce qui donne:

Afin d’avoir un dégradé qui part du centre, il suffit de mettre la direction « center ».

Bonus

Et oui, vous pouvez mettre plus de deux couleurs à vos dégradés afin de créer des trucs totalement psychédéliques!

Laisser un commentaire