[CSS] Sfumature lineari e a radiazione

~Sara Littner

Posted on 15/8/2012, 09:49

User deleted

[CSS] Sfumature lineari e a radiazione

Salve a tutti, oggi vi insegnerò ad utilizzare il CSS3 per creare gradients (sfumature) da un colore all'altro.

Può essere utile per personalizzare le vostre schede o altri vostri topic in modi innovativi.

Cominciamo dal dire che il gradient è supportato solo da Google Chrome, Mozilla Firefox e Safari, che hanno i loro attributi specifici, con un prefisso proprio (-moz per Mozilla Firefox, -webkit per Google Chrome e Safari) e sintassi leggermente diversa.

SFUMATURE LINEARI:

1296266856-2

Per farvi capire meglio cercherò di analizzare degli esempi:

CODICE

background: -moz-linear-gradient(100% 100% 180deg. red, yellow);

-moz: Prefisso di Firefox
-linear: Tipo di sfumatura (Lineare)
-100% 100%: Percentuale dei colori
-180deg.: Angolo di pendenza

CODICE

background: -webkit-gradient(linear, right top, left bottom, from(red), to(yellow));

-webkit: Prefisso di Chrome e Safari
-linear: Tipo di sfumatura (Lineare)
-right top: Punto d'inizio del gradient
-left bottom: Punto finale del gradient

Questa regola applica allo sfondo una sfumatura orizzontale tra il rosso e il giallo.

Come vedete, su Mozilla, il tipo di sfumatura (Lineare) va fuori dalle parentesi, ed invece è il contrario nella sintassi usata da Google Chrome e Safari.

Da come abbiamo visto dai codici un po' più su ci sono due modi per definire il gradient lineare:
- specificando l'angolo della linea di pendenza in gradi (questo lo può fare solo Mozilla Firefox)
- attraverso le parole chiave left, right, top e bottom per definire il punto d'inizio e il punto finale della sfumatura (questo lo può fare sia Mozilla Firefox che Webkit)

Altri tipi di sfumatura sono: radial, repeating-linear-gradient e repeating-radial-gradient.

SFUMATURE RADIALI

1296267365-3

Sono le sfumature che invece di partire da un lato per arrivare ad un altro lato in modo lineare, si irradiano da un punto allargandosi in modo circolare o ellittico, aggiungendo un bell'effetto da mettere nei vostri elementi HTML quali div o fieldset.

Attraverso il CSS3 è possibile definire:
- il punto da cui parte il gradient [di default è il centro dell'elemento]
- la forma [circolare o elittica]
- la dimensione [attraverso specifiche parole-chiave (closest-side | closest-corner | farthest-side | farthest-corner | contain | cover), per maggiori dettagli consultare qui]

Ecco a voi i codici delle sfumature a radiazione sopra, in formato Mozilla:
Prima sfumatura a radiazione presente nell'immagine:

CODICE

background: -moz-radial-gradient(center 45deg, circle closest-corner, red 0%, yellow 100%);

Seconda sfumatura a radiazione presente nell'immagine:

CODICE

background: -moz-radial-gradient(center 90deg, circle contain, red 0%, yellow 100%);

Terza sfumatura a radiazione presente nell'immagine:

CODICE

background: -moz-radial-gradient(bottom left, farthest-side, red, yellow 50px, green);

Quarta sfumatura a radiazione presente nell'immagine:

CODICE

background: -moz-radial-gradient(20px 30px, contain, red, yellow, blue);

E' possibile specificare più colori e le percentuali per ogni singolo colore, fermare il gradiente di ogni colore in punti specifici con l'attributo di gradient color- stop:

1296267502-5