CSS3 Gradient: sfondi sfumati senza immagini
giovedì 29 Dicembre 2011
La proprietà CSS3 che tratterò in questo articolo è: Gradient e rappresenta una delle più rivoluzionarie proprietà introdotte (non ancora in forma definitiva) nel W3C per alleggerire il nostro sito, andando a sostituire immagini di sfondo composte con gradienti di più colori, con due righe di codice css.
Vediamo subito come si presenta una sfumatura di tipo linear:
La sintassi è la seguente:
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ |
A prima vista sembra molto complessa perchè nonostante questa proprietà sia supportata dalla maggior parte dei browser, quest’ultimi hanno bisogno della solita sintassi proprietaria almeno fino a quando la proprietà Gradient non verrà standardizzata.
Più avanti vi fornirò il link ad un utilissimo strumento web per realizzare grandienti in CSS3 utilizzando una tavolozza come quella di Photoshop, ma prima voglio mostrare un’esempio di un’altro tipo di gradiente che si può creare con questa funzione.
Ecco un’esempio di sfumatura radial:
La sintassi è la seguente:
background: #1e5799; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #a9cbe5 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#a9cbe5)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#a9cbe5 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#a9cbe5 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#a9cbe5 100%); /* IE10+ */ background: radial-gradient(center, ellipse cover, #1e5799 0%,#a9cbe5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#a9cbe5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ |
La gradazione lineare può essere orizzontale, verticale e obliqua mentre la gradazione radiale ha origine al centro e si estende verso l’esterno.
Due ottimi web tools gratuiti che hanno lo scopo di facilitare la realizzazioni di effetti di questo tipo sono ColorZilla, che presenta una grafica che ricorda molto quella di Photoshop e CSS3 Gradient Generator.
Tra i due personalmente preferisco ColorZilla e voi? Provateli e poi lasciatemi un commento!
Nathalie
18 Luglio 2012, 12:17
Ciao, grazie per l’articolo!
Per caso sai dirmi come mai, applicando questo codice al tag BODY, il colore non parte da in fondo alla pagina, ma comincia a metà, andando verso l’alto? Come faccio se voglio avere una gradazione sullo sfondo di tutto il sito? 🙁
Simone Forti
20 Luglio 2012, 11:53
Ciao Nathalie, sicuramente dipenderà dai settaggi dell’html e del body nel css, ecco un’esempio con il codice di quello che serve a te: http://jsfiddle.net/SMfVF/1/