Generátor pozadí vzorů CSS

Většina nástrojů "generátoru vzorů" tiše znovu používá stejný vzorec opakujícího se lineárního gradientu pro každou možnost a pouze mění čísla. Tento ne: každý ze šesti typů vzorů zde je vytvořen ze specifické techniky CSS, která skutečně vytváří daný tvar. Pruhy používají jeden opakující se lineární gradient se dvěma barevnými pruhy. Tečky používají jeden radiální přechod dlaždicově čistě přes velikost pozadí – klasický trik s tečkami CSS – spíše než opakující se radiální přechod, který nemůže na obdélníkové mřížce čistě vyskládat kruhový bod. Šachovnice používá skutečný čtyřkvadrantový vzorec kuželového přechodu: kuželový přechod se středem ve čtvercové dlaždici se přirozeně rozdělí na čtyři čtverce kvadrantů na hranicích 90 stupňů a střídání dvou barev na těchto dlaždicích kvadrantů do skutečné šachovnice, nikoli aproximace.

Mřížka a diagonální šrafování obě vrstvy dvě opakující se lineární přechody jako samostatné položky obrázku na pozadí namísto předstírání druhého směru triky s okrajem. Mřížka kombinuje opakující se přechod „doprava“ a „dolů“ pro ostré horizontální a vertikální čáry. Šrafování vrství opakující se gradient +45° a -45° pro diagonální vazbu ve stylu košíkové – stojí za to být přesný: jedná se o poctivou křížovou šrafu, nikoli o pravou rybí geometrii a nástroj to tak spíše označuje, než aby přeháněl. Trojúhelníky znovu používají techniku ​​čtyřklínového kuželového přechodu šachovnice, ale začínají gradient otočený o 45 stupňů, což posouvá hranice klínu ze středních bodů hran dlaždice do jejích rohů a přeměňuje stejné čtyři klíny na čtyři trojúhelníky od rohu k rohu namísto čtyř čtverců kvadrantu.

Každý typ vzoru odhaluje pouze ovládací prvky, které se na něj skutečně vztahují – úhlový posuvník se zobrazuje pro pruhy, poloměr bodu a mezery se zobrazují pro body, tloušťka čáry se zobrazuje pro mřížku a šrafování – a velké dlaždicové pole náhledu překresluje při každé změně, takže před potvrzením hodnoty můžete vidět několik úplných opakování. Přepněte výstupní režim na SVG a stejný vzor se znovu objeví jako prvek <pattern> vytvořený z jednoduchých obdélníkových, kruhových, cest nebo mnohoúhelníkových primitiv, připravený k vložení do <defs> jakéhokoli dokumentu SVG, se stažením jedním kliknutím pro samostatný soubor .svg.

Vše běží lokálně ve vašem prohlížeči: žádné nahrávání obrázků, žádná zpáteční cesta na server, žádný účet. Pro plné nebo přechodové výplně bez opakování je namísto toho správným nástrojem generátor přechodů CSS na tomto webu; toto je speciálně pro dlaždicová geometrická pozadí vytvořená z nulových obrazových podkladů.