Suggerimento rapido informazioni sui gradienti CSS3

Creare un'immagine solo allo scopo di visualizzare un gradiente è inflessibile e sta rapidamente diventando una cattiva pratica. Sfortunatamente, al momento della stesura di questo articolo, potrebbero essere ancora richiesti, ma si spera non ancora per molto. Grazie a Firefox e Safari / Chrome, ora possiamo creare gradienti potenti con il minimo sforzo. In questo suggerimento rapido del video, esamineremo alcune delle differenze nella sintassi quando si lavora con i prefissi dei fornitori -moz e -webkit.

Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!

Webkit

Mentre Mozilla e Webkit generalmente adottano la stessa sintassi per le proprietà CSS3, sfortunatamente non sono del tutto d'accordo quando si tratta di gradienti. Webkit è stato il primo ad abbracciare i gradienti e utilizza la seguente struttura:

 / * Sintassi, tratta da: http://webkit.org/blog/175/introducing-css-gradients/ * / -webkit-gradient (,  [, ]?,  [, ]? [, ] *) / * In pratica ... * / background: -webkit-gradient (lineare, 0 0, 0 100%, da (rosso) a (blu));

Non preoccuparti se i tuoi occhi brillano su quella sintassi; anche il mio! Tieni presente che è necessario un elenco di parametri separati da virgole.

Che tipo di gradiente? (lineare)
Coordinate dell'asse X e Y di dove iniziare. (0 0 - o angolo in alto a sinistra)
Coordinate dell'asse X e Y di dove concludere (0 100% - o angolo in basso a sinistra)
Di che colore per cominciare? (Da (rosso))
Di che colore concludere? (A (blu))

Mozilla

Firefox, che ha implementato il supporto del gradiente con la versione 3.6, preferisce una sintassi leggermente diversa.

 / * Sintassi, tratta da: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-linear-gradient ([ || ,]? ,  [, ] *) / * In Practice * / background: -moz-linear-gradient (superiore, rosso, blu);

Nota come abbiamo inserito il tipo di gradiente, lineare, all'interno dell'estensione del venditore.
Dove dovrebbe iniziare il gradiente? (in alto - potremmo anche passare in gradi, come in -45 gradi)
Di che colore iniziare? (rosso)
Di che colore concludere? (blu)

Colore-Stops

Cosa succede se non hai bisogno di un gradiente del 100% da un colore all'altro? È qui che entrano in gioco le fermate di colore. Una tecnica di progettazione comune consiste nell'applicare un gradiente corto e sottile, come questo:

Notare la leggera sfumatura dal bianco sporco al bianco in alto.

In passato, l'implementazione standard consisteva nel creare un'immagine, impostarla come sfondo di un elemento e impostarla per la ripetizione orizzontale. Tuttavia, con CSS3, questo è un gioco da ragazzi.

 sfondo: bianco; / * fallback per i browser precedenti / non supportati * / background: -moz-linear-gradient (top, #dedede, white 8%); background: -webkit-gradient (lineare, 0 0, 0 8%, da (#dedede), a (bianco)); border-top: 1px bianco solido;

Questa volta, impostiamo il gradiente a concludere all'8%, anziché al 100%, che è l'impostazione predefinita. Si noti che applichiamo anche un bordo superiore per aggiungere contrasto; questo è molto comune.

Se desideriamo aggiungere un terzo (o nono) colore, possiamo fare:

 sfondo: bianco; / * fallback per browser precedenti / non supportati * / background: -moz-linear-gradient (in alto, #dedede, bianco 8%, rosso 20%); background: -webkit-gradient (lineare, 0 0, 0 100%, from (#dedede), color-stop (8%, bianco), color-stop (20%, rosso);

Con la versione -moz, designiamo che, al 20% dell'altezza dell'elemento, dovremmo essere ora al colore rosso.
Per -webkit, utilizziamo color-stop e passiamo in due parametri: dove dovrebbe verificarsi l'arresto e quale dovrebbe essere il colore.

Note importanti sui gradienti CSS

Usali il più possibile. Se va bene lasciare che gli utenti di IE vedano un colore solido, ti incoraggio a utilizzare questo metodo.
IE6 / 7/8, Opera, Safari 3 e Firefox 3 non possono eseguire il rendering di gradienti CSS3. Gli utenti di Firefox e Safari generalmente aggiornano spesso, quindi non è un grosso problema.
Applica sempre un colore solido predefinito, sfondo per i browser che non comprendono i prefissi dei fornitori.
Non usare mai un gradiente da rosso a blu, come ho fatto per gli esempi.
Le pagine Web non hanno bisogno di apparire uguali in tutti i browser! :)

Grazie per aver letto / guardato!

Codice