I css sono ormai diventati un linguaggio fondamentale e frequente quanto l’HTML, e proprio grazie alla loro popolarità si sono evoluti molto, con la versione CSS3 sono state introdotte nuove proprietà che ci permettono di aggiungere angoli arrotondati, di creare forme tridimensionali, di aggiungere delle ombre e anche di creare sfondi più complessi con i gradienti (cioè uno sfondo a due o più colori che si sfumano tra di loro). Il grande vantaggio nel creare sfondi con i CSS3 è che sono estremamenti più leggeri in quanto il browser non dovrà caricare nessuna immagine. Per farli però la sintassi è molto complicata, per questo abbiamo trovato il miglior (tra i tanti) generatore di gradienti CSS3 per tutti i browser: Ultimate CSS Gradient Generator…

Come funziona

Il funzionamento di Ultimate Gradient Generator è semplicissimo ed è lo stesso che c’è su Photoshop per la sovrapposizione sfumature nelle opzioni di fusione di un livello. Nella barra dei colori notate gli indicatori che potete spostare liberamente a destra e sinistra. Per aggiungere un indicatore occorre cliccare sotto la barra e sarà aggiunto nel punto in cui hai cliccato. Nella sezione Presets sono disponibili tantissimi gradienti già pronti per vedere un po’ come son stati fatti e “imparare da loro”. Intanto che farai tutte le modifiche, noterai che a destra verrà aggiornato in tempo reale il codice CSS definitivo e un’anteprima del gradiente. Nell’anteprima potete anche scegliere l’orientamento di esso (orizzontale o verticale).

Una volta che hai finito di creare il gradiente, basterà copiare tutto il codice e inserirlo dentro il tag/id/classe nel codice CSS. Ad esempio:

body {

/*Inserisci qui il codice CSS generato dal generatore (scusa per la ripetizione!!)*/

}

Ricordo che questo generatore è compatibile con Firefox, Safari, Chrome e Internet Explorer.