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!