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!
px
px

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

  • Editor Immagini
    Crea, modifica, ridimensiona e ritaglia on-line le tue immagini e foto.
  • Crea il tuo Logo
    Crea on-line il tuo logo: componi grafica e testo e poi scarica il PNG trasparente.
  • Crea Avatar
    Crea on-line il tuo avatar personalizzato per i tuoi profili social.
  • Meme Generator
    Crea on-line i tuoi meme: è facilissimo creare immagini divertenti e virali
  • Crea Favicon
    Crea la favicon del tuo sito con l'editor o importa un'immagine JPG, GIF o PNG.
  • Crea Gradiente
    Scegli i colori, l'altezza della sfumatura e crea il tuo gradiente in PNG.
  • Conversione Immagini
    Converti on-line le tue immagini da/a JPG, PNG, GIF e WebP.