TAAT Technologie Cyfrowe

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śćwysokość to  dowolne poziome i pionowe wymiary siatki w pikselach a kolorkolortł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

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.

Więcej informacji