Gradienti

8.1 Gradiente lineare (linear-gradient)

I gradienti in CSS permettono di creare transizioni fluide tra due o più colori. Vengono usati per sfondi, bottoni e altri elementi per aggiungere profondità visiva e appeal. In CSS ci sono due tipi principali di gradienti: lineari (linear-gradient) e radiali (radial-gradient).

Il gradiente lineare crea una transizione fluida tra i colori lungo una linea retta. La direzione della linea e le transizioni dei colori possono essere personalizzate precisamente.

Sintassi:

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

Dove:

• direction: direzione del gradiente. Può essere specificato con un angolo (ad esempio, 45deg) o parole chiave (to right, to bottom, ecc.)
• color-stop: determina il colore e la sua posizione nel gradiente

Esempio 1: Gradiente lineare semplice

In questo esempio viene creato un gradiente che passa dal rosso al blu da destra a sinistra:

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

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

Esempio 2: Gradiente lineare con angolo

In questo esempio, il gradiente va con un angolo di 45 gradi dal giallo al verde:

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

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

Esempio 3: Gradiente lineare con più colori

In questo esempio, il gradiente va dall'alto verso il basso, passando gradualmente attraverso quattro colori: rosso, giallo, verde e blu:

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

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

Esempio 4: Gradiente lineare con punti di controllo

In questo esempio vengono specificati i punti di controllo che determinano la posizione esatta di ciascun colore nel gradiente:

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

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

8.2 Gradiente radiale (radial-gradient)

Il gradiente radiale crea una transizione fluida tra i colori, partendo dal centro o da un punto specificato. Il gradiente si espande in un cerchio o ellisse.

Sintassi:

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

Dove:

• shape: forma del gradiente (circle o ellipse)
• size: dimensione del gradiente (closest-side, farthest-side, closest-corner, farthest-corner)
• position: posizione del centro del gradiente (può essere specificata in pixel, percentuali o parole chiave come center, top, left, ecc.)
• color-stop: determina il colore e la sua posizione nel gradiente

Esempio 1: Gradiente radiale semplice

In questo esempio viene creato un gradiente radiale che parte dal centro di un cerchio, passando dal rosso al blu:

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

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

Esempio 2: Gradiente radiale con posizione diversa

In questo esempio il centro del gradiente radiale è spostato nell'angolo in alto a sinistra, creando una transizione dal giallo al verde:

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

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

Esempio 3: Gradiente radiale con più colori

In questo esempio, il gradiente va dal centro di un cerchio, passando gradualmente attraverso quattro colori: rosso, giallo, verde e blu:

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

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

Esempio 4: Gradiente radiale con punti di controllo

In questo esempio vengono specificati i punti di controllo che determinano la posizione esatta di ciascun colore nel gradiente:

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

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

8.3 Esempi con gradienti complessi

Esempio 1: Gradiente lineare con trasparenza

In questo esempio viene utilizzata la trasparenza per creare un gradiente da rosso semitrasparente a blu semitrasparente:

    
      <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));
      }
    
  

Esempio 2: Gradiente radiale con dimensioni

In questo esempio viene creato un gradiente radiale ellittico che riempie il lato più vicino dell'elemento:

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

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

Esempio 3: Creazione di gradienti per pulsanti

I gradienti possono rendere i pulsanti più attraenti. Questo gradiente va dall'alto verso il basso, passando dal verde chiaro al verde scuro, conferendo al pulsante volume e profondità:

    
      <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;
      }
    
  

Vantaggi dell'uso dei gradienti:

1. Attrattiva visiva. I gradienti permettono di creare transizioni fluide tra i colori, aggiungendo profondità visiva e attrattiva agli elementi di design.

2. Flessibilità. I gradienti possono essere personalizzati per creare vari effetti, da transizioni semplici a sfondi complessi multicolore.

3. Supporto al design responsivo. I gradienti si adattano facilmente a diverse dimensioni di schermo e risoluzioni, rendendoli utili per creare design web responsivi.