Style d'éléments de site Web avec un dégradé d'arrière-plan CSS

Style d'éléments de site Web avec un dégradé d'arrière-plan CSS

Si vous êtes sur Internet depuis plus de quelques minutes, il est probable que vous ayez rencontré un dégradé CSS. La propriété CSS background peut être utilisée pour créer une gamme de styles différents, et l'un des types les plus intrigants est ce qu'elle peut faire avec la valeur de dégradé.





Savoir concevoir et créer différents dégradés CSS est un atout pour tout concepteur ou développeur de logiciels. À partir de cet article, vous apprendrez tout ce que vous devez savoir pour commencer à incorporer des dégradés CSS dans vos projets.





Qu'est-ce qu'un dégradé CSS ?

Un dégradé CSS est essentiellement la combinaison de deux ou plusieurs couleurs qui passent en douceur de l'une à l'autre. L'état de transition d'un dégradé CSS dépend du type de dégradé utilisé. Il existe deux principaux types de gradients couramment utilisés dans la conception de logiciels : linéaire et radial.





Cependant, il existe un troisième type de dégradé moins populaire et connu sous le nom de dégradé conique.

Syntaxe des dégradés CSS

Background-image: gradient-type (direction, color1, color2);

Le dégradé CSS doit être affecté à la propriété CSS background-image. Le type de dégradé peut être l'un de plusieurs ; gradient linéaire, gradient radial ou gradient conique. Le type de dégradé est suivi de crochets ouvrants et fermants qui contiennent la direction de transition du dégradé, ainsi que les couleurs à inclure dans le dégradé.



En rapport: Comment définir une image d'arrière-plan en CSS

L'exemple ci-dessus montre deux couleurs, mais un dégradé peut contenir plusieurs couleurs différentes. La seule exigence est que chaque couleur de la liste soit séparée par une virgule.





Qu'est-ce qu'un gradient linéaire ?

Le dégradé linéaire est le dégradé CSS le plus populaire. Il crée un dégradé de transition horizontal, vertical ou diagonal en utilisant deux couleurs ou plus.

Exemple de dégradé linéaire CSS

Background-image: linear-gradient(#00A4CCFF, #F95700FF);

Le code ci-dessus produira le dégradé CSS suivant :





Il y a un composant majeur de la syntaxe du dégradé omis dans l'exemple ci-dessus. Ce composant est la direction de transition du dégradé, et il a été omis car l'alignement par défaut du dégradé linéaire est vertical (de haut en bas) ; c'est la sortie souhaitée dans cet exemple.

Le code ci-dessus produit le même résultat que la ligne de code suivante. La seule différence entre les deux est la section de direction du code.

Utilisation de l'exemple de dégradé linéaire inférieur

Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);

Comme vous pouvez le voir sur la sortie, le code ci-dessus crée un dégradé qui commence par le bleu en haut, puis passe lentement à l'orange en bas. Si vous vouliez inverser l'ordre des couleurs, vous pouvez simplement remplacer le vers le bas avec en haut et cela inversera la direction du gradient, produisant la sortie suivante :

Semblable à l'alignement vertical, l'alignement horizontal d'un dégradé peut être obtenu à l'aide de deux ensembles de mots-clés de direction : à gauche et à droite , qui produira respectivement les sorties suivantes.

combien remplacer la batterie macbook pro

Dégradé linéaire diagonal

Il est possible d'obtenir une transition de dégradé linéaire diagonal dans n'importe quelle direction d'un dégradé linéaire. Il n'y a que quatre listes spécifiques de mots-clés que vous devez connaître pour rendre cela possible.

  • En bas à droite
  • En bas à gauche
  • En haut à droite
  • En haut à gauche

Utilisation de l'exemple de gradient linéaire diagonal

Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);

L'exemple ci-dessus produit la sortie suivante :

Comme vous pouvez le voir sur la sortie ci-dessus, le dégradé linéaire effectue sa transition dans une direction diagonale allant de la partie supérieure gauche à la partie inférieure droite du dégradé.

Dégradé linéaire multicolore

Un dégradé linéaire peut avoir deux couleurs ou plus, mais à quoi ressemblent plus de couleurs dans un dégradé ? Un arrangement de couleurs dégradées linéaires multicolores dépend de sa direction. Ceux qui effectuent une transition horizontale auront chaque nouvelle couleur apparaissant à gauche ou à droite du dégradé linéaire, selon la direction exacte du dégradé linéaire.

Exemple de dégradé linéaire multicolore

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

La ligne de code ci-dessus produira la sortie suivante :

Comme vous pouvez le voir, chaque nouvelle couleur est ajoutée à droite du dégradé, créant ce qui se transforme finalement en un arc-en-ciel. La même sortie peut être obtenue dans une direction verticale ; cependant, la disposition spécifique des couleurs sur le dégradé linéaire dépendra du mot-clé de direction verticale (vers le haut ou vers le bas).

Qu'est-ce qu'un gradient radial ?

Le dégradé radial crée un dégradé en spirale de deux couleurs qui partent du centre par défaut. Là où le dégradé linéaire produit un dégradé droit qui s'écoule verticalement ou horizontalement, le dégradé radial produit un dégradé circulaire qui s'écoule du centre vers les bords extérieurs.

Utilisation de l'exemple de dégradé radial

Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);

La ligne de code ci-dessus produira la sortie suivante :

Modification du centre de dégradé radial

Par défaut, un dégradé radial commence au centre du dégradé ; cependant, il est possible de changer le point d'origine avec l'introduction de quelques mots-clés.

mon disque est toujours à 100

Exemple de modification de la position de départ du gradient radial

Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);

La ligne de code ci-dessus produira la sortie suivante :

Comme vous pouvez le voir sur la sortie ci-dessus, le dégradé commence maintenant dans le coin supérieur droit au lieu du centre. Ce changement est possible grâce à l'inclusion du mot-clé en haut à droite dans le code ci-dessus. La liste de mots-clés suivante peut également être utilisée pour changer le point d'origine du dégradé radial :

  • En haut à gauche
  • En bas à droite
  • En bas à gauche

Dégradés radiaux multicolores

Comme le dégradé linéaire, le dégradé radial peut également utiliser deux autres couleurs, la principale différence est que là où le dégradé linéaire s'ajoute au dégradé en ligne droite, le dégradé radial ajoute de nouvelles couleurs sur le bord extérieur.

Exemple de dégradé radial multicolore


Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

La ligne de code ci-dessus produira la sortie suivante :

Personnalisation des dégradés

Jusqu'à présent, vous avez vu comment changer la direction et le point central d'un dégradé, mais vous n'avez pas vu comment personnaliser un dégradé. La personnalisation d'un dégradé peut sembler beaucoup de travail, mais une fois que vous avez compris les bases de la création d'un dégradé d'arrière-plan CSS, la prochaine étape évidente consiste à apprendre à rendre vos dégradés CSS plus uniques.

comment rendre les photos sur facebook privées

Par défaut, les couleurs d'un dégradé occupent une quantité d'espace uniformément répartie, chaque couleur passant en douceur à la suivante. Ainsi, si deux couleurs sont combinées pour former un dégradé, chaque couleur occupera la moitié de l'espace disponible lors de la transition de l'une à l'autre. Si trois couleurs sont combinées, chaque couleur occupera un tiers de l'espace disponible.

Avec un dégradé personnalisé, vous pouvez définir la quantité d'espace qu'une couleur occupera dans un dégradé en attribuant explicitement le position d'arrêt de couleur .

Personnalisation d'un dégradé linéaire Exemple 1

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);

La ligne de code ci-dessus produira la sortie suivante :

La sortie ci-dessus montre la deuxième couleur du dégradé linéaire s'arrêtant au point 30% de la première couleur du dégradé, au lieu de sa position habituelle, et parce que la deuxième couleur est également la couleur finale du dégradé, elle s'étend naturellement jusqu'à la fin .

Si vous deviez placer les 30% dans le code ci-dessus à la fin de la première couleur, les choses devraient devenir plus claires.

Personnalisation d'un dégradé linéaire Exemple 2

Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );

Le code ci-dessus produira la sortie suivante.

La sortie ci-dessus montre clairement la première couleur du dégradé s'arrêtant au point 30% de la deuxième couleur du dégradé. Cet exemple, ainsi que celui ci-dessus, devrait vous aider à comprendre plus facilement la personnalisation de l'arrêt des couleurs.

La personnalisation d'un dégradé radial se fait de la même manière qu'un dégradé linéaire. La seule chose que vous devez faire pour obtenir les mêmes résultats ci-dessus dans un dégradé radial est de changer le type et la direction du dégradé.

Créer des dégradés CSS n'a jamais été aussi simple

Cet article du didacticiel vous fournit les outils nécessaires pour identifier et créer des dégradés linéaires et radiaux. Si vous êtes arrivé à ce point, vous avez appris à changer la direction et le centre d'un dégradé. De plus, vous avez maintenant les compétences nécessaires pour personnaliser les dégradés CSS et créer des dégradés d'arrière-plan uniques.

Cependant, si vous ne voulez pas créer directement de nouveaux dégradés uniques, vous pouvez commencer par créer de superbes dégradés préexistants.

Partager Partager Tweeter E-mail 27 exemples de dégradés de fond CSS élégants

Les couleurs unies sont tellement l'année dernière. Les dégradés sont là ! Mais comment les créer en CSS ?

Lire la suite
Rubriques connexes
  • La programmation
  • Développement web
  • Création de sites web
  • CSS
A propos de l'auteur Kadeisha Kean(21 articles publiés)

Kadeisha Kean est un développeur de logiciels Full-Stack et un rédacteur technique/technologique. Elle a la capacité distincte de simplifier certains des concepts technologiques les plus complexes; produire du matériel qui peut être facilement compris par tout novice en technologie. Elle est passionnée par l'écriture, le développement de logiciels intéressants et les voyages à travers le monde (à travers des documentaires).

Plus de Kadeisha Kean

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner