Tło ze wzorem siatki SVG

Z czego składa się tło ze wzorem

Wygenerowany plik zawiera jeden mały kafelek, zdefiniowany raz jako wzór, oraz prostokąt, który wypełnia płótno tym wzorem. Ponieważ przeglądarka powtarza kafelek, plik waży kilkaset bajtów niezależnie od tego, czy siatka ma 20, czy 2 000 komórek. Pierwszy prostokąt maluje kolor tła, a drugi maluje linie na wierzchu.

Każdy kafelek rysuje tylko swoją górną i lewą krawędź. Sąsiednie kafelki dostarczają resztę, więc żadna linia nie jest rysowana dwa razy. Jedna konsekwencja warta jest zapamiętania: linia w pierwszej kolumnie i pierwszym wierszu leży dokładnie na krawędzi płótna, więc połowa jej grubości wypada poza nie. Linia 1 px wygląda więc jak cienka, pół-pikselowa obwódka u góry i po lewej. Jeśli szerokość płótna jest dokładną wielokrotnością rozmiaru komórki, prawa i dolna krawędź kończą się bez linii zamykającej.

Wybieraj wartości, które działają jako tło

Tło ma wspierać tekst na nim położony. Te punkty startowe są bezpieczne:

Utrzymuj niski kontrast między liniami a tłem. Jeśli na wierzchu jest tekst główny, linia prawie tak ciemna jak tekst szybko męczy wzrok.

Przykład krok po kroku

Dla sekcji hero o szerokości 1200 px i wysokości 800 px komórka 40 px daje 30 kolumn i 20 wierszy, czyli 600 komórek. Ponieważ 1200 i 800 dzielą się przez 40, siatka kończy się czysto na obu krawędziach. Z komórką 50 px dostaniesz 24 na 16 komórek, również czysto. Komórka 45 px zostawiłaby częściową komórkę po prawej i na dole, bo 1200 podzielone przez 45 to 26,67.

Użycie wyniku

Wklej SVG bezpośrednio do znaczników, zapisz jako plik i odwołaj się do niego jako do obrazu albo umieść za treścią jako dekoracyjną warstwę. Pamiętaj, że kolor tła jest częścią SVG. Jeśli chcesz siatkę na innym kolorze, edytuj pierwszy prostokąt w skopiowanym kodzie.

Dopasuj tło do układu

Jeśli kolumna treści ma 960 px szerokości, komórka 32 px lub 40 px utrzyma siatkę i krawędzie kolumn w zgodzie, bo 960 dzieli się przez obie wartości. Wyrównanie siatki do układu sprawia, że linie wyglądają na zaprojektowane, a nie przypadkowe.