Usare un gradiente di colore nel CSS

Un gradiente è una transizione continua e graduale che conduce da un colore di partenza a un colore di arrivo: in altri termini, è un colore che sfuma a poco a poco in un altro colore. Esempi di gradienti si possono trovare più o meno ovunque nella interfaccia grafica di computer e altri strumenti analoghi: la Apple li usa più o meno per qualsiasi bottone compaia sullo schermo di uno dei suoi prodotti, ma più in generale sembrano andare molto di moda tra i grafici di ogni genere.
Più o meno qualsiasi programma di grafica (Photoshop, GIMP, eccetera) include una funzione per produrre gradienti, specificando un colore di partenza e un colore di arrivo, ma i gradienti sono supportati anche dalle ultime specifiche del CSS e possono essere utilizzati per colorare più elementi in una pagina web: lo sfondo della pagina stessa, i pulsanti, eccetera. Per esempio, se vogliamo che un elemento abbia un gradiente come colore di sfondo, nel foglio di stile CSS gli assegneremo una proprietà di questo tipo: background: linear-gradient(rgb(229,76,16), rgb(173,54,8)); dove rgb(229,76,16) e rgb(173,54,8) sono il colore di partenza e il colore di arrivo della gradazione, espressi come “miscela” di rosso, verde e blu, i tre colori fondamentali. Leggendo questa regola nel foglio di stile, il nostro browser assegnerà all'elemento selezionato uno sfondo, in cui il primo colore indicato sfumerà gradualmente nel secondo. In teoria. In pratica, non è detto che ciò accada. Sebbene nelle specifiche del CSS siano presenti i gradienti e i valori da attribuire a un elemento, per ottenere un gradiente, non tutti i browser li supportano. Il che è normale nel caso dei browser più vecchi, prodotti prima che i gradienti fossero introdotti nel CSS (se vi aspettate di farli visualizzare a Internet Explorer 6, andrete incontro ad amare delusioni), ma anche nei browser più recenti non è sempre garantito il supporto dei gradienti; talvolta, inserire il valore linear-gradient non è sufficiente, ma bisogna aggiungere un prefisso, specifico per ogni famiglia di browser. In altri termini, ottenere su ogni browser la grafica che abbiamo progettato può essere un lavoro discretamente seccante, se ci sono di mezzo i gradienti, perché è possibile che si debba scrivere il triplo del codice normalmente necessario. Per questo e altri motivi, esistono strumenti di supporto, che aiutano nella generazione del codice necessario per un gradiente e si possono occupare al posto nostro (se così vogliamo) di renderlo compatibile con la maggior parte dei browser in circolazione. Ultimate CSS Gradient Generator è uno di questi strumenti, utilizzabile online sulla pagina del sito di Colorzilla e disponibile anche in due estensioni, per Firefox e Google Chrome. Come si può intuire dal nome assai umile e modesto, questo semplice programma si offre di generare per noi il codice da inserire nel foglio di stile CSS, per ottenere il tipo di gradiente da noi selezionato. Il suo funzionamento si può riassumere così: scegliamo il colore di partenza, il colore di arrivo e gli eventuali colori intermedi, poi indichiamo la direzione in cui dovrà avvenire la sfumatura (orizzontale o verticale) e il programma genererà il codice corrispondente. Una volta finito, basterà copiare il codice e incollarlo all'interno della regola CSS in cui dovrà essere utilizzato. Ma vediamo più in dettaglio. Questa è la pancia della pagina, dove troviamo i vari comandi a nostra disposizione: In alto a sinistra, sotto la etichetta Presets, ci è proposta una lista di modelli di gradienti, tra cui possiamo scegliere quello più simile al nostro progetto: sceglierne uno non è indispensabile, ma ci potrebbe far risparmiare tempo, se riusciamo a trovarne uno che corrisponda alle nostre idee (solo la struttura, non gli abbinamenti di colore: quelli li sceglieremo a parte). In alto a destra, sotto la etichetta Preview, vediamo un’anteprima del nostro gradiente, ma soprattutto abbiamo la possibilità di selezionare la direzione del gradiente (sfumatura in orizzontale, in verticale, in diagonale o dal centro verso l’esterno). Scegliere i colori è il passaggio fondamentale. È possibile che quelli proposti dai modelli del preset ci possano andare bene, ma molto più probabilmente vorremo utilizzare altri colori: li possiamo selezionare e impostare utilizzando tutti quegli altri comandi misteriosi che appaiono nella colonna di sinistra della pagina, cioè la barra colorata, Stops e Adjustments. Partiamo dalla barra colorata. La bara colorata ha due gruppi di puntatori, che possiamo far scorrere: un gruppo nella parte superiore e uno nella parte inferiore. Il gruppo nella parte superiore serve a  regolare il livello di opacità di un colore (quanto è o non è trasparente), mentre il gruppo nella parte inferiore serve a scegliere il colore. Per avere un gradiente, servono almeno due colori, uno di partenza e uno di arrivo: per decidere il colore di partenza, clicchiamo sulla freccetta in basso a sinistra nella barra: a questo punto, vedremo che nel riquadro Stops, subito sotto, alla voce Color è apparso un colore, ossia quello di base per il modello da noi scelto. Se lo vogliamo cambiare, clicchiamo su quel colore e scegliamone un altro dalla tavola che ci apparirà. Lo stesso procedimento lo ripeteremo poi anche per il secondo colore e per gli eventuali colori intermedi. Accanto a Color, sempre nel riquadro Stops, troviamo anche una voce Location, accompagnata da una percentuale: indica la posizione in cui si troverà quel colore, nel nostro gradiente. 1% è il colore di partenza, 100% è il colore di arrivo, percentuali intermedie indicano posizioni corrispondenti (un colore che ha 50% come Location, ad esempio, sarà raggiunto a metà della gradazione). Usando questo strumento, possiamo scegliere un colore di partenza, uno di arrivo e fino a due sfumature intermedie, se lo vogliamo. A ogni modo, possiamo anche limitarci a inizio e fine, senza tappe intermedie. Utilizzando le frecce sulla parte alta della barra, come ho detto, si determina il livello di opacità per un colore: ci serviranno se vogliamo un gradiente che guadagna o perde trasparenza nel corso del suo passaggio da un colore all'altro  in questo caso, dopo aver cliccato su una freccia, dovremo indicare il livello di opacità, in percentuale: 100% è un colore completamente opaco, 1% è un colore completamente trasparente. Nella colonna di destra della pagina, infine, troviamo il codice da copiare. A mano a mano che impostiamo il nostro gradiente, anche il codice cambierà corrispondentemente: una volta concluso, quando siamo soddisfatti del nostro lavoro, basterà copiare tutto quanto e incollarlo dentro a una regola del foglio di stile CSS, dove i gradiente dovrà essere applicato. Se vogliamo però che il nostro gradiente sia visibile anche su Internet Explorer 9, che per ragioni misteriose non supporta il normale gradiente in CSS, dovremo selezionare la opzione IE9 Support, che compare subito sotto il riquadro col codice: questa ci fornirà anche una porzione extra di HTML,ossia

<!--[if gte IE 9]>   <style type="text/css">     .gradient {        filter: none;     }   </style> <![endif]-->
Dobbiamo copiarla e incollarla nello <head> delle pagine in cui il gradiente dovrà essere utilizzato; più precisamente, incolliamola dopo il punto in cui abbiamo inserito il foglio di stile.