Dégradés linéaires CSS3 [Astuces CSS3]
Pente est un excellent ajout de fonctionnalités de couleur en CSS3. Plutôt que d’ajouter une seule couleur, nous pouvons désormais ajouter plusieurs combinaisons de couleurs dans un bloc de déclaration sans utiliser d’images, ce qui pourrait réduire la demande HTTP de notre site Web, permettant ainsi un chargement plus rapide du site Web..
Si vous avez joué avec les dégradés en CSS3, vous connaissez probablement les deux méthodes: dégradé radial et linéaire. Le message d'aujourd'hui portera sur ce dernier.
Créer des dégradés
Comme la spécification dit que les dégradés en CSS3 sont une image, elle n’a pas de propriété particulière comme les autres ajouts de nouvelles fonctionnalités, elle est donc déclarée à l’aide de la touche. image de fond propriété à la place.
Si nous prenons un coup d'oeil à la syntaxe complète pour le dégradé, il semble un peu rembourré, ce qui pourrait semer la confusion chez certaines personnes.
div background-image: -webkit-linear-gradient (haut, # FF5A00 0%, # FFAE00 100%); image d'arrière-plan: -moz-linear-gradient (haut, # FF5A00 0%, # FFAE00 100%); image d'arrière-plan: -ms-linear-gradient (haut, # FF5A00 0%, # FFAE00 100%); image d'arrière-plan: -o-linear-gradient (haut, # FF5A00 0%, # FFAE00 100%); image d'arrière-plan: dégradé linéaire (haut, # FF5A00 0%, # FFAE00 100%);
Alors creusons dans chaque partie de la syntaxe une par une pour rendre les choses plus claires.
Tout d'abord, le gradient linéaire est déclaré avec le gradient linéaire() une fonction. La fonction a trois valeurs principales. La première valeur définit la position de départ du dégradé. Vous pouvez utiliser un mot clé descriptif, tel que Haut pour démarrer le gradient qui coule de la Haut;
div background-image: linear-gradient (haut, # FF5A00, # FFAE00);
L'extrait ci-dessus est la version officielle du W3C permettant de créer des dégradés. C'est en fait plus simple et assez explicite et cela créera également le dégradé suivant.
Vous pouvez aussi utiliser bas faire le contraire, sinon droite et la gauche.
Nous pouvons également créer un dégradé diagonal en utilisant degré d'angle comme la position de départ du dégradé. Voici un exemple:
div image d'arrière-plan: gradient linéaire (45 °, # FF5A00, # FFAE00);
L'extrait ci-dessus créera le dégradé de couleur suivant:
La deuxième valeur de la fonction indiquera au première couleur l'information et ses position d'arrêt qui est indiqué en pourcentage. La position d'arrêt est en fait facultative; le navigateur est assez intelligent pour déterminer la position correcte, ainsi, lorsque nous ne spécifions pas l'arrêt de la première couleur, le navigateur prendra 0% comme défaut.
Et, la valeur suivante est le deuxième couleur combinaison. Cela fonctionne comme la valeur précédente, seulement si c'est la dernière couleur appliquée, et nous ne spécifions pas le position d'arrêt, une valeur de 100% sera pris par défaut. Maintenant, regardons l'exemple ci-dessous:
div background-image: gradient linéaire (haut, # FF5A00 0%, # FFAE00 100%);
L'extrait ci-dessus créera un dégradé similaire à ce que nous avons vu précédemment (aucune différence), mais nous spécifions maintenant la position d'arrêt de la couleur;
Maintenant changeons le arrêt de la couleur, et cette fois nous préciserons 50% pour la première couleur et 51% pour la deuxième couleur, et voyons comment cela se passe;
div background-image: gradient linéaire (haut, # FF5A00 50%, # FFAE00 51%);
Transparence
En créant transparence en gradient est également possible. Pour créer l'effet, nous devons traduire la couleur hexagone dans rgba mode et abaisser le canal alpha.
div image d'arrière-plan: gradient linéaire (en haut, rgba (255,90,0,0,2), rgb (255, 174,0,0.2));
L’extrait ci-dessus réduira l’intensité de la couleur de 20%, et le dégradé deviendra comme ceci:
Plusieurs couleurs
Si vous souhaitez ajouter plus de couleurs, ajoutez simplement les couleurs les unes à côté des autres avec un séparateur de virgule et laissez le navigateur déterminer chacune des positions d'arrêt des couleurs..
div background-image: gradient linéaire (haut, rouge, orange, jaune, vert, bleu, indigo, violet);
L'extrait ci-dessus créera l'arc-en-ciel suivant.
Compatibilité du navigateur
Malheureusement, au moment d'écrire ces lignes, tous les navigateurs actuels doivent encore prendre en charge la syntaxe standard. Ils ont toujours besoin du préfixe du vendeur (-webkit-, -moz-, -Mme- et -o-). Donc, c'est pourquoi la syntaxe complète apparaît comme ceci:
div background-image: -webkit-linear-gradient (haut, # FF5A00 0%, # FFAE00 100%); image d'arrière-plan: -moz-linear-gradient (haut, # FF5A00 0%, # FFAE00 100%); image d'arrière-plan: -ms-linear-gradient (haut, # FF5A00 0%, # FFAE00 100%); image d'arrière-plan: -o-linear-gradient (haut, # FF5A00 0%, # FFAE00 100%); image d'arrière-plan: dégradé linéaire (haut, # FF5A00 0%, # FFAE00 100%);
Par ailleurs, Internet Explorer, en particulier les versions 9 et antérieures, est loin d’être la norme. Le gradient dans IE9 et ci-dessous est déclaré avec filtre, donc si nous voulons ajouter un dégradé sur ces navigateurs, nous devons écrire quelque chose comme ceci;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
le filtre a ses limites: premièrement, il ne permet pas d'ajouter plus de trois couleurs, et créer un effet de transparence est également un peu délicat - il ne permet pas rgba, mais l'IE filtre les usages #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Voici un outil pour vous aider à convertir rgba à #ARGB.
- Démo
- Source de téléchargement
Écrire la syntaxe plus rapidement
Comme vous pouvez le voir ci-dessus, afin de maintenir la compatibilité des dégradés entre navigateurs, nous devons ajouter cinq lignes de codes supplémentaires, ce qui est inefficace..
Nous pouvons faire beaucoup de choses pour simplifier la tâche. tels que l’utilisation de Prefix-free, Prefixr, LESS ou Sass pour aider à compiler les codes, mais nous vous recommandons surtout d’utiliser cet outil, ColorZilla Gradient. Cet outil générera simplement tous les codes nécessaires pour que les dégradés fonctionnent dans tous les navigateurs..
Mots finaux
Aujourd'hui, nous avons beaucoup discuté de la création de dégradés. Nous avons examiné chaque partie de la syntaxe, en créant des effets transparents et en maintenant la compatibilité avec les navigateurs. Nous espérons donc que vous avez déjà une meilleure compréhension du sujet..
Il y a encore beaucoup de choses que nous prévoyons d'explorer Gradients CSS3 Dans nos prochains messages, restez à l'écoute de Hongkiat.com. Enfin, merci d'avoir lu ce post, nous espérons qu'il vous a plu.
Lectures complémentaires
- Arrière-plans RGBA Cross Browser Bullet Proof - Lea Verou
- Image CSS3 - W3.org
- Quand puis-je utiliser des dégradés CSS3 - CanIUse.com
