Generátor pozadia vzorov CSS

Väčšina nástrojov "generátora vzorov" ticho znova používa rovnaký vzorec opakujúceho sa lineárneho gradientu pre každú možnosť a len mení čísla. Toto nie: každý zo šiestich typov vzorov je vytvorený zo špecifickej techniky CSS, ktorá skutočne vytvára daný tvar. Prúžky používajú jeden opakujúci sa lineárny gradient s dvoma farebnými pásmi. Bodky používajú jeden radiálny prechod usporiadaný čisto cez veľkosť pozadia – klasický trik s bodkami CSS – namiesto opakujúceho sa radiálneho prechodu, ktorý nedokáže umiestniť kruhovú bodku čisto na obdĺžnikovú mriežku. Šachovnica používa skutočný vzorec štvorkvadrantového kužeľového gradientu: kužeľový gradient so stredom v štvorcovej dlaždici sa prirodzene rozdelí na štyri kvadrantové štvorce v 90-stupňových hraniciach a striedanie dvoch farieb cez tieto kvadrantové dlaždice do skutočnej šachovnice, nie aproximácie.

Mriežka a uhlopriečka šrafujú obe vrstvy dvoch opakujúcich sa lineárnych prechodov ako samostatné vstupy na pozadí obrazu, namiesto toho, aby predstierali druhý smer trikmi s okrajmi. Mriežka kombinuje opakujúci sa gradient „sprava“ a „dole“ pre ostré horizontálne a vertikálne čiary. Šrafovanie vrství opakujúci sa gradient +45° a -45° pre diagonálne tkanie v štýle košíkovej – stojí za to byť presný: ide o úprimnú šrafu, nie o skutočnú geometriu rybej kosti a nástroj to tak označuje skôr ako prehnané. Trojuholníky znovu používajú techniku ​​štvorklinového kužeľového gradientu šachovnice, ale začínajú gradient otočený o 45 stupňov, čím sa posúvajú hranice klinu zo stredových bodov okraja dlaždice do jej rohov a premenia rovnaké štyri kliny na štyri trojuholníky od rohu k rohu namiesto štyroch štvorcov kvadrantu.

Každý typ vzoru odhaľuje iba ovládacie prvky, ktoré sa naň skutočne vzťahujú – pre pruhy sa zobrazuje posúvač uhla, pre bodky sa zobrazuje polomer a rozstup bodov, pre mriežku a šrafovanie sa zobrazuje hrúbka čiary – a veľké pole ukážky s dlaždicami sa prekreslí pri každej zmene, takže pred potvrdením hodnoty môžete vidieť niekoľko úplných opakovaní. Prepnite výstupný režim na SVG a rovnaký vzor sa znova objaví ako prvok <pattern> vytvorený z jednoduchých obdĺžnikových, kruhových, cestných alebo mnohouholníkových primitív, pripravených na prilepenie do <defs> akéhokoľvek dokumentu SVG so stiahnutím samostatného súboru .svg jedným kliknutím.

Všetko beží lokálne vo vašom prehliadači: žiadne nahrávanie obrázkov, žiadna spiatočná cesta na server, žiadny účet. Pre plné alebo prechodové výplne bez opakovania je namiesto toho správnym nástrojom generátor CSS prechodov na tejto stránke; toto je špeciálne pre dlaždicové geometrické pozadia vytvorené z nulových obrázkov.