Gradient css cross browser

Il gradiente CSS Da tempi immemori ormai aspettavi che venisse implementata la sfumatura, o gradiente nei css. Quel momento è […]
Gradient css cross browser

Il gradiente CSS

Da tempi immemori ormai aspettavi che venisse implementata la sfumatura, o gradiente nei css. Quel momento è quasi arrivato, anche se la regola in questione si trova ancora sotto lo stato di “working Draft”, più o meno tutti i browser la supportano tramite i vendor prefix, compreso IE con i suoi magici filtri.

Working draft

Il working draft, per chi non lo sapesse è un documento che il W3C ha pubblicato per la revisione da parte della comunità, compresi i membri del W3C, il pubblico, e altri organismi tecnici. Alcune, ma non tutte, sono destinate a passare allo stato di “Racommendation”;

gradient

La documentazione

Le due principali tipologie di sfumature sono lineare (con ripetizione) e radiale (con ripetizione). Prenderò in considerazione solo la lineare in quanto di più ampio utilizzo e compatibilità. Le altre tipologie le puoi trovare spiegate in questo articolo del w3c.

Color Stop

La sintassi, a differenza di altre regole css, cambia in base al prefisso che intendiamo utilizzare. Questo che segue è un esempio completo e concreto di come applicare la proprietà in oggetto definendo anche gli eventuali “color-stop”. Tramite questi ultimi puoi decidere quando un colore deve interrompersi per far cominciare l’altro, un po come quando usi la paletta sfumatura di photoshop per intenderci.

color-stop

Codice di esempio

#element {
    background:#d1d1d1;
    background:-moz-linear-gradient(top,#ffffff 30%,#d1d1d1);
    background:-o-linear-gradient(top, #ffffff 30%,#d1d1d1);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0.30, white),to(#d1d1d1));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
}

Alcune Regole da seguire

  1. Inserisci subito un colore di sfondo che possa essere visualizzato per tutti i browser che non supportano tali proprietà. I Browser che invece la supportano ignoreranno semplicemente tale regola.
  2. La regola per mozilla ha una sintassi differente rispetto a quella per i browser su base webkit. Nel primo caso il linear viene definito fuori, e non come valore. Ancora piu importante è come viene indicato il color-stop, nel primo caso basta una semplice percentuale, nel secondo bisogna definirlo e racchiudere a loro volta i valori tra parentesi …,color-stop(0.30, white),…
  3. Non lasciare spazi tra i valori e ne prima ne dopo le virgole.
  4. Se decidi di scegliere di utilizzare il formato del colore in RGB [rgb(193,89,110,0.8)] invece che in HEX [#CC00CC], l’ultimo valore di consentirà di definire la trasparenza.
  5. Vuoi inserire piu di 2 color-stop? Aggiungili semplicemente in sequenza separandoli con una virgola
  6. Ricorda che Opera supporta questa proprietà solo dalla versione 11.1 in avanti.
  7. Ricorda infine che il gradient filter di Internet Explorer non supporta il color-stop, il gradient angle (es. 45°) e il radial gradient. E’ possibile solo specificare la sfumatura orizzontale o verticale tramite 2 colri: StartColorStr e EndColorStr.

CSS3 Gradient Generator

Adesso che hai imparato i fondamenti del gradient posso consegnarti il link di un tool online che farà il lavoro sporco per te! Sperimentalo, usalo, per capire meglio e più in fretta quanto letto fin’ora.

Piccolo trucco

Ricordi la paletta della sfumatura in photoshop? Bene, da li puoi prendere velocemente i valori di color-stop e inserirli nel css per realizzare sfumature complesse come quella inserita in testa all’articolo. Ti basterà cliccare una volta sui cursori e leggere e riportare i relativi valori di riferimento.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github