CSS3 ha introdotto la funzione linear-gradient, fornendo la possibilità, molto utile, di riempire elementi con sfumature lineari specificando un gradiente come immagine di sfondo.
Ecco un esempio di sintassi standard:
.box {
background-image: linear-gradient(top left, #ffffff 0%, #000000 100%);
}L'elemento con la class box avrà uno sfondo con una semplice sfumatura orizzontale bianco/nero senza utilizzare file immagine.
Perché utilizzare Linear Gradient?
Ecco i 3 principali vantaggi:
- maggiore velocità di caricamento delle pagine: nessun file immagine, meno http requests
- maggiore mantenibilità del codice: cambiando i valori specificati, per esempio, ho immediatamente una sfumatura verticale rosso/verde
- possibilità di modificare i valori on-the-fly con Firebug o altri tool di sviluppo web
Ma ci sono anche evidenti svantaggi:
- notevole difficoltà di memorizzazione delle specifiche: è obbligatorio utilizzare vendor prefix per Gecko, WebKit (-moz, -webkit, -o, -ms) e altri motori di rendering perchè la sintassi standard CSS3 non è ancora completamente supportata da tutti i browser
- solo Internet Explorer 10 sarà pienamente compatibile con i gradienti lineari: i browser Internet Explorer 6, 7, 8 e 9 non supportano nativamente linear-gradient
Usare i filtri proprietari Microsoft per IE 6-8
È bene sapere che esistono però vari filtri proprietari Microsoft che servono a specificare particolari proprietà non standard. Il più utilizzato è sicuramente quello che serve a impostare la trasparenza di un elemento con 'opacity'. È possibile consultare la lista intera dei 24 filtri qui.
Ed ecco il filtro che possiamo usare per Internet Explorer 6-8 per far funzionare il nostro gradiente orizzontale:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); /* horizontal gradient */Per creare un gradiente verticale basta cambiare il valore di 'GradientType' da '0' a '1':
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1); /* vertical gradient */Attenzione però perchè il CSS non sarà validato.
Inoltre questi filtri creano conflitti con alcune librerie javascript tra cui CSS3PIE e altre polyfill. Se state usando CSS3PIE, è preferibile usare direttamente la sua proprietà '-pie-background'.
SVG per Internet Explorer 9
Neanche Internet Explorer 9 supporta nativamente i gradienti lineari, ma supporta le immagini SVG. SVG è un linguaggio di grafica basato su XML con cui è possibile creare immagini vettoriali scalabili. E' quindi possibile, usando questo generatore online di Microsoft, creare markup CSS con il quale è possibile specificare un'immagine SVG come valore di 'background-image' e far visualizzere correttamente i gradienti.
Con questa tecnica quindi non correremo il rischio di conflitti con eventuali altri behavior e soprattutto useremo una sintassi CSS perfettamente valida.
Attenzione però, perchè bisogna comunque escludere il filtro proprietario inserito solo per IE6-8 con un commento condizionale (o meglio ancora con una classe specifica all''' o al '
') per IE9 e successivi di questo tipo:
<!--[if gte IE 9]>
<style type="text/css">
.box {
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
</style>
<![endif]-->O ancora, se preferite, potete usare i commenti condizionali per specificare il filtro proprietario solo per IE6-8 e poi essere liberi di usare SVG per IE9 nel CSS standard.
Il codice per generare gradienti lineari per IE6-9
Per generare un gradiente lineare compatibile anche su Internet Explorer 6 e successivi, basta quindi usare il filtro proprietari Microsoft e immagini SVG.
Ecco la sintassi CSS completa, con tutti i vendor prefixes, di un gradiente lineare orizzontale bianco/nero compatibile con tutti i maggiori browser in circolazione:
<style type="text/css">
.box {
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #ffffff 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#000000)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%,#000000 100%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%,#000000 100%); /* IE10+ */
background: linear-gradient(left, #ffffff 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-8 */
}
</style>
<!--[if gte IE 9]>
<style type="text/css">
.box {
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
</style>
<![endif]-->Sicuramente impossibile da memorizzare e macchinoso sotto molti punti di vista, ma se usiamo anche un generatore CSS come Ultimate CSS Gradient Generator non avremo grossi problemi.
Link utili
