MoebiusMania

Fin dall'alba del webdesign basato sui Css una delle prime cose che lasciò un po l'amaro in bocca riguardo questo linguaggio era l'impossibilità di creare sfumature. Abbiamo passato anni a barbatruccare la cosa ritagliando layout e ripetendo le immagini contenenti le sfumature, tuttavia anche se funziona egregiamente non abbiamo a disposizione la versatilità che ci è tanto cara. Fortunatamente la nuova versione dei Css darà una bella svolta anche a questa parte del lavoro... ma fermi tutti, chi ha detto che dobbiamo aspettare il 2014 per metterci mano subito? ;) 

I Css3

La nuova specifica dei Css permette di creare sfumature da codice, ma attenzione non si tratta di una nuova proprietà ma di nuovi valori, possiamo assegnare sfumature come background-color di qualunque elemento.

Le differenze di sintassi

La sintassi non è proprio "facile" quindi potrebbero essere le prime cose da voler snippettizzare o copiare/incollare:

background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%);
background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Opera */
background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Da IE 10 in poi! */
background: linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Possibile finale */

Questo esempio genera una sfumatura lineare tra due tonalità di arancione, con tutti i prefissi per i browser più la quella che dovrebbe essere la versione "definitiva". In generale se specifica il tipo di gradiente (lineare o radiale), la direzione e i vari stop, ovvero i punti di color, ognuno di questi è composto dall'esadecimale del colore e una percentuale che indica la posizione di questo (0 inizio, 100 fine, 50 metà... giusto per darci qualche riferimento!)

Illustrator CS5 + Html5 pack

Utenti dell'ultima versione di Illustrator e al contempo webdesigners gioite! Da diversi mesi sul sito Labs di Adobe è disponibile un pacchetto aggiuntivo per l'editor vettoriale che permette di esportare alcune proprietà di aspetto degli elementi in Css3... e indovinate qual'è la più interssante? Quindi potete disegnare le sfumature in Illustrator e averle comodamente codificate in Css senza dove scrivere una lettera! Selezionate l'elemento dal quale volete esportare la sfumatura, andate sul pannello "Aspetto", pigiate il menu del pannello (il triangolo nero in alto a sinistra)

Altri tools

Oltre all'estensione di Illustrator, esistono anche diversi altri tools per la creazione di sfumature CSS(3), molti di questi anche online. Consiglio vivamente quello di Colorzilla che oltre alle sintassi di webkit e mozilla genera anche un filtro per IE (precedenti al 9), la sintassi specifica per Opera e un colore a tinta unita per i browser che non supportano nessuna di queste soluzioni!