I Pattern sono elementi grafici che vengono spesso utilizzati a ripetizione per ottimizzare e creare sfondi per siti web.

Utilizzando queste immagini a ripetizioni abbiamo un’ottimizzazione notevole riguardo il peso e la sintassi.

Vediamo oggi come usarli tramite i fogli di stile CSS e alcuni siti in cui scaricare o generare gratis pattern.

The Design Inspirations

Pattern Head

Pattern Cooler

BgPatterns

Come si usano?

Una volta scelto il nostro pattern ci resta solo capire in che modo lo vogliamo ripetere, ovvero in orizzontale, in verticale o tutte e due.

Tramite i fogli di stile CSS ci basterà usare una sintassi simile associata al nostro body:

body {
background-repeat: repeat;
background-image: url(images/mio_pattern.gif);
}

In questo modo ripeterò la mia immagine di 10px per 10px sia per l’asse delle x che per le y creando cosi uno sfondo ottimizzato con stessa trama.

Ovviamente non sempre riusciamo ad usaere la ripetizione totale a causa del design, infatti spesso è possibile ripete una striscia di 2px per 20px ad esempio per l’asse delle x creando cosi una ripetizione che simuli lo sfondo da sinistra a destra.

Di solito per sfondi sfumati basta poi ultimare il tutto inserendo da CSS [background-color:#CCCCCC;] un codice esadecimale dell’ultima tonalità di colore dando il senso di continuità.

Letture Consigliate per CSS

Articoli simili

Autore:

Giuliano Ambrosio è un Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.