Comment ajouter un effet de dégradé à votre projet en utilisant CSS ?-tutoriel HTML-php.cn

Comment ajouter un effet de dégradé à votre projet en utilisant CSS ?

王林

Libérer： 2023-09-09 17:25:22

avant

1201 Les gens l'ont consulté

Comment ajouter un effet de dégradé à votre projet en utilisant CSS ?

Présentation

Dans cet article, nous allons vous montrer comment ajouter des dégradés à votre projet en utilisant CSS. Les dégradés sont un excellent moyen d'ajouter un intérêt visuel à votre site Web ou à votre application. Ce sont des transitions douces entre deux couleurs ou plus et peuvent être utilisées pour créer de la profondeur ou du mouvement. Ils peuvent également être utilisés pour créer des textures ou des motifs subtils sur des pages Web.

Méthode

Voici les deux façons dont nous utiliserons CSS pour ajouter des dégradés à nos projets dans cet article -

Utilisez la fonction de dégradé linéaire
Utilisez la fonction de dégradé radial

Pour les comprendre en détail, explorons-les plus en détail avec quelques exemples.

Méthode 1 : Utiliser la fonction de dégradé linéaire

Une façon d'ajouter des dégradés à votre projet à l'aide de CSS consiste à utiliser la fonction de dégradé linéaire. Un dégradé linéaire est une méthode permettant de créer une transition douce entre deux ou plusieurs couleurs. La fonction de dégradé linéaire en CSS est utilisée pour créer des arrière-plans dégradés linéaires pour les éléments d'une page Web.

C'est un outil puissant qui vous permet d'ajouter de la créativité et un intérêt visuel à votre site Web. Grâce à la fonction Dégradé linéaire, vous pouvez créer un dégradé d'une couleur à une autre, ou même créer plusieurs couleurs en même temps. Vous pouvez également contrôler la direction du dégradé afin qu'il aille de haut en bas, de gauche à droite ou selon l'angle de votre choix.

Exemple

Voici un exemple de la façon d'ajouter un dégradé linéaire à votre projet à l'aide de la fonction de dégradé linéaire -

Étape 1 - Dans le fichier CSS (style.css), définissez un dégradé linéaire à l'aide de la propriété background -

gradient-example {
   background: linear-gradient(to right, #ff0000, #ffff00);
}

Copier après la connexion

Étape 2 - Appliquez la classe gradient-example à l'élément du fichier index.html où vous souhaitez appliquer le dégradé -

<div class="gradient-example">
   <p>Welcome to Tutorials Point</p>
</div>

Copier après la connexion

Cette méthode permet de créer un dégradé linéaire d'une couleur à une autre, en l'occurrence du rouge au jaune.

Étape 3 − Voici le code complet dans un fichier index.html −

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Gradient Example</title>
   <style>
      body{
         color: white;
         text-align: center;
         font-size: 3rem;
      }
      .gradient-example {
         background: linear-gradient(to right, #ff0000, #ffff00);
         width: 100%;
         height: 100vh;
      }
   </style>
</head>
<body>
   <div class="gradient-example">
      <p>Welcome to Tutorials Point</p>
   </div>
</body>
</html>

Copier après la connexion

Dans cet exemple, nous utilisons une fonction de dégradé linéaire pour définir l'arrière-plan de l'élément de classe "gradient-example" sur un dégradé allant du rouge au jaune. Nous définissons la largeur et la hauteur de l'élément à 100 % pour garantir que le dégradé couvre tout l'élément.

Méthode 2 : Utiliser la fonction de dégradé radial

Les dégradés radiaux en CSS sont créés à l'aide de la fonction Radial-gradient, qui est généralement utilisée pour créer des dégradés circulaires ou elliptiques. La syntaxe de création d'un dégradé radial est similaire à celle d'un dégradé linéaire, avec l'ajout des mots-clés shape et size.

Le mot-clé shape est utilisé pour spécifier si le dégradé est circulaire ou elliptique, et le mot-clé size est utilisé pour spécifier la taille du dégradé. La fonction Radial-gradient vous permet également de spécifier plusieurs arrêts de couleur, qui peuvent être utilisés pour créer des dégradés plus complexes avec plusieurs couleurs.

Exemple

Voici un exemple de la façon d'ajouter un dégradé radial à votre projet à l'aide de la fonction Radialgradient -

Étape 1 - Dans le fichier CSS, définissez un dégradé radial à l'aide de la propriété background -

.gradient-example {
   background: radial-gradient(circle, #ff0000, #ffff00);
}

Copier après la connexion

Étape 2 - Appliquez la classe d'exemple de dégradé à l'élément auquel vous souhaitez appliquer le dégradé -

<div class="gradient-example">
   <p>Welcome to Tutorials Point</p>
</div>

Copier après la connexion

Cette méthode permet de créer un dégradé radial d'une couleur à une autre, en l'occurrence du rouge au jaune.

Étape 3 − Voici le code complet dans un fichier index.html −

Exemple

<!DOCTYPE html>
<html>
<head>
   <style>
      .gradient-example {
         background: radial-gradient(circle, #ff0000, #ffff00);
         height: 300px;
         width: 300px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
      }
   </style>
</head>
<body>
   <div class="gradient-example">
      <p>Welcome to Tutorials Point</p>
   </div>
</body>
</html>

Copier après la connexion

Dans cet exemple, nous avons ajouté du CSS supplémentaire à la classe .gradient-example pour définir la hauteur et la largeur de l'élément, ainsi que certaines propriétés Flexbox pour centrer le texte dans l'élément.

Conclusion

Dans cet article, nous vous montrons deux façons d'ajouter des dégradés à vos projets en utilisant CSS. Nous utilisons les fonctions Dégradé linéaire et Dégradé radial pour créer respectivement des dégradés linéaires et radiaux. Vous pouvez personnaliser votre dégradé en modifiant sa direction, sa couleur et sa forme. Les dégradés sont un excellent moyen d'ajouter de l'intérêt visuel et de la profondeur à votre site Web ou à votre application, et grâce au CSS, ils peuvent être facilement créés et mis en œuvre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!