Generator tła wzorców CSS

Większość narzędzi do „generowania wzorów” po cichu wykorzystuje tę samą formułę powtarzalnego gradientu liniowego dla każdej opcji i po prostu zmienia liczby. Ten nie: każdy z sześciu typów wzorców jest zbudowany na podstawie określonej techniki CSS, która faktycznie tworzy ten kształt. Paski wykorzystują pojedynczy powtarzający się gradient liniowy z dwoma paskami kolorów. Kropki wykorzystują jeden gradient promieniowy rozłożony wyłącznie na rozmiar tła — klasyczna sztuczka z kropkami CSS — zamiast powtarzającego się gradientu promieniowego, który nie pozwala na czyste rozmieszczenie okrągłej kropki na prostokątnej siatce. Szachownica wykorzystuje prawdziwą formułę czterokwadrantowego gradientu stożkowego: stożkowy gradient wyśrodkowany na kwadratowej płytce w naturalny sposób dzieli się na cztery ćwiartki kwadratów pod kątem 90 stopni i naprzemiennie dwa kolory w tych ćwiartkach płytek, tworząc prawdziwą szachownicę, a nie przybliżenie.

Zarówno siatki, jak i ukośne kreskowania nakładają dwa powtarzające się gradienty liniowe jako osobne wpisy obrazu tła, zamiast udawać drugi kierunek za pomocą sztuczek z obramowaniem. Siatka łączy powtarzający się gradient „w prawo” i „w dół”, zapewniając wyraźne poziome i pionowe linie linijek. Kreskowanie nakłada warstwy powtarzającego się gradientu +45 stopni i -45 stopni dla splotu ukośnego w stylu koszykowego splotu — warto zachować precyzję: jest to uczciwy kreskowanie, a nie prawdziwa geometria w jodełkę, a narzędzie określa to w ten sposób, a nie zawyża. Trójkąty ponownie wykorzystują technikę czteroklinowego gradientu stożkowego szachownicy, ale gradient rozpoczyna się obrócony o 45 stopni, co przesuwa granice klinów ze środków krawędzi płytki do jej rogów i zamienia te same cztery kliny w cztery trójkąty od narożnika do rogu zamiast czterech ćwiartek kwadratów.

Każdy typ wzoru udostępnia tylko elementy sterujące, które go faktycznie dotyczą — suwak kąta jest wyświetlany w przypadku pasków, promień i odstępy punktów są wyświetlane w przypadku kropek, grubość linii jest wyświetlana w przypadku siatki i kreskowania — a duże kafelkowe okno podglądu jest odświeżane przy każdej zmianie, dzięki czemu można zobaczyć kilka pełnych powtórzeń przed zatwierdzeniem wartości. Przełącz tryb wyjściowy na SVG, a ten sam wzór pojawi się ponownie jako element <pattern> zbudowany ze zwykłych prymitywów prostokątnych, okręgów, ścieżek lub wielokątów, gotowy do wklejenia w <defs> dowolnego dokumentu SVG, z możliwością pobrania jednym kliknięciem w celu uzyskania samodzielnego pliku .svg.

Wszystko działa lokalnie w Twojej przeglądarce: bez przesyłania obrazów, bez przełączania serwera w obie strony, bez konta. W przypadku wypełnień pełnych lub gradientowych bez powtórzeń właściwym narzędziem będzie generator gradientów CSS dostępny na tej stronie; ten jest przeznaczony specjalnie dla geometrycznych teł, które można układać w kafelki, zbudowanych z zerowych zasobów graficznych.