Cos'è un Pattern?
Col termine pattern si indica una struttura modulare e ripetuta. In ambito grafico, il pattern è, appunto, un'immagine che ha la caratteristica di poter essere ripetuta infinite volte nello spazio riempiendolo in modo omogeneo e senza soluzione di continuità.
Nell ambito del web-design i pattern sono utilizzati per la creazione di seamless background, cioè sfondi di pagine (o singoli elementi della pagina) in cui lo spazio è riempito da elementi modulari affiancati.
Utilizzare un pattern come background
Attraverso CSS è possibile utilizzare i pattern come sfondo per una pagina web o suoi singoli elementi (ad esempio un box).
Le proprietà CSS coinvolte in questa operazione sono molteplici, ovvero:
- background-image()
- background-repeat()
- background-position()
- background-attachment()
In alternativa è possibile utilizzare il pattern utilizzando la sola proprietà background() in questo modo:
body { background: url(URL_DEL_PATTERN) repeat; }
Per approfondire le tematiche relative alla gestione dello sfondo coi CSS si faccia riferimento a questa lezione delle guida pubblicata su Mr.Webmaster.
Generiamo uno sfondo a righe su misura per il nostro sito!
Grazie allo strumento presente in questa pagina è possibile creare sfondi a strisce (striped background) da utilizzare come background personalizzati per il nostro sito.
Attraverso il nostro stripe generator è possibile creare un'infinità varietà di sfondi sempre diversi sfruttando le numerose opzioni di personalizzazione offerte. Vediamo di seguito come utilizzare il tool:
- Impostiamo la larghezza delle strisce;
- e la distanza tra le strisce;
- Impostiamo il colore delle strisce;
- ed il colore dello sfondo (ovvero il colore che riempirà lo spazio tra le strisce impostato in precedenza mediante l'opzione distanza):
- Definiamo uno stile per il nostro pattern definendo, in pratica, l'inclinazione delle strisce che andranno a riempire il nostro sfondo:
- Clicchiamo sul bottone per generare il nostro sfondo a strisce personalizzato e salviamo l'immagine (in formato PNG) cliccando sull'icona di download.
