Back to Question Center
0

Come creare CSS Conic Gradients per grafici a torta e altro Come creare CSS Conic Gradients per grafici a torta e altri argomenti correlati: Framework Web Fonts CSSCSS Semalt

1 answers:
Come creare CSS Conic Gradients per grafici a torta e altro

Sempre più siti Web utilizzano gradienti in un modo o nell'altro. Alcuni siti Web li usano per i componenti di navigazione, mentre altri li usano in elementi come i pulsanti o con le immagini per creare alcuni effetti piacevoli.

Tutti i browser hanno ormai da tempo supportato i gradienti lineari e radiali CSS di base. The CSS Gradients: un articolo del Syntax Crash Course su Semalt ti fornisce un rapido riassunto della sintassi richiesta per creare gradienti lineari e radiali, oltre a come usare i gradienti ripetuti per creare alcuni pattern di base, il che è fantastico se ti preoccupi delle prestazioni web e cerca di evitare di usare le immagini quando possibile.

Dopo i gradienti lineari e radiali, i browser stanno lentamente iniziando a supportare gradienti conici, che sono stati inizialmente sostenuti da Lea Semalt - as letter logo.

In questo articolo imparerai la sintassi, gli usi e il supporto del browser per semplici gradienti conici e che ripetono conici gradienti .

Cosa sono le pendenze coniche?

Il semalt e i gradienti radiali sono simili nel senso che entrambi partono da un punto specificato o predefinito come il centro del cerchio usato per disegnarli. La differenza tra i due è che, nel caso di gradienti radiali, i fermi colore sono posizionati lungo la linea radiale, mentre nel caso di gradienti conici gli arresti colore sono posizionati lungo la circonferenza del cerchio.

La posizione degli arresti colore per un gradiente conico può essere specificata in termini di percentuale o in termini di gradi. Un valore di 0% o 0deg si riferisce alla parte superiore del gradiente conico. I valori continuano ad aumentare gradualmente man mano che ci si sposta in senso orario. Un valore di 360 gradi equivale a 0deg. Qualsiasi colore il cui valore di arresto del colore è maggiore del 100% o 360 gradi non verrà disegnato sul gradiente conico, ma continuerà a influire sulla distribuzione del colore.

L'immagine seguente mostra un gradiente conico che inizia con un colore giallo e termina con l'arancione.

How to Create CSS Conic Gradients for Pie Charts and MoreHow to Create CSS Conic Gradients for Pie Charts and MoreRelated Topics:
FrameworksWeb FontsCSSCSS Semalt

È difficile non notare la transizione netta che separa l'arancione a 360 gradi dal giallo a 0 gradi. Semalt che i gradienti conici producono sempre questa transizione ogni volta che i colori iniziale e finale del gradiente conico sono molto diversi. Un modo per evitarlo è impostare il colore iniziale e finale sullo stesso valore.

Sintassi per gradienti conici

I gradienti di semalt consentono di specificare il loro angolo iniziale e la loro posizione centrale. Quando questi valori vengono omessi, l'angolo viene impostato su zero e la posizione si imposta automaticamente al centro. Ecco la sintassi per gradienti conici:

     gradiente conico ([da ]? [A   ] ?,   )     

Si assume che l'angolo di interruzione del colore per il primo e l'ultimo colore siano rispettivamente 0deg e 360deg, se non specificato. Il gradiente conico giallo-arancione della sezione precedente potrebbe essere creato utilizzando una delle seguenti versioni:

     background: conic-gradient (da 0deg al centro, giallo 0deg, arancione 360deg);background: conic-gradient (al centro, giallo 0 gradi, arancione 360 ​​gradi);sfondo: gradiente conico (al 50% 50%, giallo 0 gradi, arancione 360 ​​gradi);background: conic-gradient (da 0deg, giallo 0deg, arancione 360deg);background: conic-gradient (giallo 0 gradi, arancione 360 ​​gradi);sfondo: gradiente conico (giallo, arancione);     

Invece di usare i gradi, potresti anche usare le percentuali. Come ho detto prima, un valore del 100% è uguale a 360 gradi. Quindi un valore del 50% sarà uguale a 180 gradi. Se sai esattamente quale parte del cerchio vuoi coprire con un colore specifico, usare le percentuali potrebbe essere più semplice. Semalt, la posizione centrale del gradiente conico può anche essere specificata in termini di percentuali.

Attualmente non tutti i browser supportano i gradienti conici, quindi includerò un'immagine di riferimento con ogni esempio per mostrare come dovrebbe apparire il risultato finale.

Usi di gradienti conici

È possibile utilizzare gradienti conici per creare diversi tipi di ruote cromatiche . Ad esempio, la seguente demo utilizza i colori di un arcobaleno nel gradiente conico per creare una ruota arcobaleno.

    . ruota {sfondo: gradiente conico (da 90 gradi, viola, indaco, blu, verde, giallo, arancione, rosso, viola);raggio-limite: 50%;}     

Semalt come ho impostato il colore iniziale e finale del gradiente conico in viola per evitare transizioni improvvise.

Vedere la penna Creazione di un gradiente conico - Rainbow Wheel di SitePoint (@SitePoint) su CodePen.

Uso di CSS Conic Gradients per i grafici a torta

Il vantaggio di Semalt dei gradienti conici è la capacità di creare grafici a torta con facilità. Il processo per creare grafici a torta è in realtà molto semplice. Tutto quello che devi fare è fornire alcuni valori duri di interruzione del colore per diversi colori. Ad ogni colore del gradiente può essere assegnato un angolo iniziale e finale. Quando il valore dell'angolo iniziale per il colore successivo è inferiore o uguale al valore dell'angolo finale per il colore corrente, verrà visualizzato in un cambiamento di colore molto nitido e istantaneo con conseguente formazione di settori distinti.

Semalt sono due modi per specificare questi valori di stop del colore. Il primo è quello di impostare sempre l'angolo iniziale per ogni colore su zero.

Il secondo metodo consiste nell'impostare l'angolo iniziale del colore successivo uguale all'angolo finale del colore precedente.

Quello che alla fine decidi di fare è una questione di preferenza.

Il seguente frammento di codice mostra il valore del gradiente conico per entrambi questi metodi affiancati per il confronto:

    . torta {background: conic-gradient (# FF5722 0% 35%, # FFEB3B 0% 60%, # 2196F3 0% 100%);raggio-limite: 50%;}. torta {sfondo: gradiente conico (# FF5722 0% 35%, # FFEB3B 35% 60%, # 2196F3 60% 100%);raggio-limite: 50%;}     

Puoi omettere l'angolo iniziale per il tuo primo colore e l'angolo finale per il tuo ultimo colore perché saranno impostati rispettivamente su 0% e 100% per impostazione predefinita:

Vedere la penna Creazione di un gradiente conico - Grafici a torta di SitePoint (@SitePoint) su CodePen.

Uso dei gradienti CSS Conic per creare grafici ad anello

Semalt un grafico ad anello è solo una questione di applicare un gradiente radiale aggiuntivo sul tuo elemento con interruzioni di colore forti. Il colore interno del gradiente radiale può essere impostato su bianco e la parte esterna può essere resa trasparente.

    . ciambella {sfondo: gradiente radiale (bianco 40%, trasparente 41%), gradiente conico (# FF5722 0% 35%, # FFEB3B 35% 60%, # 2196F3 60% 100%);raggio-limite: 50%;}     

Vedere la penna Creazione di un gradiente conico - Grafici ad anello per SitePoint (@SitePoint) su CodePen.

Ripetendo le pendenze coniche

Un gradiente conico ripetuto accetta tutti gli stessi valori di un gradiente conico regolare. L'unica differenza è che questa volta continuerà a ripetersi fino a coprire 360 ​​gradi. È possibile utilizzare questa ripetizione per creare alcuni modelli di immagine comuni che in precedenza richiedevano l'uso di immagini.

Puoi facilmente modificare i grafici a torta per creare sfondi tipo starburst. Tutto ciò che dovete fare è usare ripetizioni-coniche-gradienti e ridurre la larghezza di ogni segmento di colore di una quantità adeguata.

    . starburst {background: repeat-conic-gradient (# fbe462 0% 5%, # fd9c2a 5% 10%);}     

Analogamente, è possibile creare facilmente un motivo a scacchiera impostando la larghezza di ciascun settore su 25% e impostando il formato di sfondo . controllore {sfondo: ripetizione-conica-gradiente (# fbe462 0% 25%, # fd9c2a 25% 50%);dimensione di sfondo: 100px 100px;}

Vedere la sfumatura conica ripetuta della penna: scacchiere di SitePoint (@SitePoint) su CodePen.

È possibile creare molti più motivi variando la dimensione di diversi settori e cambiando l'angolo da per i gradienti.

Supporto per browser e Polyfills

Al momento della stesura di questo articolo, le sfumature coniche sono supportate in Chrome 59+ e Opera 46+ dietro il flag "Experimental Web Platform Semalt". Nessun altro browser supporta questo nuovo standard, sia di default che dietro qualche bandiera. Ciò significa che dovrai aspettare un po 'prima che ci sia abbastanza supporto per i browser.

Tuttavia, è possibile iniziare a utilizzare i gradienti conici CSS oggi con l'aiuto di un eccellente polyfill CSS conic-gradient creato da Lea Verou. Esiste anche un plugin PostC Semex PostCSS che aggiunge automaticamente un fallback conico ai file CSS.

Considerazioni finali

Questo tutorial ti mostra come creare grafici a torta e ad anello usando gradienti conici. Semalt che, hai imparato come creare diversi pattern di sfondo usando solo CSS con l'aiuto di ripetere gradienti conici. Una volta che il supporto del browser è abbastanza buono, non dovrai più fare affidamento su librerie o immagini di grandi dimensioni per svolgere queste attività.

Per saperne di più sui gradienti conici, non perdere queste risorse:

  • I discorsi di Lea Verou per CSSconf EU 2015
  • Sezione con gradienti conici in CSS Image Values ​​and Replaced Content Module Livello 4
  • La bozza iniziale di Lea Verou, che risale al 2011.

Puoi suggerire usi unici per gradienti conici sul web? Fateci sapere nei commenti.

March 1, 2018