CSS-mønstergenerator

De fleste «mønstergenerator»-verktøy gjenbruker i all stillhet den samme repeating-linear-gradient-formelen for hvert alternativ og bare endrer tallene. Dette gjør ikke det: hver av de seks mønstertypene her er bygget med den spesifikke CSS-teknikken som faktisk lager den formen. Striper bruker en enkelt repeating-linear-gradient med to fargebånd. Prikker bruker én radial-gradient som flislegges utelukkende via background-size — det klassiske CSS-prikk-trikset — i stedet for en repeating-radial-gradient, som ikke kan flislegge en sirkulær prikk rent på et rektangulært rutenett. Sjakkbrett bruker den ekte fire-kvadrant conic-gradient-formelen: en conic-gradient sentrert i en firkantet flis deler seg naturlig opp i fire kvadrant-firkanter ved 90-graders grenser, og ved å veksle to farger over disse kvadrantene flislegges det til et ekte sjakkbrett, ikke en tilnærming.

Rutenett og diagonal kryss-skravering legger begge to repeating-linear-gradients lagvis som separate background-image-oppføringer i stedet for å jukse den andre retningen med border-triks. Rutenett kombinerer en «to right» og en «to bottom» repeterende gradient for skarpe horisontale og vertikale linjer. Kryss-skravering legger en +45° og en -45° repeterende gradient lagvis for en flettemønsteraktig diagonal vev — verdt å være presis om: dette er en ærlig kryss-skravering, ikke ekte sildebensgeometri, og verktøyet kaller det dét i stedet for å overdrive. Trekanter gjenbruker sjakkbrettets fire-kile conic-gradient-teknikk, men starter gradienten rotert 45 grader, noe som flytter kilegrensene fra flisens kantmidtpunkter til hjørnene og gjør de samme fire kilene om til fire hjørne-til-hjørne-trekanter i stedet for fire kvadrant-firkanter.

Hver mønstertype viser bare kontrollene som faktisk gjelder for den — en vinkelglidebryter dukker opp for striper, prikkradius og avstand dukker opp for prikker, linjetykkelse dukker opp for rutenett og kryss-skravering — og den store flislagte forhåndsvisningsboksen males på nytt ved hver endring, slik at du kan se flere fulle repetisjoner før du bestemmer deg for en verdi. Bytt utdatamodus til SVG, og det samme mønsteret dukker opp igjen som et <pattern>-element bygget av enkle rect-, circle-, path- eller polygon-primitiver, klart til å limes inn i et hvilket som helst SVG-dokuments <defs>, med ett-klikks nedlasting for en frittstående .svg-fil.

Alt kjøres lokalt i nettleseren din: ingen bildeopplastinger, ingen rundtur til server, ingen konto. For ensfargede eller gradientfylte bakgrunner uten gjentakelse er CSS-gradientgeneratoren på dette nettstedet det riktige verktøyet i stedet; dette er spesifikt for flislagte geometriske bakgrunner bygget fra null bilde-ressurser.