CSS3 linear-gradient

Scritto da Gianluca in Guide



Con l’avvento dei CSS3 arriva, finalmente, il supporto di quasi tutti i principali browser web alle sfumature (in particolare, sfumature lineari e sfumature radiali). Le sfumature CSS, attualmente, sono supportate in FireFox 3.6 +, Opera 9,5 +, Safari 4 + e Google Chrome 4+.

background: #3399cc url("gradient-bg.png") repeat-y left;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;

La sintassi CSS3 per creare sfumature lineari differisce leggermente tra le versioni Firefox e Safari / Chrome / Opera:

-moz-linear-gradient(<point> || <angle>, color-stops)
/* Firefox */
-webkit-gradient(linear, <point>, color-stops)
/*Safari, Chrome, Opera*/

Quindi:

  • Il “point” o “angle“: vengono utilizzati per definire il punto di partenza della sfumatura. Il valore può essere espresso in percentuale (%), in pixel, oppure dichiarato come “left”, “center”, o “right” (per le sfumature orizzontali) e “top”, “center”, o “bottom” (per le sfumature verticale). Se queste posizioni non vengono specificate, il valore di default è “center”, oppure 50%.
  • Color-stop“: I colori da dopve parte e dove termina la sfumatura. Se vengono specificati più di due colori senza uno specifico “stop”, la sfumatura verrà realizzata da una parte all’altra in modo uniforme, fino a quando non si raggiunge il colore finale.
    • In Firefox, ogni “Color-stop” segue la seguente sintassi: <colore> [<percentage> | <length>]. Se una percentuale (0-100%) o la lunghezza del valore (0-1,0) è definito dopo il nome del colore, il colore precedente verrà sfumato verso il colore del punto di arresto. Se nessun valore è presente, il colore sarà sfumato gradualmente dal colore iniziale a quello finale.
    • In Safari / Chrome / Opera, ogni “Color-stop” segue la seguente sintassi: color-stop (value, color). Il valore di stop è espresso sia in termini di percentuale (da 0 a 100%) che in termini di lunghezza  (da 0 a 10), o from(color) e to(color).

Css3 linear-gradientAd esempio, il valore color-stop “blu 30%” in Mozilla o “color-stop (30%, blu)” in Safari / Chrome / Opera richiama la sfumatura che dal colore precedente passa gradualmente in azzurro prima di fermarsi infine in blu al 30% della larghezza del contenitore.

Bello vero?

Altri articoli che potrebbero interessarti:

Gianluca

Appassionato di informatica fin da piccolo, sono uno dei fondatori di Zaniah. Attualmente, oltre ad amministrare l'azienda, mi occupo di sviluppo web e search engine marketing (SEM).

Nessun commento


Scrivi un commento

Lascia un commento a questo articolo, ti garantiamo che il tuo indirizzo e-mail non verrà reso pubblico e che non riceverai MAI spam da parte di Zaniah.

Questo sito è abilitato Gravatar. Clicca qui per creare un Avatar che comparirà ogni qual volta lascerai un commento su Zaniah.it e su tutti gli altri siti e blog che supportano la tecnologia Gravatar.

* campi obbligatori.