CSS Achtergrondpatroon Generator

Een patroon in CSS wint van een patroon in een PNG

Elk patroon hier bestaat uit verlopen, dus het kost geen HTTP-verzoek, weegt een paar honderd bytes in plaats van een paar kilobyte, is scherp bij elke pixelverhouding, en verkleurt door één waarde te veranderen. Een PNG-tegel is dat allemaal niet: die heeft een verzoek nodig, ligt vast op één resolutie, en verkleuren betekent een fotobewerker openen. De statusregel hierboven toont het werkelijke aantal bytes van de regel, en dat is het hele argument in één getal.

De truc die ze kort houdt is de kleurstop met dubbele positie uit CSS Images 4: #000 0 4px zegt "zwart van 0 tot 4px" in één stop in plaats van twee. Een streep is dus repeating-linear-gradient(45deg, #000 0 4px, transparent 4px 16px) en niet de versie met vier stops die de meeste generatoren nog leveren.

Hoe elk patroon is opgebouwd

Strepen zijn één herhalend lineair verloop onder een hoek. Raster zijn er twee haaks op elkaar, en millimeterpapier zijn er vier: fijne lijnen op de tegelmaat en zwaardere lijnen om de vijf. Het zware paar staat als eerste, want de eerste laag in een lijst background-image ligt bovenop. Isometrisch zijn er drie, op 30, 150 en 90 graden, de isometrische assen plus de verticaal die de driehoeken sluit.

Stippen zijn een radiaal verloop dat door background-size getegeld wordt, en schaakbord is één conisch verloop met twee van zijn vier kwadranten ingekleurd, verreweg het kortste schaakbord dat er is. Zigzag zijn vier verlopen van 45 graden waarvan er twee via background-position een halve tegel verschoven zijn; zonder die verschuiving liggen ze over elkaar als kruisarcering in plaats van elkaar in de toppen te raken.

Veelvoorkomende problemen

• Het patroon verschuift als het element beweegt. Een achtergrond wordt gepositioneerd tegen de eigen padding box van het element, dus een patroon dat over twee vakken moet doorlopen heeft op allebei dezelfde oorsprong voor background-position nodig, of één gedeelde ouder.
• Dunne lijnen flikkeren tijdens het scrollen. Een lijn van 1px bij een pixelverhouding die geen heel getal is landt tussen fysieke pixels en wordt door de browser elk frame opnieuw uitgerekend. Gebruik een iets dikkere lijn, of een tegelmaat die een heel veelvoud van de verhouding is.
• Tekst over het patroon is lastig te lezen. Dat wordt het ook: een herhalend patroon met hoog contrast achter lopende tekst zakt ergens op de tegel voor contrast, wat het gemiddelde ook zegt. Zet de tekst op een dekkend vlak, of draai de dekking van de inkt flink omlaag.
• Het patroon lijkt een vlakke vulling. De lijndikte heeft de tegelmaat bereikt, dus er zijn geen tussenruimtes meer. Precies daarom stopt de schuif een halve pixel daarvoor.

Veelgestelde vragen

Kan ik een CSS-variabele voor de kleuren gebruiken?

Ja, en dat is de reden om dit boven een afbeelding te verkiezen. Vervang de hexwaarden door var(--pattern-ink) en het patroon volgt je thema, donkere modus inbegrepen, zonder tweede bestand en zonder JavaScript.

Zijn deze te animeren?

background-position animeert goedkoop en geeft je in drie regels een streep die als een kapperspaal doorloopt. Het verloop zelf animeren niet: verlopen interpoleren slecht en tekenen het hele element opnieuw. Animeer je hier iets, zet er dan een prefers-reduced-motion-vangnet omheen, want een bewegend herhalend patroon is een sterke vestibulaire prikkel.

Waarom gebruikt de Tailwind-uitvoer arbitraire properties?

bg-[image:…] bestaat wel maar kan geen lijst met lagen gescheiden door komma's dragen, en elk patroon voorbij strepen heeft die. De vorm met een arbitraire property is één blokhaak per declaratie en compileert precies naar de regel ernaast.

Kost een patroon prestaties?

Een statisch patroon niet: het wordt één keer getekend en met de rest van de laag bewaard. De kosten verschijnen als een heel kleine tegel een heel groot vlak bedekt op een zwak apparaat, en dat is het nakijken waard als je iets van 2px over een hero op volle pagina tegelt.