Repeating linear gradient i CSS: striber, ringe og mønstre

En repeating linear gradient i CSS gentager et kort stykke farvestop langs en linje, indtil elementet er fyldt. Skriv repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px), og du får diagonale lyserøde striber på 14 pixel hver, uden en billedfil. Længden af én gentagelse bestemmes af det sidste stop, her 28px. Brug samme idé med repeating-radial-gradient() til ringe og repeating-conic-gradient() til stråler.

Sådan virker repeating-linear-gradient()

Syntaksen er identisk med en almindelig linear gradient. Forskellen er, hvad der sker efter det sidste stop: i stedet for at holde den sidste farve starter browseren mønstret forfra. To regler gør det meste af arbejdet.

• Den sidste stopposition er fliselængden. Stop ved 0, 14px og 28px gentages hver 28. pixel.
• To farver på samme position giver en hård kant. #f472b6 0 14px, #fdf2f8 14px 28px hopper fra lyserød til blegt lyserød ved 14px uden blanding.
• Hvert stop kan have to positioner. #f472b6 0 14px betyder ensfarvet lyserød fra 0 til 14px, hvilket er kortere end at skrive farven to gange.
• Brug længder, ikke procenter, til striber. Procenter er relative til gradientlinjen, så striberne strækkes, når elementet ændrer 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); }

Stribemønstre til at kopiere

Linjeret papir er et godt eksempel på en asymmetrisk gentagelse: 22 pixel papir, én pixel streg. Samme mønster med en rød marginlinje oven på giver en overbevisende notesbog. Flere mønsteridéer, blandt andet gitre og prikker, findes i CSS-mønstre.

Repeating gradienter eller background-size

Du kan også lave striber med en almindelig linear-gradient() og background-size, som lægger små billeder af gradienten som fliser. Begge dele virker. De opfører sig forskelligt i vinkler.

Til alt diagonalt skal du gribe efter den gentagende version først. Til skakternet og gitre, hvor du skal bruge to retninger på én gang, er background-size med lagdelte gradienter 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;
}

Skakternets anden farve starter ved position 0. Et stop kan aldrig ligge før det forrige, så browseren flytter det op til det sted, hvor den sidste farve sluttede, hvilket giver en hård kant uden at gentage tallet. Det er en praktisk genvej i enhver gradient, gentagende eller ej.

Ringe med repeating-radial-gradient()

Den radiale version gentages udad fra et center, så striber bliver til ringe. Flyt centret med at for at lave krusninger, der spreder sig fra et hjørne. Som med radiale gradienter holder circle ringene runde; standardellipsen strækker dem til boksen.

Stråler med repeating-conic-gradient()

Koniske gradienter fejer rundt om et punkt, så deres stop er vinkler. Vælg en gentagelse, der går op i 360, som 20, 30 eller 45 grader, ellers får den sidste stråle en anden bredde end resten. Hold de to farver tæt på hinanden i værdi til en baggrund; stråler med høj kontrast vibrerer på skærmen og tager opmærksomheden fra alt andet. Den fulde syntaks står i koniske CSS-gradienter.

Sådan retter du hakkede stribekanter

Hårde kanter i en vinkel kan se trappede ud, og ved nogle zoomniveauer renderer browsere dem ujævnt, så nogle få striber ser tykkere ud end andre. Løsningen er at give hver kant en bitte lille overgang i stedet for et perfekt spring.

/* 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 animeret frisørstang som statusbjælke

Når du flytter background-position præcis én gentagelse, vandrer striberne uden et hop. For et mønster på 45 grader med en gentagelse på 28px er afstanden langs den vandrette akse gentagelsen divideret med sinus til vinklen, cirka 39,6px.

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

Til større animerede baggrunde, se animerede CSS-gradienter, som dækker billigere teknikker. Striber og ringe er fantastiske til detaljer, billetter og indlæsningstilstande. Til en baggrund, folk genkender som din, tilføjer Gradiently-Marks materiale, lys og korn, som et gentaget mønster ikke kan, og de renderes i enhver størrelse, du designer i.