SCRIPT CSS

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ù.







Scopri la sezione dedicata agli script.

Scopri la sezione dedicata agli script.