CSS3 patterns – Pattern lineari con gradient

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 tipico pattern usato come background
Il tipico pattern usato come background

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.

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%);

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:

background-size: 35px 35px;

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:

repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(255,255,255,.5) 25px, rgba(255,255,255,.5) 50px);

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.

La versione obliqua del gradiente
La versione obliqua del gradiente