Una delle novità più interessanti dei css3 è sicuramente l’utilizzo dei gradient, un ottimo (e veloce) modo per rendere il vostro layout più raffinato. Vediamo l’utilizzo principale di questa nuova tecnica, che tra l’altro risulta essere compatibile anche con vecchi browser (tramite alcuni accorgimenti).
01. Sintassi e usi principali
Il gradiente css3 si basa su una sintassi gerarchica e sull’utilizzo di prefissi particolari (che servono per browser poco aggiornati). Per prima cosa va predisposto un background color di fallback nel caso il browser non supporti questa procedura. Subito dopo possiamo impostare un’immagine realizzata ad hoc con PS (come siamo abituati fino ad oggi).
Solo in seguito impostiamo le regole css3 per i browser next gen. Perchè tutto ciò? La risposta è semplice: grazie a questa struttura possiamo rendere il gradient compatibile pressochè con tutti i browser in circolazione. Su ie8 ad esempio le regole css3 vengono ignorate (perchè non supportate), pertanto viene usata l’immagine impostata subito sopra. Se anche l’immagine non fosse impostata, o non sia presente, viene usato il background.color specificato nel css.
Tutto questo senza l’utilizzo di “emulatori” come css PIE, che risulta molto pensate in termini di risorse di rendering. Passiamo ora a una panoramica dei metodi disponibili.
ATTENZIONE: rispettate la gerarchia del codice non posizionate ad esempio background-color dopo le regole gradient css3, altrimenti la feature non funzionerà!
02. Gradient top – bottom
Proprio come in PS per impostare il gradiente dall’alto verso il basso possiamo usare il seguente codice. Il breve preambolo del primo capitolo vi servirà per capire appieno il funzionamento del codice.
#tuoDiv {
/* fallback */
background-color: #1a82f7;
background: url(images/top_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
Ovviamente dovrete impostare i due colori a seconda delle vostre esigenze.
03. Gradient left-right
Stesso principio anche per questo gradiente che differisce in parte:
#tuoDiv {
/* fallback */
background-color: #1a82f7;
background-image: url(images/left_bg_1.png);
background-repeat: repeat-y;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #1a82f7);
}
Da notare l’utilizzo del repeat:y per l’immagine di fallback in questo caso (dato il tipo di gradiente).
04. Gradient radiale
Questo tipo di gradient è il meno supportato per ora, ve lo sconsiglio, in ogni caso ecco il codice:
#divCentrale {
/* fallback */
background-color: #2F2727;
background-image: url(images/radiale.png);
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
}
Su Opera non è supportato.
05. Uso in ie6 e superiori
Per ie6 e superiori è possibile usare questo filtro:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#b032cb, EndColorStr=#440951); /* vale solo per IE */
06. Conclusioni
Questo tipo di feature css3 è molto rodata e permette di creare facilmente gradienti che fino ad ora dovevano essere fatti con PS. Il mio consiglio è di usarla predisponendo specifiche regole di fallback (come ad esempio l’immagine per ie8 e inferiori!). Sicuramente una tecnica che convince e che vi consiglio di usare per i vostri progetti web.
Vuoi vedere un progetto che usa i css3 gradient? Guarda questa mia creazione (menu): Guarda il sito >>
