ZANETTE
MARCO
CSS
Sfondo sfumato nei box attraverso i css
In questo tutorial vi spiegherò come grazie ai gradient css3 è possibile
creare un background sfumato dentro dei box senza dover utlizzare immagini.
Gradient genera un'immagine e quindi deve essere applicato alla proprietà background-image oppure direttamente
alla proprietà background dell'elemento in questione.
Gradient è supportato da Chrome, Safari e Firefox attraverso i loro prefissi,
in Internet Explorer attualmente alla versione 9 non
sono supportati e lo saranno probabilmente dalla versione 10.
- <div style="background-image: linear-gradient(bottom, #f00 0%, #00C 100%);
- background-image: -o-linear-gradient(bottom, #f00 0%, #00C 100%);
- background-image: -moz-linear-gradient(bottom, #f00 0%, #00C 100%);
- background-image: -webkit-linear-gradient(bottom, #f00 0%, #00C 100%);
- background-image: -ms-linear-gradient(bottom, #f00 0%, #00C 100%);
- width:100px; height:100px;
- </div>
In questo esempio ho creato un gradiente lineare (attraverso i prefessi per i diversi browser) dal basso verso l'alto utilizzando 2 colori.
Vediamo di quali parametri necessita gradient:
• punto di partenza del gradient che può assumere i seguenti valori: top, left, right, bottom, top right, top left,
bottom right, bottom left;
• colore e il suo punto nel gradient dove dovrà comparire.
Nell'esempio sopra ho utilizzato 2 colori ma se ne possono utilizzare di più.