Siatka tła w CSS
Każdy dobry projektant wie, jak ważne jest używanie siatki i trzymanie dobrego rytmu. Liczne programy graficzne pozwalają na przyciąganie obiektów do siatki. Ale ostatecznie, projekt strony musi być pocięty i ponownie złożony przy użyciu CSS. Nie spotkałem jednak jeszcze edytora tekstowego (bo takich używają koderzy) z opcją siatki.
Siatka jako tło CSS
Najprostszy sposób na posiadanie siatki to użycie obrazka tła z liniami i powtórzenie go jako tło wielokrotnie obok siebie. Na przykład:
#element {background: obrazek_siatki.gif;}
Ale jest jeszcze jeden orzech do zgryzienia: obrazek siatki każdorazowo trzeba przygotować własnoręcznie w programie graficznym…
Moje sprytne tło
Oto proste, ale efektywne rozwiązanie którego używam. Przygotowałem dynamiczną bibliotekę obrazków tła z siatką. Obrazki są przechowywane w http://taat.pl/grid/. Nazwy obrazków mają następujący format:
szerokość_wysokość_kolor_kolortła.gif
szerokość i wysokość to dowolne poziome i pionowe wymiary siatki w pikselach a kolor i kolortła to tradycyjne wartości kolorów w HTML.
kolortła to część opcjonalna. Jeśli ją pominąć, tło będzie przezroczyste.
Przykłady
- Przykład 1 — czerwona siatka z przezroczystym tłem, 16×16 pikseli:
http://taat.pl/grid/16x16_red.gif - Przykład 2 — żółta siatka z czarnym tłem, 200×100 pikseli:
http://taat.pl/grid/200x100_yellow_000000.gif - Przykład 3 — szara siatka z przezroczystym tłem, 100×18 pikseli:
http://taat.pl/grid/100x18_ccc_transparent.gif - Przykład 4 — dwie siatki jednocześnie: wyznaczenie interlinii i złotego podziału kolumny.
- oraz dowolne inne wymiary i kolory
Takiej siatki używam w czasie projektowania używając kodu CSS na wzór poniższego:
html {background: url(http://taat.pl/grid/16x16_lightgray.gif);} Przykład praktyczny
Najlepiej zobaczyć jak siatka działa w praktyce.