Nel mio ultimo post avevo accennato al blog di Lea Verou che ha realizzato una gallery di pattern CSS3. Si tratta di composizioni grafiche che possono tornare utili e che fino a qualche tempo fa avremmo dovuto applicare alle nostre pagine web tramite immagini. Ora invece possiamo iniziare a pensare di utilizzare CSS3 per tali operazioni, ricordandoci, però, di applicare una immagine di fallback per IE.
Una tipologia di immagine di background che sulle pagine web è tra le più utilizzate è il tipico pattern formato da linee verticali, od oblique, ripetute orizzontalmente:
Il principio base che ci permette di creare un pattern di questo tipo è descritto direttamente dal W3C nelle specifiche di CSS3 Images:
Nel caso in cui due color-stop abbiano la stessa posizione, la regola CSS genera una visualizzazione in cui non esiste una transizione dal primo al secondo colore, ma in cui il primo colore è affiancato in modo netto al secondo, non mostrando alcuna transizione dall’uno all’altro.
A questo punto è chiara la modalità con cui possano venir generati pattern come quello mostrato nell’immagine precedente.
[css]
background-color: #215171;
background-image: -webkit-linear-gradient(left, transparent 50%, rgba(255,255,255,.7) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgba(255,255,255,.7) 50%);
background-image: linear-gradient(left, transparent 50%, rgba(255,255,255,.7) 50%);
[/css]
Il codice generato è semplice: viene impostato un colore di sfondo che fa da base al sito. Sopra a questo colore viene inserita una background-image che possiamo immaginarci proprio come una immagine in semitrasparenza. Il gradiente in questione specifica una direzione ( left ) di stampa e due colori. Per entrambi i colori, abbiamo l’indicazione del color-stop ( 50% ). La percentuale del color-stop indica la posizione all’interno della linea-gradiente dove 0% è l’inizio del gradiente e 100% è la sua fine. Nel nostro caso abbiamo posto entrambi i color-stop al 50%, dunque, avremo lo spazio a disposizione suddiviso a metà tra i due colori.
Applicando però solo queste regole CSS otteniamo solo uno sfondo con due grandi linee verticali, mentre il nostro scopo è averne tante, non solo due che sono larghe ognuna il 50% della pagina.
CI viene in aiuto il background-size con il quale possiamo specificare la larghezza del pattern:
[css]
background-size: 35px 35px;
[/css]
Ovviamente, utilizzando i background multipli è possibile sovrapporre più livelli e incrociare i pattern così da creare effetti particolari per i quali fino a qualche tempo fa fosse necessario creare delle immagini.
Nel caso in cui, invece, vogliamo definire un pattern obliquo è molto utile utilizzare le seguente regola:
[css]
repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(255,255,255,.5) 25px, rgba(255,255,255,.5) 50px);
[/css]
Repeating-linear-gradient è molto utile per definire gradienti ripetuti e per utilizzare più color-stop che quindi vengono poi riportati uniformemente con la ripetizione del gradiente.
Nel nostro caso l’indicazione della direzione ( 45deg ) ci permette di definire il fatto che la regola generi un gradiente obliquo. Inoltre la definizione degli stop combacia per i due colori centrali ( 25px ) e allo stesso modo per i due esterni che, grazie alla ripetizione del pattern, si corrispondono a livello di posizione. In questo modo abbiamo due salti di colore che non generano gradienti, ma che in maniera identica al primo nostro esempio stampano a video i due colori affiancati.
