CSS3: gradienti come sfondo

Una delle possibilità offerte da css3 recentemente rivista riguarda la possibilità di usare i gradienti come sfondo. Al momento i browser non ofrrono ancora pieno supporto alla specifica quindi saremo costretti ad utilizzare i prefissi per ciascun vendor, ovviamente resterà il problema delle vecchie versioni di internet explorer. Vediamo una rapida carrellata di possibilità, inserendo 6 div all’interno della pagina html:

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>

Mettiamo un css comune a tutti questi div:

div{
width:250px;
height:150px;
margin:20px;
border:1px solid #000;
float:left;
}

E quindi procediamo con il primo div, in questo caso, a titolo esemplificativo, cercheremo di mantenere la compatibilità con tutti i browser, nei prossimi esmepi ci concentreremo su chrome:

#box1{
background-image: linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
background-image: -ie-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
background-image: -o-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
}

La proprietà base è background-image, lavoraimo sul linear-gradient, al quale poi daremo gli opportuni prefissi, si parte dall’angolo in alto a destra con il bianoc e si procede verso l’angolo opposto sfumando verso l’azzurro.

I 2 esempi successivi riguardano un gradiente verticale e un gradiente orizzontale

#box2{ background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #C6F 100%);}
#box3{ background-image: -webkit-linear-gradient(left, #093 0%, #09C 100%);}

Non c’è solo la possibilità di una progressione omogenea dall’inizio alla fine possiamo anche prevedere step intermedi:

#box4{ background-image: -webkit-linear-gradient(left, #FF0 0%, #F90 30%, #F30 100%);}

Altra soluzione possibile è il gradiente radiale e quindi a partire dal centro procederemo con il nostro gradiente

#box5{ background-image: -webkit-radial-gradient(center, circle, #FFF 0%, #09C 100%);}

Infine l’ultimo esempio è un gradiente creato da uno dei tanti tool online utili a questo scopo

#box6{/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #EF662B 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #EF662B 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #EF662B 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #EF662B));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #EF662B 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #EF662B 100%);
}

Infine l’esempio