Gradienti: lineari e radiali
Create transizioni uniformi tra i colori con linear-gradient() e radial-gradient().
Gradienti: lineari e radiali è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è un gradiente CSS?
I gradienti CSS sono immagini generate (non richiedono alcun file immagine) che sfumano tra due o più colori. Vengono specificati come valori di background-image o della forma abbreviata background.
Nozioni di base su linear-gradient()
Un gradiente lineare sfuma i colori lungo una linea retta. Il primo argomento imposta la direzione, seguito dalle interruzioni di colore.
<div class="gradient-demo"></div>
Direzione del gradiente: parole chiave e angoli
La direzione può essere indicata con parole chiave o angoli espressi in gradi:
<div class="dir-keyword"></div>
<div class="dir-45deg"></div>
<div class="dir-135deg"></div>
Più interruzioni di colore
Aggiunga tutte le interruzioni di colore necessarie. Ogni interruzione può specificare facoltativamente una posizione (una lunghezza o una percentuale).
<div class="stops"></div>
Interruzioni nette di colore
Imposti due interruzioni nella stessa posizione per creare un'interruzione netta, ovvero un passaggio brusco da un colore all'altro senza sfumatura.
<div class="hard-stop"></div>
Gradiente lineare ripetuto
repeating-linear-gradient() ripete il motivo del gradiente per creare strisce e trame.
<div class="stripes"></div>
Nozioni di base su radial-gradient()
Un gradiente radiale si propaga verso l'esterno da un punto centrale, creando una forma ellittica o circolare.
<div class="radial-demo"></div>
Forma e dimensioni del gradiente radiale
Controlli la forma del gradiente (circle o ellipse) e la parola chiave che ne determina l'estensione:
<div class="radial-circle"></div>
<div class="radial-ellipse"></div>
Posizione del gradiente radiale
Utilizzi at <position> dopo la forma e le dimensioni per spostare il centro del gradiente radiale.
<div class="radial-position"></div>
Gradiente conico
conic-gradient() distribuisce i colori attorno a un punto centrale, come in un grafico a torta. Richiede l'angolo iniziale from e una posizione at facoltativa.
<div class="conic-demo"></div>
Trasparenza del gradiente
Utilizzi transparent o rgba() nelle interruzioni del gradiente per sfumare gradualmente dal colore di sfondo dell'elemento o verso di esso.
<div class="fade-overlay"></div>
Verifica rapida
Quale funzione CSS genera un gradiente che si propaga verso l'esterno da un punto centrale?
Riepilogo
I gradienti lineari seguono una linea, quelli radiali si propagano verso l'esterno e quelli conici ruotano attorno a un punto. Utilizzi interruzioni nette per creare strisce. Tutte le funzioni per i gradienti sono valori di background-image e generano immagini senza file esterni.
Domande Frequenti
La lezione «Gradienti: lineari e radiali» è gratuita?
Sì — il testo completo di «Gradienti: lineari e radiali» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Gradienti: lineari e radiali»?
Create transizioni uniformi tra i colori con linear-gradient() e radial-gradient(). Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Gradienti: lineari e radiali»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Valori dei colori: nomi, hex, RGB, HSL
- Colore e immagine di sfondo
- Gradienti: lineari e radiali
- Opacità e trasparenza RGBA