Repeating linear gradient i CSS: striper, ringer og mønstre

En repeating linear gradient i CSS gjentar en kort rekke fargestopp langs en linje til den fyller elementet. Skriv repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px), så får du diagonale rosa striper, hver 14 piksler brede, uten noen bildefil. Lengden på én gjentakelse bestemmes av det siste stoppet, her 28px. Bruk samme idé med repeating-radial-gradient() for ringer og repeating-conic-gradient() for stråler.

Slik virker repeating-linear-gradient()

Syntaksen er identisk med en vanlig lineær gradient. Forskjellen er hva som skjer etter det siste stoppet: i stedet for å holde den siste fargen starter nettleseren mønsteret på nytt. To regler gjør det meste av jobben.

• Posisjonen til det siste stoppet er lengden på flisen. Stopp på 0, 14px og 28px gjentas hver 28. piksel.
• To farger på samme posisjon gir en skarp kant. #f472b6 0 14px, #fdf2f8 14px 28px hopper fra rosa til lys rosa ved 14px uten blanding.
• Hvert stopp kan ta to posisjoner. #f472b6 0 14px betyr helt rosa fra 0 til 14px, som er kortere enn å skrive fargen to ganger.
• Bruk lengder, ikke prosenter, til striper. Prosenter er relative til gradientlinjen, så stripene strekkes når elementet endrer størrelse.

/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }

Stripemønstre å kopiere

Linjert papir er et godt eksempel på en asymmetrisk gjentakelse: 22 piksler papir, én piksel linje. Samme mønster med en rød marglinje oppå gir en troverdig notatbok. Flere mønsterideer, blant annet rutenett og prikker, finner du i CSS-mønstre.

Repeterende gradienter eller background-size

Du kan også lage striper med en vanlig linear-gradient() og background-size, som flislegger et lite bilde av gradienten. Begge virker. De oppfører seg ulikt i vinkler.

For alt som er diagonalt, gå til den repeterende versjonen først. For sjakkbrett og rutenett, der du trenger to retninger samtidig, er background-size med gradienter i lag enklere.

.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

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

Den andre fargen i sjakkbrettet starter på posisjon 0. Et stopp kan aldri ligge før det forrige, så nettleseren flytter det opp til der den forrige fargen sluttet, og det gir en skarp kant uten å gjenta tallet. Det er en praktisk snarvei i enhver gradient, repeterende eller ikke.

Ringer med repeating-radial-gradient()

Den radielle versjonen gjentas utover fra et sentrum, så striper blir ringer. Flytt sentrum med at for å lage krusninger som brer seg fra et hjørne. Som med radielle gradienter holder circle ringene runde; standardellipsen strekker dem etter boksen.

Stråler med repeating-conic-gradient()

Koniske gradienter sveiper rundt et punkt, så stoppene deres er vinkler. Velg en gjentakelse som går opp i 360, som 20, 30 eller 45 grader, ellers får den siste strålen en annen bredde enn resten. Hold de to fargene nær hverandre i valør til en bakgrunn; stråler med høy kontrast vibrerer på skjermen og trekker oppmerksomheten fra alt annet. Hele syntaksen står i koniske gradienter i CSS.

Slik fikser du hakkete stripekanter

Skarpe kanter i vinkel kan se trappete ut, og på noen zoomnivåer tegner nettlesere dem ujevnt, så noen striper ser tykkere ut enn andre. Løsningen er å gi hver kant en bitteliten overgang i stedet for et perfekt hopp.

/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}

En animert fremdriftslinje som en barberstang

Når du flytter background-position nøyaktig én gjentakelse, vandrer stripene uten hopp. For et mønster på 45 grader med en gjentakelse på 28px er avstanden langs den vannrette aksen gjentakelsen delt på sinus til vinkelen, omtrent 39,6 px.

.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

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

For større animerte bakgrunner, se animerte gradienter i CSS, som tar for seg billigere teknikker. Striper og ringer er flotte til detaljer, billetter og lastetilstander. For en bakgrunn folk kjenner igjen som din, tilfører Marks fra Gradiently materiale, lys og korn som et repeterende mønster ikke kan, og de gjengis i alle størrelser du designer i.