Création de dégradés linéaires entre navigateurs avec CSS3
Gradients Linéaires
Le type de dégradé le plus courant que vous verrez est un dégradé linéaire de deux couleurs. Cela signifie que le dégradé se déplacera en ligne droite, changeant progressivement de la première couleur à la seconde le long de cette ligne. L'image sur cette page montre un simple dégradé de gauche à droite de # 999 (gris foncé) à #fff (blanc).
Les dégradés linéaires sont les plus faciles à définir et bénéficient du plus grand soutien dans les navigateurs. Les dégradés linéaires CSS3 sont pris en charge dans Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ et Safari 4+. Internet Explorer peut ajouter des dégradés à l'aide d'un filtre et les soutient de nouveau à IE 5.5. Ce n'est pas CSS3, mais c'est une option pour la compatibilité entre navigateurs.
Lorsque vous définissez un dégradé, vous devez définir plusieurs éléments différents:
- De quel type de dégradé s'agit-il -
linéaireouradial - Où le gradient devrait commencer
- Où la pente devrait s'arrêter
- Quelles sont les couleurs dans le dégradé et où elles devraient commencer et s'arrêter
Pour définir des dégradés linéaires à l'aide de CSS3, vous écrivez:
gradient linéaire(angle ou côté ou coin, arrêt de la couleur, arrêt de la couleur)
- Vous définissez d’abord le type de dégradé avec le nom
linéaire -pente. - Ensuite, vous définissez les points de départ et d’arrêt du dégradé de l’une des deux manières suivantes:
anglede la ligne en degrés de 0 à 359, avec 0 degrés pointant vers le haut. Ou avec la fonction "côté ou coin", telle quela gauche,droite,bas, etHaut. Celles-ci seront expliquées plus en détail à la page suivante. Si vous les laissez de côté, le dégradé s’écoulera du haut vers le bas de l’élément. - Ensuite, vous définissez les arrêts de couleur. Vous définissez les arrêts de couleur avec le code de couleur et un pourcentage optionnel. Le pourcentage indique au navigateur où sur la ligne commencer ou se terminer par cette couleur. La valeur par défaut consiste à placer les couleurs uniformément le long de la ligne. Vous en apprendrez plus sur les palettes de couleurs à la page 3.
Donc, pour définir le dégradé ci-dessus avec CSS3, vous écrivez:
gradient linéaire (à gauche, # 999999 0%, #ffffff 100%);
Et pour le définir comme arrière-plan d'un DIV vous écrivez:
div {background-image: linear-gradient (left, # 999999 0%, #ffffff 100%;} Extensions du navigateur pour les dégradés linéaires CSS3
Pour que votre dégradé fonctionne avec plusieurs navigateurs, vous devez utiliser des extensions de navigateur pour la plupart des navigateurs. filtre pour Internet Explorer 9 et inférieur (actuellement 2 filtres). Tous ces éléments utilisent les mêmes éléments pour définir votre dégradé (sauf que vous ne pouvez définir que des dégradés à 2 couleurs dans IE).
Filtres Microsoft et extension- Internet Explorer est le plus difficile à prendre en charge, car trois lignes différentes sont nécessaires pour prendre en charge les différentes versions du navigateur. Pour obtenir le dégradé gris à blanc ci-dessus, écrivez:
/ * IE 5.5–7 * /filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8–9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-linear-gradient (left, # 999999 0%, #ffffff 100%);
Extension Mozilla-Le -moz- extension fonctionne comme la propriété CSS3, juste avec le -moz- extension. Pour obtenir le dégradé ci-dessus pour Firefox, écrivez:
-moz-linear-gradient (gauche, # 999999 0%, #ffffff 100%);
Extension Opera-Le -o- L'extension ajoute des dégradés à Opera 11.1+. Pour obtenir le dégradé ci-dessus, écrivez:
-o-linear-gradient (gauche, # 999999 0%, #ffffff 100%);
Webkit Extension-Le -webkit- L'extension fonctionne beaucoup comme la propriété CSS3. Pour définir le dégradé ci-dessus pour Safari 5.1+ ou Chrome 10+, écrivez:
-webkit-linear-gradient (gauche, # 999999 0%, #ffffff 100%);
Il existe également une version plus ancienne de l'extension Webkit qui fonctionne avec Chrome 2+ et Safari 4+. Vous y définissez le type de dégradé en tant que valeur plutôt que dans le nom de la propriété. Pour obtenir le dégradé de gris en blanc avec cette extension, écrivez:
-webkit-gradient (linéaire, haut à gauche, haut à droite, arrêt de la couleur (0%, # 999999), arrêt de la couleur (100%, # ffffff)); Code CSS complet pour le dégradé linéaire CSS3
Pour que le dégradé gris à blanc soit pleinement pris en charge par tous les navigateurs, vous devez d'abord inclure une couleur unie de secours pour les navigateurs qui ne prennent pas en charge les dégradés. Le dernier élément doit être le style CSS3 pour les navigateurs entièrement conformes. Alors, vous écrivez:
arrière-plan: # 999999;arrière-plan: -moz-linear-gradient (gauche, # 999999 0%, #ffffff 100%);arrière-plan: -webkit-gradient (linéaire, gauche en haut, droite en haut, arrêt de la couleur (0%, # 999999), arrêt de la couleur (100%, # ffffff));arrière-plan: -webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);arrière-plan: -o-linear-gradient (gauche, # 999999 0%, #ffffff 100%);arrière-plan: -ms-linear-gradient (gauche, # 999999 0%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);arrière-plan: gradient linéaire (gauche, # 999999 0%, #ffffff 100%);
Les pages suivantes de ce didacticiel expliquent plus en détail les parties d'un dégradé et la dernière page vous indique un outil qui constitue un excellent moyen de créer automatiquement des dégradés CSS3.
Voir ce dégradé linéaire en action en utilisant simplement CSS.
02 sur 04Création de dégradés diagonaux: l'angle du dégradé
Les points de départ et d'arrêt déterminent l'angle du dégradé. La plupart des dégradés linéaires vont de haut en bas ou de gauche à droite. Mais il est possible de construire un dégradé qui se déplace sur une ligne diagonale. L'image sur cette page montre un simple dégradé qui se déplace dans un angle de 45 degrés sur l'image de droite à gauche.
Angles pour définir la ligne de dégradé
L'angle est une ligne sur un cercle imaginaire au centre de l'élément. 0deg pointe vers le haut, 90deg pointe vers la droite, 180deg pointe vers le bas, et 270deg pointe vers la gauche. Vous pouvez définir n’importe quel angle compris entre 0 et 359 degrés.
Notez que dans un carré, un angle de 45 degrés se déplace du coin supérieur gauche au coin inférieur droit, mais que dans un rectangle, les points de début et de fin sont légèrement en dehors de la forme, comme vous pouvez le voir sur l'image.
La manière la plus courante de définir un dégradé diagonal consiste à définir un angle, tel que en haut à droite et le dégradé passera de ce coin au coin opposé. Vous pouvez définir la position de départ avec les mots-clés suivants:
- Haut
- droite
- bas
- la gauche
- centre
Et ils peuvent être combinés pour être plus spécifiques, tels que:
- en haut à droite
- en haut à gauche
- centre supérieur
- en bas à droite
- en bas à gauche
- en bas au centre
- centre droit
- centre gauche
Voici le CSS pour un dégradé similaire à celui illustré, du rouge au blanc qui se déplace du coin supérieur droit au coin inférieur gauche:
arrière-plan: ## 901A1C;image d'arrière-plan: -moz-linear-gradient (en haut à droite, # 901A1C 0%, # FFFFFF 100%);background-image: -webkit-gradient (linéaire, haut droite, bas gauche, arrêt de la couleur (0, # 901A1C), arrêt de la couleur (1, #FFFFFF));arrière-plan: -webkit-linear-gradient (en haut à droite, # 901A1C 0%, #ffffff 100%);arrière-plan: -o-linear-gradient (en haut à droite, # 901A1C 0%, #ffffff 100%);arrière-plan: -ms-linear-gradient (en haut à droite, # 901A1C 0%, #ffffff 100%);arrière-plan: dégradé linéaire (en haut à droite, # 901A1C 0%, #ffffff 100%);
Vous avez peut-être remarqué qu'il n'y a pas de filtres IE dans cet exemple. En effet, IE n'autorise que deux types de filtres: de haut en bas (par défaut) et de gauche à droite (avec le GradientType = 1 commutateur).
Visualisez ce dégradé linéaire diagonal en action en utilisant simplement CSS.
03 sur 04Arrêts de couleur
Avec les dégradés linéaires CSS3, vous pouvez ajouter plusieurs couleurs à votre dégradé pour créer des effets encore plus sophistiqués. Pour ajouter ces couleurs, vous ajoutez des couleurs supplémentaires à la fin de votre propriété, séparées par des virgules. Vous devez également indiquer où, sur la ligne, les couleurs doivent commencer ou se terminer.
Les filtres Internet Explorer ne prennent en charge que deux jeux de couleurs. Par conséquent, lorsque vous créez ce dégradé, vous ne devez inclure que les première et deuxième couleurs à afficher.
Voici le CSS pour le dégradé 3 couleurs ci-dessus:
arrière-plan: #ffffff;arrière-plan: -moz-linear-gradient (gauche, #ffffff 0%, # 901A1C 51%, #ffffff 100%);arrière-plan: -webkit-gradient (linéaire, haut à gauche, haut à droite, couleur-stop (0%, # ffffff), couleur-stop (51%, # 901A1C), couleur-stop (100%, # ffffff));arrière-plan: -webkit-linear-gradient (gauche, #ffffff 0%, # 901A1C 51%, # ffffff 100%);arrière-plan: -o-linear-gradient (gauche, #ffffff 0%, # 901A1C 51%, # ffffff 100%);arrière-plan: -ms-linear-gradient (gauche, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);arrière-plan: dégradé linéaire (gauche, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Visualisez ce dégradé linéaire avec trois arrêts de couleur en action en utilisant uniquement du CSS.
04 sur 04Rendre les gradients de construction plus faciles
Je vous recommande deux sites pour vous aider à créer des dégradés. Chacun présente des avantages et des inconvénients. Je n’ai pas encore trouvé de constructeur de dégradés capable de tout faire.
Ultimate CSS Gradient GeneratorCe générateur de dégradé est très populaire car il fonctionne de manière similaire aux générateurs de dégradés dans des programmes tels que Photoshop. Je l’aime aussi parce qu’il vous donne toutes les extensions CSS, pas seulement Webkit et Mozilla. Le problème avec ce générateur est qu’il ne supporte que les dégradés horizontaux et verticaux. Si vous voulez faire des gradients en diagonale, vous devez aller à l'autre générateur que je recommande. Générateur de dégradé CSS3Ce générateur m'a pris un peu plus de temps à comprendre que le premier, mais il prend en charge le changement de direction en diagonale. Si vous connaissez un autre générateur de dégradé CSS que vous préférez, contactez-nous.
