CSS minta háttér generátor

A legtöbb "mintagenerátor" eszköz csendben újra felhasználja ugyanazt az ismétlődő-lineáris gradiens képletet minden beállításhoz, és csak megváltoztatja a számokat. Ez nem: az itt található hat mintatípus mindegyike a konkrét CSS-technikából épül fel, amely ténylegesen létrehozza az alakzatot. A csíkok egyetlen ismétlődő lineáris gradienst használnak két színsávval. A pontok egy sugárirányú színátmenetet használnak, amely pusztán háttérmérettel csempézett – a klasszikus CSS-pontok trükkje –, nem pedig egy ismétlődő radiális színátmenetet, amely nem tud egy kör alakú pontot tisztán csempézni egy téglalap alakú rácson. A sakktábla a valódi négykvadráns kúp-gradiens képletet használja: a négyszögletes lapkában középre állított kúpos gradiens természetesen négy négyzetre oszlik fel 90 fokos határoknál, és a két szín váltakozva ezeken a kvadránslapokon valódi sakktáblává válik, nem pedig közelítés.

A rács és az átlós sraffozás mindkét réteg két ismétlődő lineáris színátmenetet külön háttérkép-bejegyzésként képez, ahelyett, hogy szegélytrükkökkel hamisítaná meg a második irányt. A rács egy "jobbra" és egy "lefelé" ismétlődő színátmenetet kombinál az éles vízszintes és függőleges szabályvonalak érdekében. A Crosshatch egy +45 fokos és egy -45 fokos ismétlődő színátmenetet rétegez a kosárfonás stílusú átlós szövéshez – érdemes precíznek lenni: ez egy őszinte sraffozás, nem valódi halszálkás geometria, és az eszköz így címkézi, nem pedig túlköveteli. A háromszögek újrahasználják a sakktábla négyékes kúpos gradiens technikáját, de a gradienst 45 fokkal elforgatva kezdik, ami eltolja az ék határait a lapka élének felezőpontjaitól a sarkok felé, és ugyanazt a négy éket négy sarok-sarok háromszöggé alakítja négy negyed négyzet helyett.

Minden mintatípus csak azokat a vezérlőelemeket teszi elérhetővé, amelyek ténylegesen vonatkoznak rá – egy szögcsúszka jelenik meg a csíkoknál, a pont sugara és a térköz jelenik meg a pontoknál, a vonalvastagság jelenik meg a rácsnál és a sraffozásnál –, a nagy, csempézett előnézeti mező pedig minden változtatásnál újrafestődik, így több teljes ismétlést láthat, mielőtt elkötelezi magát egy érték mellett. Ha a kimeneti módot SVG-re állítja, ugyanaz a minta újra megjelenik egy sima rect, kör, útvonal vagy sokszög primitívekből felépülő <minta> elemként, amely készen áll bármely SVG-dokumentum <defs> fájljába történő beillesztésre, és egy kattintással letölthető egy önálló .svg fájl.

Minden helyileg fut a böngészőben: nincs képfeltöltés, nincs oda-vissza út a szerverre, nincs fiók. Az ismétlés nélküli tömör vagy színátmenetes kitöltésekhez a webhelyen található CSS-gradiensgenerátor a megfelelő eszköz. ez kifejezetten a nulla képelemekből épített, csempézhető geometriai hátterekhez készült.