Créer une image uniquement pour afficher un dégradé est rigide et peut rapidement devenir une mauvaise pratique. Mais malheureusement, au moment d’écrire ces lignes, cela devra peut-être encore l’être, mais j’espère que ce ne sera pas le cas pour très longtemps. Grâce à Firefox et Safari/Chrome, nous pouvons désormais réaliser des dégradés puissants avec un minimum d'effort. Dans cet article, nous montrerons une implémentation simple des dégradés CSS et en quoi cette propriété diffère dans les navigateurs Mozilla et Webkit.
PS : Le texte original de cet article fournit une vidéo, mais pour des raisons bien connues, nous ne pouvons pas regarder cette vidéo sur Youtube. Les étudiants qui souhaitent la regarder, veuillez trouver un moyen de la regarder vous-même (jusqu'à 720P) : http. https://www.youtube.com/watch?v=9D2hyM5SSCE
Bien que Mozilla et Webkit adoptent généralement la même syntaxe pour les propriétés CSS3, ils ne peuvent malheureusement pas s'entendre sur les dégradés. Webkit est le premier noyau de navigateur à prendre en charge les dégradés, en utilisant la structure suivante :
/* Syntaxe, tirée de : http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <rayon>]?, <point> [, <rayon>]? [, <arrêt>]*)
/* En pratique... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
.jpg)
Ne vous inquiétez pas, ces syntaxes vont vous éblouir, moi aussi ! N'oubliez pas que nous devons séparer les groupes de paramètres par une virgule.