Creare gradienti lineari con CSS3

 

Con CSS3 un gradiente lineare è dichiarato dalla funzione chiamata linear-gradient(). La funzione si compone di 3 valori primari. Il primo valore definisce la posizione di partenza del gradiente. Per essa possono essere specificate le posizioni top, bottom, right, left, a seconda di quale direzione si voglia dare al gradiente.  Di seguito un esempio di sintassi standard della funzione.

E’ anche possibile specificare la posizione di orientamento del gradiente anche specificando i gradi di angolazione:

Il secondo valore della funzione specifica il primo colore e la sua posizione di arresto che è riportata in percentuale. La posizione di arresto è in realtà opzionale, in quanto il browser è abbastanza intelligente per determinare la posizione corretta, cosicchè quando non è specifica il browser la imposterà allo 0% come default.

Il terzo valore della funzione specifica il secondo colore. Funziona come il valore precedente, a differenza che se la posizione di arresto non viene specificata, in questo caso il browser  imposterà il valore di 100% come predefinito.

Sfortunatamente, in questo momento, non tutti i browser supportano la sintassi standard sopra esposta e necessitano dei relativi prefissi proprietari (-webkit-, -moz-, -ms- and -o-) da associare alla funzione per la sua interpretazione. Così volendo garantire la compatibilità tra i browser, l’utilizzo della funzione di gradiente lineare sarà:

Questo codice sarà compatibile con i vari browser escluso purtroppo Internet Explorer, verisone 9 inclusa e inferiori, che utilizza la funzione denominata filter per riprodurre i gradienti.

pixolo ads
Animal Comix
3078 | Articolo pubblicato 5 anni fa nella categoria Css - Html.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
  • gimmi

    potreste mettere una demo o un esempio?

    • pixolo

      La “demo” è il gradiente presente nel rettangolo colore arangio.

Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×