Petite astuce Comprendre les dégradés CSS3

La création d'une image uniquement dans le but d'afficher un dégradé est inflexible et devient rapidement une mauvaise pratique. Malheureusement, au moment d'écrire ces lignes, ils pourraient très bien être encore nécessaires, mais heureusement pas pour longtemps. Grâce à Firefox et Safari / Chrome, nous pouvons désormais créer de puissants dégradés avec un minimum d'effort. Dans cette astuce vidéo, nous examinerons certaines des différences de syntaxe lors de l'utilisation des préfixes de fournisseur -moz et -webkit..

Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!

Kit Web

Bien que Mozilla et Webkit adoptent généralement la même syntaxe pour les propriétés CSS3, ils ne sont malheureusement pas tout à fait d'accord en ce qui concerne les dégradés. Webkit a été le premier à adopter les gradients et utilise la structure suivante:

 / * Syntaxe, tirée de: http://webkit.org/blog/175/introducing-css-gradients/ * / -webkit-gradient (,  [, ]?,  [, ]? [, ] *) / * En pratique… * / arrière-plan: -webkit-gradient (linéaire, 0 0, 0 100%, de (rouge) à (bleu));

Ne vous inquiétez pas si vos yeux brouillent à cette syntaxe; le mien aussi! Notez simplement que nous avons besoin d’une liste de paramètres séparés par des virgules..

Quel type de dégradé? (linéaire)
Coordonnées des axes X et Y de l'endroit où commencer. (0 0 - ou coin supérieur gauche)
Coordonnées des axes X et Y indiquant où conclure (0 100% - ou coin inférieur gauche)
Quelle couleur pour commencer? (de (rouge))
De quelle couleur conclure? (à (bleu))

Mozilla

Firefox, qui a implémenté le support de dégradé avec la version 3.6, préfère une syntaxe légèrement différente.

 / * Syntaxe, tirée de: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-linear-gradient ([ || ,]? ,  [, ] *) / * En pratique * / fond: -moz-linear-gradient (en haut, rouge, bleu);

Notez comment nous avons placé le type de dégradé, linéaire, dans l'extension du fournisseur..
Où doit commencer le dégradé? (top - on pourrait aussi passer en degrés, comme dans -45deg)
De quelle couleur commencer? (rouge)
De quelle couleur conclure? (bleu)

Couleur-Stops

Que faire si vous n'avez pas besoin d'un dégradé à 100% d'une couleur à l'autre? C’est là que la couleur s’arrête. Une technique de conception courante consiste à appliquer un dégradé court et subtil, comme ceci:

Notez le subtil dégradé de blanc cassé à blanc en haut.

Auparavant, l'implémentation standard consistait à créer une image, à la définir comme arrière-plan d'un élément et à la répéter horizontalement. Cependant, avec CSS3, c'est un jeu d'enfant.

 fond blanc; / * solution de secours pour les navigateurs plus anciens / non pris en charge * / background: -moz-linear-gradient (top, #dedede, white 8%); arrière-plan: -webkit-gradient (linéaire, 0 0, 0 8%, de (#dedede) à (blanc)); bord supérieur: 1px blanc solide;

Cette fois, nous définissons le gradient pour conclure à 8%, plutôt que 100%, qui est la valeur par défaut. Notez que nous appliquons également une bordure supérieure pour ajouter du contraste. c'est très commun.

Si on souhaite ajouter une troisième (ou nième) couleur, on peut faire:

 fond blanc; / * repli pour les navigateurs plus anciens / non pris en charge * / background: -moz-linear-gradient (en haut, #dedede, blanc 8%, rouge 20%); arrière-plan: -webkit-gradient (linéaire, 0 0, 0 100%, from (#dedede), couleur-stop (8%, blanc), couleur-stop (20%, rouge);

Avec la version -moz, nous désignons que, à 20% de la hauteur de l'élément, nous devrions maintenant être à la couleur rouge.
Pour -webkit, nous utilisons color-stop et transmettons deux paramètres: où l’arrêt doit avoir lieu et quelle doit être la couleur..

Remarques importantes sur les dégradés CSS

Utilisez-les autant que vous le pouvez. S'il est correct de laisser les utilisateurs d'IE voir une couleur unie, je vous encourage à utiliser cette méthode..
IE6 / 7/8, Opera, Safari 3 et Firefox 3 ne peuvent pas restituer les dégradés CSS3. Les utilisateurs de Firefox et Safari effectuent généralement des mises à jour fréquentes, ce qui ne représente pas un gros problème..
Appliquez toujours un arrière-plan de couleur unie par défaut aux navigateurs qui ne comprennent pas les préfixes du fournisseur..
Ne jamais utiliser un dégradé rouge à bleu, comme je l'ai fait pour les exemples.
Les pages Web n'ont pas besoin d'être identiques dans tous les navigateurs! :)

Merci de lire / regarder!

Code