CSS-mønsterbaggrundsgenerator

De fleste "mønstergenerator"-værktøjer genbruger stille og roligt den samme gentagende-lineære-gradient-formel for hver mulighed og ændrer bare tallene. Denne gør det ikke: Hver af de seks mønstertyper her er bygget ud fra den specifikke CSS-teknik, der faktisk producerer den form. Striber bruger en enkelt gentaget-lineær-gradient med to farvebånd. Prikker bruger en radial-gradient, der er flisebelagt udelukkende gennem baggrundsstørrelsen - det klassiske CSS-dots-trick - snarere end en gentagen-radial-gradient, som ikke kan flise en cirkulær prik rent på et rektangulært gitter. Checkerboard bruger den rigtige fire-kvadrant keglegradient-formel: en konisk gradient centreret i en firkantet flise opdeles naturligt i fire kvadrantfirkanter ved 90-graders grænser og skifter to farver hen over disse kvadrantsbrikker til et ægte skakternet, ikke en tilnærmelse.

Gitter og diagonal krydsskravering har begge to gentagende lineære gradienter som separate baggrundsbilleder i stedet for at forfalske den anden retning med kanttricks. Gitter kombinerer en "til højre" og en "til bund" gentagende gradient for skarpe vandrette og lodrette linelinjer. Crosshatch lægger en +45 grader og en -45 graders gentagelsesgradient til en diagonal vævning i kurvevævning - værd at være præcis om: dette er en ærlig krydsskravering, ikke ægte sildebensgeometri, og værktøjet mærker det på den måde i stedet for at overkrave. Trekanter genbruger skakternets fire-kile kegle-gradient-teknik, men starter gradienten roteret 45 grader, hvilket flytter kilegrænserne fra flisens kantmidtpunkter til dens hjørner og forvandler de samme fire kiler til fire hjørne-til-hjørne trekanter i stedet for fire kvadrantfirkanter.

Hver mønstertype afslører kun de kontroller, der faktisk gælder for den - en vinkelskyder vises for striber, prikkeradius og mellemrum vises for prikker, linjetykkelse vises for gitter og krydsskravering - og den store flisebelagte forhåndsvisningsboks genmales ved hver ændring, så du kan se flere fulde gentagelser, før du forpligter dig til en værdi. Vend output-tilstanden til SVG, og det samme mønster dukker op igen som et <pattern>-element bygget af almindelige rect-, cirkel-, sti- eller polygonprimitiver, klar til at indsætte i ethvert SVG-dokuments <defs> med et enkelt-klik-download for en selvstændig .svg-fil.

Alt kører lokalt i din browser: ingen billedoverførsel, ingen server tur-retur, ingen konto. For solide eller gradientfyldninger uden gentagelser er CSS gradientgeneratoren på denne side det rigtige værktøj i stedet; denne er specifikt til geometriske baggrunde, der kan flises, bygget fra nul billedaktiver.