Home-theater-designers
Se sei stato su Internet per più di qualche minuto, è probabile che ti sia imbattuto in un gradiente CSS. La proprietà CSS background può essere utilizzata per creare una gamma di stili diversi e uno dei tipi più intriganti è ciò che può fare con il valore del gradiente.
Sapere come progettare e creare diversi gradienti CSS è una risorsa per qualsiasi progettista o sviluppatore di software. Da questo articolo imparerai tutto ciò che devi sapere per iniziare a incorporare i gradienti CSS nei tuoi progetti.
Che cos'è un gradiente CSS?
Un gradiente CSS è essenzialmente la combinazione di due o più colori che passano dolcemente da uno all'altro. Lo stato di transizione di un gradiente CSS dipende dal tipo di gradiente utilizzato. Esistono due tipi principali di gradienti comunemente usati nella progettazione del software: lineare e radiale.
Tuttavia, esiste un terzo tipo di gradiente meno popolare e noto come gradiente conico.
Sintassi dei gradienti CSS
Background-image: gradient-type (direction, color1, color2);
Il gradiente CSS dovrebbe essere assegnato alla proprietà CSS dell'immagine di sfondo. Il tipo di gradiente può essere uno dei tanti; gradiente lineare, gradiente radiale o gradiente conico. Il tipo di sfumatura è seguito da parentesi aperte e chiuse che contengono la direzione di transizione della sfumatura, nonché i colori da includere nella sfumatura.
Imparentato: Come impostare un'immagine di sfondo nei CSS
L'esempio sopra mostra due colori, ma un gradiente può contenere diversi colori. L'unico requisito è che ogni colore nell'elenco sia separato da una virgola.
Che cos'è un gradiente lineare?
Il gradiente lineare è il gradiente CSS più popolare. Crea un gradiente di transizione orizzontale, verticale o diagonale utilizzando due o più colori.
Esempio di gradiente lineare CSS
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Il codice sopra produrrà il seguente gradiente CSS:
C'è un componente principale della sintassi del gradiente omesso dall'esempio sopra. Questo componente è la direzione di transizione del gradiente ed è stato omesso perché l'allineamento predefinito del gradiente lineare è verticale (dall'alto verso il basso); questo è l'output desiderato in questo esempio.
Il codice sopra produce lo stesso risultato della seguente riga di codice. L'unica differenza tra i due è la sezione di direzione del codice.
Utilizzo dell'esempio del gradiente lineare inferiore
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Come puoi vedere dall'output, il codice sopra crea un gradiente che inizia con il blu in alto, quindi passa lentamente all'arancione in basso. Se volessi invertire l'ordine dei colori potresti semplicemente sostituire il in fondo insieme a all'inizio e questo invertirà la direzione del gradiente, producendo il seguente output:
Simile all'allineamento verticale, l'allineamento orizzontale di un gradiente può essere ottenuto con l'uso di due serie di parole chiave di direzione: a sinistra e a destra , che produrranno rispettivamente i seguenti output.
ne vale la pena pokemon sole e luna?
Gradiente lineare diagonale
È possibile ottenere una transizione del gradiente lineare diagonale in qualsiasi direzione di un gradiente lineare. Ci sono solo quattro elenchi specifici di parole chiave che devi conoscere per renderlo possibile.
- In basso a destra
- In basso a sinistra
- In alto a destra
- In alto a sinistra
Utilizzo dell'esempio di gradiente lineare diagonale
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
L'esempio sopra produce il seguente output:
Come puoi vedere dall'output sopra, il gradiente lineare fa la sua transizione in una direzione diagonale spostandosi dalla sezione in alto a sinistra a quella in basso a destra del gradiente.
Sfumatura lineare multicolore
Un gradiente lineare può avere due o più colori, ma che aspetto hanno più colori in un gradiente? Una disposizione dei colori a gradiente lineare multicolore dipende dalla sua direzione. Quelli che passano in una direzione orizzontale avranno ogni nuovo colore che appare a sinistra oa destra del gradiente lineare, a seconda della direzione esatta del gradiente lineare.
Esempio di gradiente lineare multicolore
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
La riga di codice sopra produrrà il seguente output:
Come puoi vedere, ogni nuovo colore viene aggiunto a destra del gradiente, creando ciò che alla fine si trasforma in un arcobaleno. La stessa resa può essere ottenuta in direzione verticale; tuttavia, la disposizione dei colori specifica sul gradiente lineare dipenderà dalla parola chiave della direzione verticale (verso l'alto o verso il basso).
Che cos'è un gradiente radiale?
Il gradiente radiale crea un gradiente a spirale di due sono più colori che iniziano dal centro per impostazione predefinita. Laddove il gradiente lineare produce un gradiente rettilineo che scorre verticalmente o orizzontalmente, il gradiente radiale produce un gradiente circolare che scorre dal centro ai bordi esterni.
Utilizzo dell'esempio del gradiente radiale
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
La riga di codice sopra produrrà il seguente output:
Modifica del centro del gradiente radiale
Per impostazione predefinita, un gradiente radiale inizia al centro del gradiente; è comunque possibile modificare il punto di origine con l'introduzione di alcune parole chiave.
motori di ricerca che non filtrano i risultati
Esempio di modifica della posizione iniziale del gradiente radiale
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
La riga di codice sopra produrrà il seguente output:
Come puoi vedere dall'output sopra, il gradiente ora inizia dall'angolo in alto a destra anziché dal centro. Questa modifica è possibile grazie all'inclusione della parola chiave in alto a destra nel codice sopra. Il seguente elenco di parole chiave può essere utilizzato anche per modificare il punto di origine del gradiente radiale:
- In alto a sinistra
- In basso a destra
- In basso a sinistra
Sfumature radiali multicolori
Come il gradiente lineare, anche il gradiente radiale può usare due sono più colori, la differenza principale è che dove il gradiente lineare si aggiunge al gradiente in linea retta, il gradiente radiale aggiunge nuovi colori sul bordo esterno.
Esempio di gradiente radiale multicolore
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
La riga di codice sopra produrrà il seguente output:
Personalizzazione dei gradienti
Finora hai visto come cambiare la direzione e il punto centrale di una sfumatura, ma non hai visto come personalizzare una sfumatura. La personalizzazione di un gradiente potrebbe sembrare un sacco di lavoro, ma una volta comprese le basi della creazione di un gradiente di sfondo CSS, il prossimo passo ovvio è imparare a rendere i gradienti CSS più unici.
ho bisogno di un modem e un router?
Per impostazione predefinita, i colori in una sfumatura occupano una quantità di spazio distribuita uniformemente con ogni colore che passa gradualmente a quello successivo. Quindi, se due colori vengono combinati per formare un gradiente, ogni colore occuperà metà dello spazio disponibile durante la transizione dall'uno all'altro. Se si combinano tre colori, ogni colore occuperà un terzo dello spazio disponibile.
Con un gradiente personalizzato, puoi definire la quantità di spazio che un colore occuperà in un gradiente assegnando esplicitamente il posizione di arresto del colore .
Personalizzazione di un gradiente lineare Esempio 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
La riga di codice sopra produrrà il seguente output:
L'output sopra mostra il secondo colore nel gradiente lineare fermandosi al punto del 30% del primo colore nel gradiente, invece della sua posizione consueta, e poiché il secondo colore è anche il colore finale nel gradiente si estende naturalmente fino alla fine .
Se dovessi inserire il 30% nel codice sopra alla fine del primo colore le cose dovrebbero diventare più chiare.
Personalizzazione di un gradiente lineare Esempio 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Il codice sopra produrrà il seguente output.
L'output sopra mostra chiaramente il primo colore nel gradiente fermandosi al punto 30% del secondo colore nel gradiente. Questo esempio, insieme a quello sopra, dovrebbe aiutare a rendere più facile la comprensione della personalizzazione del color-stop.
La personalizzazione di un gradiente radiale viene eseguita allo stesso modo di un gradiente lineare. L'unica cosa che devi fare per ottenere gli stessi risultati sopra in un gradiente radiale è cambiare il tipo e la direzione del gradiente.
Creare gradienti CSS non è mai stato così facile
Questo articolo tutorial fornisce gli strumenti per identificare e creare gradienti lineari e radiali. Se sei arrivato fino a questo punto, hai imparato come cambiare la direzione e il centro di un gradiente. Inoltre, ora hai le competenze per personalizzare i gradienti CSS e creare gradienti di sfondo unici.
Tuttavia, se non vuoi passare direttamente alla creazione di sfumature nuove e uniche, puoi iniziare creandone di belle preesistenti.
Condividere Condividere Tweet E-mail 27 eleganti esempi di gradiente di sfondo CSSI colori solidi sono così l'anno scorso. I gradienti sono in! Ma come si creano in CSS?
Leggi Avanti Argomenti correlati- Programmazione
- Sviluppo web
- Web design
- CSS
Kadeisha Kean è uno sviluppatore software full-stack e scrittore tecnico/tecnologico. Ha la spiccata capacità di semplificare alcuni dei concetti tecnologici più complessi; producendo materiale che può essere facilmente compreso da qualsiasi principiante della tecnologia. È appassionata di scrivere, sviluppare software interessanti e viaggiare per il mondo (attraverso documentari).
Altro da Kadeisha KeanIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti