CSS – Abbelliamo – Parte II – I Gradienti
Eccoci al secondo appuntamento, se ve lo siete persi, ecco il primo articolo, con “abbelliamo le nostre pagine con i CSS”, suona un po’ come “divertiamoci con le bandiere” di Big Bang Theory.
Parliamo di Gradienti.
È una delle tendenze di questo 2020 insieme alla tipografia, che da qualche anno è veramente in crescita e quest’anno più che mai con i Variable Fonts, alle immagini vettoriali, le animazioni e le ombre.
Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
Vediamo di cosa si tratta, anche se risulta chiaro e di come li possiamo usare. Possiamo utilizzare diverse tipologie di gradienti e, grazie alle caratteristiche che possiamo impostare, usanti in modi veramente divertenti creando effetti molto interessanti.
Prima di iniziare, specifichiamo due cose:
- I gradienti sono applicabili allo sfondo di un oggetto ma non sono un colore, è un’elaborazione che dal browser è vista come uno speciale tipo di un’immagine, per questo motivo la dobbiamo utilizzare in modo corretto con la proprietà
backgroundobackground-image. Non è valido comebackground-color. - Essendo gestiti come immagini, possiamo applicare più di un gradiente o utilizzare anche immagini, allo stesso oggetto con effetti di sovrapposizione molto efficaci.
Iniziamo.
Gradienti lineari
<!-- Html -->
<div class="content">
</div>
/* stile */
.content {
background: linear-gradient(white, black);
}Esempio semplice, un gradiente lineare dall’alto al basso che parte dal bianco e arriva al nero.
La funzione linear-gradient prende in ingresso un minimo di due valori, quello di partenza e quello di arrivo e calcola in automatico tutti i passaggi di colore. Certo, prende in ingresso MINIMO due valore, ma possiamo specificarne più di due. Ecco il risultato se tra il bianco e il nero mettiamo il rosa.
Fino a qui è facile, ma ci sono moltissime altre varianti che possiamo applicare.
La funzione linear-gradient, come detto, prende in ingresso diversi parametri, il primo, se diverso da un colore, rappresenta la direzione verso la quale si deve applicare il gradiente oppure il suo angolo. Se non viene specificato, come nei due esempi precedenti, è equivalente a dall’alto al basso TO BOTTOM.
Anche per l’elenco dei colori abbiamo diverse possibilità per singolo parametro, possiamo infatti specificare il colore, da quando questo deve applicarsi fino a quando deve finire, questo per permettere il massimo livello di personalizzazione del gradiente.
Ecco la Sintassi formale.
linear-gradient( [ <angolo> | to <lato-di-destinazione>,]? <lista-colori> )
Vediamo alcuni esempi di come dichiarare il gradiente lineare.
/* dall'alto in basso, dal bianco al nero */
.content {
background: linear-gradient(white, black);
}
/* dal rosso al blu con un angolo di 45 gradi */
.content {
background: linear-gradient(45deg, red, blue);
}
/* dall'arancio, che parte dal 60% al ciano con un angolo di 135 gradi */
.content {
background: linear-gradient(135deg, orange, orange 60%, cyan);
}
/* verso destra con rosso, arancio, giallo, verde e blue, in questo esempio i colori vengono definiti senza sfumatura in quanto viene specificato l'intervallo di interruzione per ogni colore senza spazio di incrocio tra colori */
.content {
background: linear-gradient(to right,
red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}
/* Questo lo lascio provare a voi ;) */
.content {
background:
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}Gradienti radiali
<!-- Html -->
<div class="content">
</div>
/* stile */
.content {
background: radial-gradient(white, black);
}Nulla di più semplice, cambi la funzione e il gradiente è circolare partendo dal centro e andando verso l’esterno.
Il principio della funzione radial-gradient è il medesimo di linear-gradient, la differenza principale sta nel primo parametro nel qualche possiamo specificare le caratteristiche del modello circolare da applicare.
Ecco la Sintassi formale.
radiale gradiente (
[[cerchia || <lunghezza> ] [at <posizione> ]? , |
[ellisse || [ <lunghezza> | <percentuale> ] {2}] [at <posizione> ]? , |
[[cerchia | ellisse] || <extent-keyword>] [at <posizione> ]? , |
a <posizione> ,
]?
<color-stop-list> [, <color-stop-list>] +
)
Come vedete, le combinazioni date dai parametri sono molo flessibili, con qualche esempio vi sarà tutto più chiaro.
/* Gradiente semplice, inizio centrale, allo 0% ciano, trasparente dal 20% e salmone dal 40% fino al riempimento */
.radial-gradient {
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
/* Gradiente non centrato, inizio dall'angolo alto-sinistra con un scostamento di 40px per lato e procedo con i colori #f35 fino a #43e */
.radial-gradient {
background-image: radial-gradient(farthest-corner at 40px 40px,
#f35 0%, #43e 100%);
}Come nel caso del gradiente lineare, possiamo specificare intervalli più aperti o più chiusi per determinare la gradazione e l’effetto si incrocio tra i vari colori.
Per un maggiore dettaglio, vi rimando al link della documentazione ufficiale Mozilla dal qualche ho preso questi esempi e che estende le informazioni relative ai parametri.
Gradiente conico
Lo inserisco perché lo considero molto interessante da diversi punti di vista ma questa funzione non è ancora supportata dal tutti i browser, inoltre, dal punto di vista esclusivamente stilistico non è pratico e poco adattabile a creare layout di impatto.
Qui trovate la lista dei browser compatibili che supportano questa funzione.
La sua presenza, dove supportata è però molto utile, se proviamo ad applicare qualche proprietà aggiuntiva, come ad esempio un border-radius, lasciamo un intervallo di un grado tra gli angoli di interpolazione, ecco il risultato.
/* ecco lo stile per creare il nostro grafico */
background: conic-gradient(
red 6deg,
orange 7deg 68deg,
yellow 69deg 120deg,
green 121deg 280deg,
blue 281deg
);Un perfetto grafico a torta, in puro CSS, senza l’utilizzo di complicate librerie grafiche in JavaScript o altri linguaggi.
Anche in questo caso, vi rimando al link della documentazione ufficiale Mozilla, cambia il primo parametro e le impostazioni dei parametri colori per determinare l’intervallo di angolazione.
Altre funzioni
Esistono altre funzioni di supporto alla creazione di gradienti, con supporto alle ripetizioni e altre funzionalità interessanti, ma anche queste in parte non sono ancora supportate da tutti i browser quindi aspettiamo che il tutto prenda una forma ufficiale.
CSS sta evolvendo tantissimo, ogni sula parte ha intrapreso diverse strade e si cercando di non disperdere il tutto in ulteriori sotto-rami che possano a loro volta diventare altro.
Si sta cercando di tenere tutto assieme per proporre un CSS4, che forse non vedremo mai nel suo insieme.
Sarà un ulteriore argomento di discussione.
Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
Risorse utili
Documentazione
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
- https://www.w3schools.com/css/css3_gradients.asp
Strumenti
Utili per creare i gradienti in modo visivo e veloce.
- https://cssgradient.io/
- https://webgradients.com/
- https://www.colorzilla.com/gradient-editor/
- https://uigradients.com/
Se vuoi conoscermi e scambiare idee, la mia mappa è sempre pronta per essere estesa anche alle idee degli altri.
- La lampada magica di OpenAI - Gennaio 19, 2023
- BOB, il primo programmatore - Gennaio 17, 2023
- Software e Accessibilità - Febbraio 18, 2022
