CSS pour obtenir un dégradé

CSS est un langage de conception de style de page Web couramment utilisé qui peut obtenir divers effets magnifiques. Parmi eux, l’effet dégradé est une technique couramment utilisée par de nombreux web designers et peut être réalisée grâce au CSS. Cet article explique comment utiliser CSS pour obtenir des effets de dégradé, notamment des dégradés linéaires et des dégradés radiaux.

1. Dégradé linéaire

Le dégradé linéaire fait référence au processus de changement progressif des couleurs dans une direction. Nous pouvons obtenir cet effet grâce à la propriété de gradient linéaire du CSS.

La méthode d'implémentation spécifique est la suivante :

1. Créer un élément HTML et définir son style CSS

< ;div class="box">

.box {

width: 300px;
height: 200px;
background: linear-gradient(to right, #03a9f4, #f44336);

}

2. Dans le CSS code, utilisez l'attribut "linear-gradient" pour définir un dégradé linéaire

linear-gradient a deux paramètres Le premier paramètre est la direction, prenant en charge vers la gauche, vers la droite et vers le bas. , et en haut , en bas à gauche, etc. spécifiez la direction. Le deuxième argument est un tableau de valeurs de couleur, séparées par des virgules. Les valeurs de couleur dans ce tableau représentent le dégradé de couleur du point de départ au point final du dégradé.

Par exemple, le code suivant représente un dégradé linéaire de gauche à droite. Le point de départ du dégradé est #03a9f4 et le point final est #f44336 :

background : gradient-linéaire(à droite, #03a9f4, #f44336);

Nous pouvons également définir plusieurs valeurs de couleur pour rendre le dégradé de couleurs plus fluide :

background: linéaire- dégradé(à droite, #03a9f4, #2196f3, #9c27b0, #f44336);

De cette façon, il y aura quatre transitions de couleurs différentes de gauche à droite.

2. Dégradé Radial

Le dégradé radial fait référence au processus de dégradé de couleur commençant à partir d'un point central et se déplaçant progressivement. Nous pouvons également obtenir cet effet via CSS.

La méthode d'implémentation spécifique est la suivante :

1. Créer un élément HTML et définir son style CSS

< ;div class="box">