Motivi CSS con gradienti ripetuti

I motivi CSS sono sfondi ripetuti, come strisce, griglie, pois e quadretti, disegnati interamente con funzioni di gradiente. Due idee li fanno funzionare. I punti di colore netti, dove due punti condividono una posizione, trasformano un gradiente in un bordo nitido. La ripetizione, con le funzioni di gradiente repeating-* o con il riquadro di background-size, trasforma un bordo in un motivo. Il risultato pesa pochi byte, scala alla perfezione e prende i colori dalle tue variabili CSS.

Come i punti netti creano le forme

Un gradiente sfuma tra punti vicini. Se il punto successivo parte esattamente dove è finito l’ultimo, non c’è distanza su cui sfumare, quindi il colore cambia con una linea netta. La forma abbreviata è un colore con due posizioni, come #1e293b 0 10px, che mantiene quel colore pieno da 0 a 10 pixel. La guida al gradiente lineare in CSS tratta nel dettaglio punti, indicazioni e punti netti.

/* a soft blend */
background: linear-gradient(90deg, #1e293b, #334155);

/* a hard edge at 50% */
background: linear-gradient(90deg, #1e293b 50%, #334155 50%);

/* the same stripe pair, repeated every 20px */
background: repeating-linear-gradient(90deg, #1e293b 0 10px, #334155 10px 20px);

Strisce con repeating-linear-gradient

repeating-linear-gradient() ripete il suo elenco di punti lungo la linea del gradiente finché l’elemento non è pieno. La lunghezza di una ripetizione è la posizione dell’ultimo punto, quindi 0 10px, 10px 20px si ripete ogni 20 pixel. Cambia l’angolo per le diagonali e cambia il rapporto tra le due fasce per il gessato o per le strisce marcate da tendone.

Griglie, pois e riquadri con background-size

Alcuni motivi non si possono disegnare con un solo gradiente ripetuto: una griglia di pois richiede la ripetizione in due direzioni. La soluzione è disegnare un riquadro, come un punto o un angolo di griglia, poi impostare background-size alla dimensione del riquadro. Gli sfondi si ripetono per impostazione predefinita, quindi il riquadro riempie l’elemento.

.grid-lines {
  background-color: #0f172a;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.dots {
  background-color: #fefce8;
  background-image: radial-gradient(#ca8a04 1.5px, transparent 2px);
  background-size: 20px 20px;
}

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 24px 24px;
}

La griglia è fatta di due gradienti: uno disegna una linea orizzontale di 1px in cima a ogni riquadro, l’altro una linea verticale sul suo bordo sinistro. I pois sono un piccolo gradiente radiale che diventa trasparente dopo 2 pixel. La scacchiera usa un gradiente conico diviso in quarti, ed è per questo che le basta un solo livello.

Vichy, tartan e zigzag

Sovrapporre strisce semitrasparenti crea motivi tessuti: dove una fascia orizzontale e una verticale si incrociano, i loro colori si sommano e il quadrato diventa più scuro. È il vichy. Aggiungi un secondo gruppo di strisce, più sottili e di un altro colore, e diventa tartan. Gli zigzag nascono da quattro angoli triangolari, ciascuno disegnato con un punto netto al 25% con un angolo diverso.

.gingham {
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(220 38 38 / 0.45) 50%, transparent 0),
    linear-gradient(rgb(220 38 38 / 0.45) 50%, transparent 0);
  background-size: 24px 24px;
}

.zigzag {
  background-color: #e0f2fe;
  background-image:
    linear-gradient(135deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(225deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(315deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(45deg, #0ea5e9 25%, transparent 25%);
  background-position: -16px 0, -16px 0, 0 0, 0 0;
  background-size: 32px 32px;
}

Strisce in movimento per le barre di avanzamento

Le strisce diagonali animate sono il modo classico per mostrare che qualcosa sta ancora lavorando. Disegna le strisce come riquadro con background-size, poi sposta background-position esattamente di una larghezza di riquadro. Poiché il fotogramma finale coincide con quello iniziale, il ciclo non ha salti visibili. Limitalo a piccoli elementi e fermalo per chi preferisce il movimento ridotto.

.progress {
  background-color: #4f46e5;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25% 50%, rgb(255 255 255 / 0.18) 50% 75%, transparent 75%);
  background-size: 28px 28px;
  animation: crawl 1s linear infinite;
}

@keyframes crawl {
  to { background-position: 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { animation: none; }
}

Dimensionare, tematizzare e scalare i motivi

Scrivi le posizioni dei punti e le dimensioni dei riquadri in pixel o in em, non in percentuali. Le percentuali dipendono dalla dimensione dell’elemento, quindi le strisce si allungano in modo irregolare quando l’elemento cambia dimensione e i bordi possono cadere tra i pixel e sfocarsi. Usare em fa scalare il motivo con il testo che lo circonda, adatto a badge e etichette con motivo.

Le proprietà personalizzate rendono i motivi riutilizzabili. Definisci una volta colori e dimensione, poi variali per componente o per tema, ad esempio un motivo più chiaro in modalità chiara e uno più quieto nella modalità scura.

.stripes {
  --a: #1e293b;
  --b: #334155;
  --w: 10px;
  background: repeating-linear-gradient(45deg, var(--a) 0 var(--w), var(--b) var(--w) calc(var(--w) * 2));
}

.stripes--warm {
  --a: #fff7ed;
  --b: #fed7aa;
  --w: 14px;
}

Motivi dietro il testo

I motivi sono un tipo di texture, e valgono le stesse regole: abbastanza sottili da essere percepiti più che letti. Le texture di sfondo trattano grana, carta e tessuto; il testo su sfondi affollati spiega come mantenere leggibili le parole sopra di essi.