Crea il tuo Pattern

Vorresti uno sfondo a strisce da utilizzare sul tuo sito? Non hai Photoshop oppure non sai come creare un pattern da utilizzare come background per le tue pagine web? Col nostro tool on-line è semplicissimo creare il tuo sfondo a righe!
Larghezza linee Distanza tra le linee
px px
Colore Linea Background
Stile del pattern
Verticale Diagonale 45° Orizzontale Diagonale 135°
Crea pattern →

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:

  1. Impostiamo la larghezza delle strisce;
  2. e la distanza tra le strisce;
Impostiamo la larghezza e la distanza tra le strisce
  1. Impostiamo il colore delle strisce;
  2. ed il colore dello sfondo (ovvero il colore che riempirà lo spazio tra le strisce impostato in precedenza mediante l'opzione distanza):
Impostiamo i colori delle strisce e dello sfondo
  1. Definiamo uno stile per il nostro pattern definendo, in pratica, l'inclinazione delle strisce che andranno a riempire il nostro sfondo:
Impostiamo l'inclinazione delle strisce
  1. Clicchiamo sul bottone per generare il nostro sfondo a strisce personalizzato e salviamo l'immagine (in formato PNG) cliccando sull'icona di download.
Il nostro sfondo a strisce personalizzato

Altri tool interessanti

clicca qui