I gradienti Css3 passano in Candidate Recommendation

Candidate Recommendation Raggiunto uno stato di maturità le sfumature css3 passano dallo stato di Working Draft (WD) a quello di […]
I gradienti Css3 passano in Candidate Recommendation

Candidate Recommendation

Raggiunto uno stato di maturità le sfumature css3 passano dallo stato di Working Draft (WD) a quello di Candidate Recommendation (CR) subendo però alcune modifiche di sintassi.

Se ci ritroviamo quindi delle pagine web con gradienti senza prefisso (tipo le sfumature creati dai tools online) è conveniente già sostituirli con le nuove sintassi, così da renderli sempre a prova di futuro. Possiamo invece lasciare inalterati i gradienti con i vendor-prefix, questi continueranno a svolgere il loro regolare lavoro. Vediamo con qualche esempio le modifiche che hanno apportato:

Gradienti lineari

Direzione

WD = linear-gradient ( top, orange, black );
Descrive la direzione della sfumatura attraverso il suo punto di partenza.

CR = linear-gradient ( to bottom, orange, black );
L’aggiunta del prefisso “to”, che precede la parola bottom, descrive la direzione della sfumatura attraverso il suo punto finale.

Angolo

WD = linear-gradient ( top left, fuchsia, yellow );
Parola chiave che specifica la direzione della sfumatura che parte dall’angolo alto-sinistro a quello opposto in basso.

CR = linear-gradient ( to bottom right, fuchsia, yellow );
Con l’aggiunta del prefisso “to” la direzione della sfumatura è indicata dall’alto verso il basso e lateralmente verso destra. Il punto centrale della linea di pendenza interseca una linea tracciata dai due angoli opposti.

Direzione ad angolo retto

WD = linear-gradient ( 200deg, lime, magenta );
Con l’unità di misura 0deg si specifica una sfumatura la cui direzione è verso destra con un angolo di rotazione in senso antiorario.

CR = linear-gradient ( 250deg, lime, magenta );
Nella nuova sintassi, con l’unità di misura 0deg si indica una sfumatura che punta verso l’alto, con un angolo di rotazione in senso orario. Gli angoli scritti con la vecchia sintassi possono essere convertiti con una funzione in js suggerita da Lea Verou: function fromLegacy(deg) { return Math.abs(deg-450) % 360 }


Gradienti radiali

Posizione

WD = radial-gradient ( center, aqua, black );
Parola chiave che descrive la posizione del centro del gradiente.
CR = radial-gradient(at center, aqua, black);
Con l’aggiunta del prefisso “at” si specifica la direzione in cui si propaga la sfumatura.

Dimensione

WD = radial-gradient ( circle cover, lime, black );
La dimensione del gradiente è definito da una delle sei parola chiave: farthest-corner, farthest-side, closest-corner, closest-side, contain, e cover.
CR = radial-gradient ( circle farthest-corner, lime, black );
Nella nuova sintassi il gradiente è definito da una delle quattro parole chiave: farthest-corner, farthest-side, closest-corner, e closest-side.

Dimensione e forma

WD = radial-gradient ( center, 50px 50px, red, black );
I gradienti radiali con dimesione specifica devono avere la lunghezza verticale ed orizzontale del raggio definite.
CR = radial-gradient ( circle 50px at center, red, black );
Con la nuova sintassi i gradienti radiali possono essere specificati con una singola dimensione del raggio.

Conclusioni

Stando a quanto detto dal w3c, queste modifiche hanno migliorato le vecchie specifiche in termini di chiarezza e coerenza. Ad esempio nelle vecchie dichiarazioni ad angolo,  i valori degli angoli aumentavano in senso antiorario. Questo era in contrasto con le trasformazioni css ed svg, dove le rotazioni angolari si verificano in senso orario.

Spero che l’articolo sia stato di tuo gradimento. Per qualsiasi dubbio o segnalazione scrivi pure nei commenti o sulla nostra fanpage.

Buon proseguimento di vacanze, alla prossima 😉

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github