Dégradés

8.1 Dégradés linéaires (linear-gradient)

Les dégradés en CSS permettent de créer des transitions fluides entre deux couleurs ou plus. Ils sont utilisés pour les arrière-plans, les boutons et d'autres éléments pour ajouter de la profondeur visuelle et de l'attrait. Il existe deux principaux types de dégradés en CSS : linéaires (linear-gradient) et radiaux (radial-gradient).

Le dégradé linéaire crée une transition fluide entre les couleurs le long d'une ligne droite. La direction de la ligne et les transitions de couleurs peuvent être précisées.

Syntaxe :

    
      background: linear-gradient(direction, color-stop1, color-stop2, ...);
    
  

Où :

• direction: la direction du dégradé. Peut être spécifiée par un angle (par exemple, 45deg) ou par des mots-clés (to right, to bottom, etc.)
• color-stop: définit la couleur et sa position dans le dégradé

Exemple 1 : Dégradé linéaire simple

Dans cet exemple, un dégradé allant du rouge au bleu de droite à gauche est créé :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red, blue);
      }
    
  

Exemple 2 : Dégradé linéaire avec un angle

Dans cet exemple, le dégradé va à 45 degrés du jaune au vert :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(45deg, yellow, green);
      }
    
  

Exemple 3 : Dégradé linéaire avec plusieurs couleurs

Dans cet exemple, le dégradé va du haut vers le bas en passant par quatre couleurs : rouge, jaune, vert et bleu :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to bottom, red, yellow, green, blue);
      }
    
  

Exemple 4 : Dégradé linéaire avec des points de contrôle

Dans cet exemple, les points de contrôle sont spécifiés pour déterminer l'emplacement exact de chaque couleur dans le dégradé :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
      }
    
  

8.2 Dégradés radiaux (radial-gradient)

Le dégradé radial crée une transition fluide entre les couleurs, à partir du centre ou d'un point spécifié. Le dégradé s'étend en cercle ou en ellipse.

Syntaxe :

    
      background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
    
  

Où :

• shape: la forme du dégradé (circle ou ellipse)
• size: la taille du dégradé (closest-side, farthest-side, closest-corner, farthest-corner)
• position: la position du centre du dégradé (peut être spécifiée en pixels, pourcentages ou mots-clés tels que center, top, left, etc.)
• color-stop: définit la couleur et sa position dans le dégradé

Exemple 1 : Dégradé radial simple

Dans cet exemple, un dégradé radial est créé partant du centre du cercle, allant du rouge au bleu :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, blue);
      }
    
  

Exemple 2 : Dégradé radial avec position différente

Dans cet exemple, le centre du dégradé radial est déplacé en haut à gauche, créant une transition du jaune au vert :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at top left, yellow, green);
      }
    
  

Exemple 3 : Dégradé radial avec plusieurs couleurs

Dans cet exemple, le dégradé part du centre du cercle en passant par quatre couleurs : rouge, jaune, vert et bleu :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, yellow, green, blue);
      }
    
  

Exemple 4 : Dégradé radial avec des points de contrôle

Dans cet exemple, les points de contrôle sont spécifiés pour déterminer l'emplacement exact de chaque couleur dans le dégradé :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
      }
    
  

8.3 Exemples avec des dégradés complexes

Exemple 1 : Dégradé linéaire avec transparence

Dans cet exemple, la transparence est utilisée pour créer un dégradé allant du rouge transparent au bleu transparent :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
      }
    
  

Exemple 2 : Dégradé radial avec tailles

Dans cet exemple, un dégradé radial elliptique qui remplit le côté le plus proche de l'élément est créé :

    
      <div class="background"></div>
    
  

    
      .background {
        min-height: 200px;
        background: radial-gradient(ellipse closest-side, red, blue);
      }
    
  

Exemple 3 : Création de dégradés pour les boutons

Les dégradés peuvent rendre les boutons plus attrayants. Ce dégradé va du haut vers le bas, passant du vert clair au vert foncé, donnant du volume et de la profondeur au bouton :

    
      <button type="button" class="button">Button</button>
    
  

    
      .button {
        background: linear-gradient(to bottom, #4caf50, #2e7d32);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
      }
    
  

Avantages de l'utilisation des dégradés :

1. Attrait visuel. Les dégradés permettent de créer des transitions fluides entre les couleurs, ajoutant de la profondeur visuelle et de l'attrait aux éléments de design.

2. Flexibilité. Les dégradés peuvent être ajustés pour créer divers effets, des transitions simples aux arrière-plans multicolores complexes.

3. Support de design adaptatif. Les dégradés s'adaptent facilement à différentes tailles d'écran et résolutions, ce qui les rend utiles pour créer des designs web adaptatifs.