Ci sono tre tipi di funzioni CSS gradient: linear-gradient(), radial-gradient() e, appunto conic-gradient() che vogliamo esaminare oggi per un suo particolare tipo di utilizzo, quello di poter costruire un semplice, quanto immediato grafico a torta.

Queste funzioni restituiscono un oggetto di tipo <gradient>, uno dei tipi in cui può essere rappresentato il data type <image>.

La funzione CSS conic-gradient() crea un'immagine costituita da un gradiente con transizioni di colore ruotate attorno a un punto centrale. Un gradiente conico viene specificato indicando l'angolo di rotazione, il centro del gradiente e quindi specificando l'ampiezza dell'angolo o dell'arco. Le unità di misura con cui si può esprimere l'ampiezza dell'angolo di un singolo colore includono 'deg' per gradi, 'grad' per gradienti, 'rad' per radianti e 'turn' per giri. In un cerchio ci sono 360 gradi, 400 gradienti, 2π radianti e 1 giro.


Questa volta mostriamo uno script che consente di mostrare o nascondere alternativamente un blocco dove potete mettere ovviamente quello che vi pare. Noi faremo un esempio inserendo un campo di input da far apparire e scomparire cliccando su un bottone. Come sempre il codice completo (si tratta di un unico file html) lo troverete alla fine dell'articolo.