CSS-mønstre med gentagende gradienter

CSS-mønstre er gentagende baggrunde, som striber, gitre, prikker og tern, tegnet udelukkende med gradientfunktioner. To idéer får dem til at virke. Hårde farvestop, hvor to stop deler en position, gør en gradient til en skarp kant. Gentagelse, enten med repeating-*-gradientfunktionerne eller med background-size-fliser, gør én kant til et mønster. Resultatet vejer nogle få bytes, skalerer perfekt og henter sine farver fra dine CSS-variabler.

Sådan former hårde stop former

En gradient blander mellem nabostop. Starter det næste stop præcis, hvor det sidste sluttede, er der ingen afstand at blande over, så farven skifter i en hård linje. Genvejen til det er en farve med to positioner, som #1e293b 0 10px, som holder den farve massiv fra 0 til 10 pixel. Guiden om CSS lineær gradient dækker stop, hints og hårde stop i detaljer.

/* 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);

Striber med repeating-linear-gradient

repeating-linear-gradient() gentager sin stopliste langs gradientlinjen, til elementet er fyldt. Længden af én gentagelse er det sidste stops position, så 0 10px, 10px 20px gentager hver 20. pixel. Skift vinklen til diagonaler, og skift forholdet mellem de to bånd til nålestriber eller kraftige markisestriber.

Gitre, prikker og fliser med background-size

Nogle mønstre kan ikke tegnes med én gentagende gradient: et prikgitter kræver gentagelse i to retninger. Løsningen er at tegne én flise, som én prik eller ét hjørne af et gitter, og derefter sætte background-size til flisestørrelsen. Baggrunde gentages som standard, så fliserne fylder elementet.

.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;
}

Gitteret er to gradienter: én tegner en vandret linje på 1 px øverst i hver flise, den anden en lodret linje ved dens venstre kant. Prikkerne er en lille radial gradient, der bliver gennemsigtig efter 2 pixel. Det skakternede mønster bruger en konisk gradient delt i kvarte, og derfor kræver det kun ét lag.

Gingham, tern og zigzag

Semigennemsigtige striber i lag laver vævede mønstre: hvor et vandret og et lodret bånd krydser hinanden, stables deres farver, og kvadratet bliver mørkere. Det er gingham. Tilføj et andet, tyndere sæt striber i en anden farve, og det bliver til tern. Zigzag kommer af fire trekantede hjørner, hver tegnet med et hårdt stop ved 25 % i en forskellig vinkel.

.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;
}

Bevægelige striber til statuslinjer

Animerede diagonale striber er den klassiske måde at vise, at noget stadig arbejder. Tegn stribene som en flise med background-size, og flyt derefter background-position med præcis én flisebredde. Fordi slutframen matcher startframen, har løkken intet synligt spring. Hold det til små elementer, og stop det for folk, der foretrækker reduceret bevægelse.

.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; }
}

Størrelse, temaer og skalering af mønstre

Skriv stoppositioner og flisestørrelser i pixel eller em, ikke i procent. Procenter afhænger af elementets størrelse, så striber strækkes ujævnt, når elementet ændrer størrelse, og kanter kan lande mellem pixler og blive slørede. Med em skalerer et mønster med teksten omkring det, hvilket passer til mønstrede badges og labels.

Brugerdefinerede egenskaber gør mønstre genbrugelige. Definér farverne og størrelsen én gang, og variér dem derefter pr. komponent eller pr. tema, for eksempel et lysere mønster i lys tilstand og et mere dæmpet i mørk tilstand.

.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;
}

Mønstre bag tekst

Mønstre er en slags tekstur, og de samme regler gælder: diskrete nok til at blive mærket frem for læst. Baggrundstekstur dækker korn, papir og stof. Tekst på travle baggrunde dækker, hvordan ordene forbliver læselige ovenpå.