CSS mintás háttér generátor

A legtöbb „mintagenerátor” eszköz észrevétlenül ugyanazt a repeating-linear-gradient képletet használja minden opcióhoz, és csak a számokat változtatja. Ez nem ilyen: itt mind a hat mintatípus az adott formát ténylegesen előállító CSS-technikára épül. A csíkok egyetlen repeating-linear-gradientet használnak két színsávval. A pöttyök egyetlen radial-gradientet alkalmaznak, amelyet pusztán a background-size csempéz – ez a klasszikus CSS-pötty trükk –, nem pedig repeating-radial-gradientet, amely a kör alakú pöttyöket nem tudná tisztán csempézni egy téglalap alapon. A sakktábla a valódi négykvadránsos conic-gradient képletet használja: egy négyzet csempében középre helyezett kúpos gradiens természetes módon négy kvadráns négyzetre oszlik a 90°-os határoknál, és a két szín váltakoztatása ezeken a kvadránsokon valódi sakktáblává áll össze, nem közelítéssé.

A rács és az átlós keresztrács egyaránt két repeating-linear-gradientet rétegez különálló background-image bejegyzésekként, ahelyett hogy border trükkökkel hamisítaná a második irányt. A rács egy „jobbra” és egy „lefelé” ismétlődő gradient rétegez az éles vízszintes és függőleges vonalakért. A keresztrács egy +45°-os és egy -45°-os ismétlődő gradient rétegez, ami kosárfonásszerű átlós szövést eredményez – érdemes pontosnak lenni: ez egy valódi keresztrács, nem valódi halszálka geometria, és az eszköz így is címkézi, nem állít többet. A háromszögek a sakktábla négyék alakú kúpos gradiens technikáját használják, de a gradient 45°-kal elforgatva indul, ami az ékek határait a csempe éleinek középpontjaitól a sarkok felé tolja, és ugyanazokat a négy éket négy saroktól sarokig érő háromszöggé alakítja négy kvadráns négyzet helyett.

Minden mintatípus csak a ténylegesen alkalmazható vezérlőket mutatja – a csíkoknál megjelenik egy szögcsúszka, a pöttyöknél a pötty sugara és a távolság, a rácsnál és keresztrácsnál a vonalvastagság –, és a nagy csempés előnézeti doboz minden változtatásra frissül, így több teljes ismétlődést is láthat, mielőtt végelegesítene egy értéket. Váltson a kimeneti módot SVG-re, és ugyanaz a minta jelenik meg <pattern> elemként, amelyet egyszerű rect, circle, path vagy polygon primitívekből építünk fel, készen arra, hogy bármely SVG dokumentum <defs> szakaszába beillessze, egy kattintásos letöltéssel egy önálló .svg fájlhoz.

Minden helyben, a böngészőjében fut: nincs képfeltöltés, nincs szerveroldali kérés, nincs fiók. Egyszínű vagy gradiens kitöltésekhez ismétlés nélkül az oldalon található CSS gradiens generátor a megfelelő eszköz; ez kifejezetten ismétlődő geometriai hátterekhez készült, amelyek nulla képből épülnek fel.