Paolo De Feo
a- a+

CSS3 Gradients: come fare sfumature

Vediamo cosa sono e come si usano i gradienti CSS3.

I CSS3 gradients (gradienti CSS3) sono una funzione molto utile introdotta dall’ultima release dei fogli di stile.
I gradienti CSS3 ci permettono di creare delle sfumature per pagine ed elementi web usando una codifica pura senza utilizzare immagini: una specifica che dona maggiore leggerezza ai documenti ipertestuali e consente di mantenere gli standard di qualità.

Un occhio ai benefici dell’utilizzo dei gradienti CSS3:

- Rispetto dell’attuale tendenza grafica – I gradients CSS3 aiutano gli sviluppatori web a costruire pagine dal grande impatto visivo.

- Minori richieste HTTP –  Minori richieste HTTP significa minor tempo di caricamento delle informazioni presenti nel sito e, di conseguenza, mantenimento degli utenti.

- Modifiche facili – Intervenire sul CSS per modificare le impostazioni di codifica è più facile che farlo sulle immagini. Si perde quindi minore tempo nello sviluppo. Non dobbiamo poi dimenticare che i gradienti CSS3 si adattano automaticamente alle dimensioni del container DIV.

I gradienti CSS3 operano secondo 2 modalità di disegno: lineare e radiale.

Proviamo adesso a creare uno stile CSS. Ecco un esempio d’implementazione in un DIV:

#gradienteCSS3 {
color: #fff;
height: 50px;
padding: 20px;
/* Per I browser WebKit (Safari, Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#fff));
/* Per I browser con motore di rendering Gecko(Firefox etc) */
background: -moz-linear-gradient(top, #f00, #fff);
/* Per Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000, endColorstr=#FFFFFFFF);
/* Per Internet Explorer 8 e superiori*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000, endColorstr=#FFFFFFFF)";
}

Per richiamarlo nella pagina HTML ci basterà seguire la sintassi classica:

<div id="gradienteCSS3">esempio di div con gradiente</div>

Come si vede nel CSS in alto, bisogna creare un’istruzione diversa per ogni categoria di browser di navigazione: un piccolo sforzo iniziale che ci permetterà di evitare diverse seccature in futuro. L’esempio scritto dà in output un gradiente lineare che sfuma dall’alto verso il basso.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 1 commenti