L'éditeur de Downcodes vous propose un tutoriel détaillé sur le code de dégradé de couleur d'arrière-plan CSS. Cet article expliquera l'utilisation des dégradés linéaires et des dégradés radiaux d'une manière simple et facile à comprendre, complété par des exemples de codes pour vous aider à maîtriser facilement les compétences des dégradés CSS et à ajouter une touche de luminosité à votre conception Web. Que vous soyez débutant ou développeur expérimenté, vous pouvez en bénéficier grandement. Nous commencerons par un simple dégradé linéaire et expliquerons progressivement les utilisations avancées telles que les angles personnalisés, les dégradés radiaux, les arrêts de couleur, etc., et discuterons de problèmes importants tels que la compatibilité du navigateur et l'optimisation des performances, pour vous aider finalement à créer des conceptions Web colorées et visuellement époustouflantes. fond de page.
Il existe deux principaux types de code CSS pour les dégradés de couleurs d'arrière-plan : les dégradés linéaires et les dégradés radiaux. Un dégradé linéaire fait passer les couleurs en douceur le long d'une ligne droite, tandis qu'un dégradé radial rayonne vers l'extérieur à partir d'un point. Pour commencer, écrire du code CSS pour un dégradé de couleur d’arrière-plan implique de comprendre et d’appliquer la propriété background-image, puisque les dégradés sont en fait traités comme une image. Ce qui suit explique en détail comment utiliser les dégradés linéaires pour ajouter des effets d'arrière-plan colorés à vos pages Web ou projets.
Les dégradés linéaires sont définis par la fonction Linear-gradient(), qui nécessite au moins deux couleurs pour créer l'effet de transition. La syntaxe de base est la suivante :
image d'arrière-plan : dégradé linéaire (direction, arrêt de couleur1, arrêt de couleur2, ...);
La direction est facultative et la valeur par défaut est de haut en bas. Les arrêts de couleur définissent les couleurs de début et de fin du dégradé. Vous pouvez ajouter plusieurs couleurs pour créer des effets de dégradé complexes.
Pour créer un arrière-plan dégradé linéaire passant du bleu au rouge, le code est le suivant :
.élément {
image d'arrière-plan : dégradé linéaire (bleu, rouge) ;
}
Aucune direction n'est spécifiée ici, la direction par défaut est de haut en bas. Si vous souhaitez un dégradé de gauche à droite, vous pouvez écrire :
.élément {
image d'arrière-plan : dégradé linéaire (à droite, bleu, rouge) ;
}
En plus d'utiliser le mot-clé direction, vous pouvez également spécifier un angle spécifique pour définir la direction du dégradé, par exemple :
.élément {
image d'arrière-plan : dégradé linéaire (45 degrés, bleu, rouge) ;
}
Cela créera un effet de dégradé du coin supérieur gauche au coin inférieur droit (angle de 45 degrés).
Les dégradés radiaux sont implémentés via la fonction radial-gradient(), qui nécessite également de spécifier deux couleurs ou plus. Contrairement aux dégradés linéaires, les couleurs rayonnent vers l’extérieur à partir d’un point central. La syntaxe de base est la suivante :
image d'arrière-plan : dégradé radial (taille de la forme à la position, couleur de départ, ..., dernière couleur) ;
La forme et la taille sont facultatives, la valeur par défaut étant l'ellipse et le coin le plus éloigné de l'élément de superposition.
Pour créer un dégradé radial du blanc au centre au bleu sur les bords, le code est le suivant :
.élément {
image d'arrière-plan : dégradé radial (blanc, bleu) ;
}
Cela créera un dégradé radial elliptique par défaut.
Vous pouvez modifier la forme et la taille du dégradé, par exemple en créant un dégradé circulaire et en spécifiant la taille :
.élément {
image d'arrière-plan : dégradé radial (cercle du côté le plus proche, blanc, bleu) ;
}
Cela rend la forme du dégradé circulaire, avec des dimensions s'étendant uniquement jusqu'au bord le plus proche.
Qu'il s'agisse d'un dégradé linéaire ou radial, l'utilisation de plusieurs arrêts de couleur vous permet de créer des effets de dégradé plus complexes et plus riches. La syntaxe est la suivante :
image d'arrière-plan : dégradé linéaire (à droite, rouge, orange, jaune, vert, bleu, indigo, violet) ;
Cela créera un effet arc-en-ciel, affiché de gauche à droite.
Lorsque vous utilisez des arrière-plans dégradés, vous devez faire attention aux problèmes de compatibilité du navigateur. La plupart des navigateurs modernes prennent en charge les dégradés CSS, mais vous pouvez rencontrer des problèmes de compatibilité avec certains navigateurs plus anciens. Ces problèmes peuvent être résolus avec un outil de préfixe automatique ou en ajoutant manuellement le préfixe du navigateur. De plus, bien que les dégradés apportent de superbes effets visuels à la page, des dégradés trop complexes peuvent affecter la vitesse de chargement et les performances de la page, c'est pourquoi une utilisation modérée est recommandée.
En résumé, les dégradés CSS sont un outil puissant et flexible pour ajouter de superbes effets d'arrière-plan aux pages Web et aux applications. En vous familiarisant avec la syntaxe de base des dégradés linéaires et radiaux, ainsi qu'en apprenant à créer des dégradés complexes à l'aide d'arrêts de couleur, vous pouvez concevoir des styles d'arrière-plan colorés et professionnels.
1. Comment écrire du code de dégradé de couleur d'arrière-plan en utilisant CSS ?
Pour obtenir un effet de dégradé de couleur d'arrière-plan, vous pouvez utiliser la fonction CSS Linear-gradient(). Cette fonction génère linéairement un arrière-plan dégradé basé sur un angle spécifié.
Voici un exemple de code pour appliquer un dégradé de fond bleu de haut en bas à un élément :
.my-element { background : gradient linéaire (vers le bas, #0000ff, #0000cc);}Dans cet exemple, vers le bas spécifie la direction du dégradé, c'est-à-dire de haut en bas, #0000ff est la couleur de départ et #0000cc est la couleur de fin.
2. Comment obtenir un dégradé de couleurs d’arrière-plan dans différentes directions ?
En plus du bas, vous pouvez également modifier la direction du dégradé. Voici quelques exemples d’orientation couramment utilisés :
vers le haut représente le dégradé de bas en haut à droite représente le dégradé de gauche à droite vers en bas à droite représente le dégradé de haut à gauche vers en bas à droite vers en haut à gauche représente le dégradé de bas à droite vers en haut à gaucheVous pouvez également spécifier l'angle, par exemple :
45deg représente le dégradé du coin supérieur gauche au coin inférieur droit 135deg représente le dégradé du coin supérieur droit au coin inférieur gauche3. Comment obtenir un dégradé d’arrière-plan de plusieurs couleurs ?
En plus des dégradés bicolores, davantage de couleurs peuvent également être utilisées pour obtenir des effets de dégradé d'arrière-plan colorés.
Voici un exemple de code qui applique un dégradé d'arrière-plan de trois couleurs (de gauche à droite) :
.my-element { background : gradient linéaire (à droite, #ff0000, #00ff00, #0000ff);}Dans cet exemple, les couleurs du dégradé de gauche à droite sont le rouge, le vert et le bleu. Vous pouvez augmenter ou diminuer les couleurs selon vos besoins et ajuster leur position pour créer des effets de dégradé plus complexes.
J'espère que cet article pourra vous aider à mieux comprendre et appliquer les dégradés de couleurs d'arrière-plan CSS. Pour du contenu plus passionnant, continuez à suivre l’éditeur de Downcodes !