Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Gradienti CSS


Sfondi sfumati

I gradienti CSS ti consentono di visualizzare transizioni fluide tra due o più colori specificati.

CSS definisce tre tipi di gradienti:

  • Gradienti lineari (va giù/su/sinistra/destra/diagonalmente)
  • Gradienti radiali (definiti dal loro centro)
  • Gradienti conici (ruotati attorno a un punto centrale)

Gradienti lineari CSS

Per creare un gradiente lineare è necessario definire almeno due interruzioni di colore. Le interruzioni di colore sono i colori tra i quali si desidera rendere uniformi le transizioni. Puoi anche impostare un punto iniziale e una direzione (o un angolo) insieme all'effetto sfumatura.

Sintassi

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

Direzione - Dall'alto verso il basso (questo è l'impostazione predefinita)

L'esempio seguente mostra un gradiente lineare che inizia in alto. Inizia in rosso, passando al giallo:

dall'alto in basso (impostazione predefinita)

Esempio

#grad {
  background-image: linear-gradient(red, yellow);
}

Direzione: da sinistra a destra

L'esempio seguente mostra un gradiente lineare che inizia da sinistra. Inizia in rosso, passando al giallo:

da sinistra a destra

Esempio

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Direzione - Diagonale

È possibile creare una sfumatura in diagonale specificando sia la posizione iniziale orizzontale che quella verticale.

L'esempio seguente mostra un gradiente lineare che inizia in alto a sinistra (e va in basso a destra). Inizia in rosso, passando al giallo:

in alto a sinistra in basso a destra

Esempio

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}


Usando gli angoli

Se si desidera un maggiore controllo sulla direzione del gradiente, è possibile definire un angolo, invece delle direzioni predefinite (verso il basso, verso l'alto, verso destra, verso sinistra, verso il basso a destra, ecc.). Un valore di 0deg equivale a "to top". Un valore di 90 gradi equivale a "a destra". Un valore di 180 gradi equivale a "fino in fondo".

Sintassi

background-image: linear-gradient(angle, color-stop1, color-stop2);

L'esempio seguente mostra come utilizzare gli angoli su gradienti lineari:

180 gradi

Esempio

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Utilizzo di più interruzioni di colore

L'esempio seguente mostra una sfumatura lineare (dall'alto verso il basso) con più interruzioni di colore:

Esempio

#grad {
  background-image: linear-gradient(red, yellow, green);
}

L'esempio seguente mostra come creare un gradiente lineare (da sinistra a destra) con il colore dell'arcobaleno e del testo:

Sfondo arcobaleno

Esempio

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Usando la trasparenza

I gradienti CSS supportano anche la trasparenza, che può essere utilizzata per creare effetti di dissolvenza.

Per aggiungere trasparenza, utilizziamo la funzione rgba() per definire le interruzioni di colore. L'ultimo parametro nella funzione rgba() può essere un valore compreso tra 0 e 1 e definisce la trasparenza del colore: 0 indica la piena trasparenza, 1 indica il colore pieno (nessuna trasparenza).

L'esempio seguente mostra un gradiente lineare che inizia da sinistra. Inizia completamente trasparente, passando al rosso a tutto colore:

Esempio

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Ripetizione di un gradiente lineare

La funzione repeating-linear-gradient() viene utilizzata per ripetere i gradienti lineari:

Esempio

Un gradiente lineare ripetuto:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}