Witaj Gościu Zaloguj się lub zarejestruj się.
Zaloguj

Układ treści prosto z gazet, czyli kolumny w CSS3

Układ treści prosto z gazet, czyli kolumny w CSS3

Strony internetowe wraz z czasem ewoluują. Na nowych witrynach widzimy co raz więcej animacji i ciekawych rozwiązań wkomponowanych w szaty graficzne, które można nazwa dziełami sztuki. Dzieje się to za sprawą rozwoju technologii jak np. CSS3.

Jednym z ciekawszych pomysłów na blogach jest stworzenie układów wielokolumnowych. Ciekawa koncepcja, jednak jak to zrealizować? Dowiedz się jak zrobić to najprościej.

Kilka słów zanim zaczniemy

Układy wielokolumnowe są stosunkową nowością w świecie tworzenia stron internetowych, ponieważ zostały wprowadzone w specyfikacji CSS3. Oznacza to, że ich wsparcie jest aktualnie stosunkowo niewielkie, dlatego ten wpis i realizowany za jego pomocą przykład należy traktować jako przedstawienie możliwości najnowszej wersji języka CSS. Tak więc nie należy stosować go w środowisku produkcyjnym (chyba, że z odpowiednimi fallbackami o których wspomnę później).

"Stosunkowo niewielkie" wsparcie zapewne nic Ci nie mówi. Oto jak przedstawia się sytuacja na dzień dzisiejszy:



Układ wielokolumnowy - o co chodzi?

Koncepcja prosta, jednak nie dla wszystkich. Chodzi o układ, który występuje w magazynach i gazetach. Z powodu ograniczonego miejsca (oraz by uniknąć treści na całą szerokość) , artykuły są prezentowane w kolumnach. Ma to jeszcze dodatkowe zadanie - całość wygląda bardziej estetycznie. Oto obraz prezentujący taki układ:

Przykład zastosowania kolumn w CSS3

Idea

Ktoś bystry mógłby zadać tutaj pytanie - A czym się różni układ kolumnowy od trzech osobnych kontenerów DIV? Odpowiedź jest bardzo prosta - w przypadku użycia kolumn, nasza treść jest rozprowadzana po wszystkich kolumnach - tzn. treść wypełnia pierwszą kolumnę, później drugą i trzecią. Co najważniejsze, robi to inteligentnie, czyli tak, aby wszystkie trzy miały bardzo zbliżoną lub identyczną wysokość. Natomiast w przypadku trzech osobnych kontenerów, to my musimy zadbać o te wszystkie problemy.

Atrybuty i właściwości

Zacznijmy od poznania właściwości i atrybutów, jakie możemy aplikować do tworzonych kolumn:

Ostrzeżenie Ostrzeżenie Jak wcześniej wspomniałam, na obecną chwilę jest to eksperymentalna właściwość, dlatego aby zapewnić poprawność działania na przeglądarkach Google Chrome, Safari i Firefox należy dodać przedrostki odpowiednio -webkit dla pierwszych dwóch i -moz dla ostatniej.

Jak widzisz, to wszystko, co potrzebujemy do wykonania naszych kolumn. Przejdźmy teraz do rzeczy i wykonajmy ten układ. Oto kod, który musimy do tego celu użyć:

Jak widzisz, użyliśmy tylko dwóch właściwości. To dlatego, że w naszym przypadku nie chcemy obramowania kolumn. Nic jednak nie stoi na przeszkodzie, abyś ty ich użył - stosuje się je bardzo podobnie jak przy właściwości border:

Podobnie jest z column-width. Tak więc masz wszystkie potrzebne Ci informacje. Został już tylko jeden atrybut, którego dotychczas nie użyliśmy - column-span. Postanowiłam go omówić, ponieważ wbrew pozorom bardzo niewielka liczba osób miała do czynienia atrybutami colspan w tabelach. Oto przykładowe użycie:

Powyższy kod sprawia, że w naszym układzie kolumnowym element H1 będzie miał szerokość wszystkich 3 kolumn. Niestety, ten atrybut może przyjmować tylko dwie wartości: none albo all - nie ma możliwości wykonania szerokości np. 2 z 3 kolumn. Proste, prawda? W takim razie pozostał jeszcze HTML, za pomocą którego możemy całość wykonać:



Ciekawostka Ciekawostka W powyższym kodzie HTML znaczniki P służą tylko do odpowiedniego formatowania tekstu (kolor, wielkość czcionki, odstępy) a nie do tworzenia kolumn. Oznacza to, że bez nich również pojawią nam się trzy kolumny. Warto o tym wspomnieć, ponieważ niektóre osoby błędnie kojarzą te elementy z kolumnami.

Podsumowując

CSS3 wprowadza banalnie prostą metodę tworzenia układów wielokolumnowych. Te zaś (moim zdaniem) są przyszłością w Internecie. Myślę, że nie później niż za rok lub dwa bardzo wiele blogów będzie używało tego systemu w swoich motywach. A Ty, co na ten temat uważasz? Czy ta właściwość się przyjmie, czy to tylko kolejna bzdura? Nie zapomnij się podzielić w komentarzach swoją opinią!

Pliki źródłoweDemo

Inne wpisy, które mogą Cię zainteresować

Poniżej przedstawiamy Ci propozycje innych wpisów, które mogą Cię zainteresować. Sprawdź, czytaj i poszerzaj swoją wiedzę.


Czytaj
Najczęściej popełniane błędy przy tworzeniu menu nawigacyjnych

Najczęściej popełniane błędy przy tworzeniu menu nawigacyjnych

Czytaj
PHP 5.4, czyli nowe funkcjonalności, zmiany i poprawki

PHP 5.4, czyli nowe funkcjonalności, zmiany i poprawki

Czytaj
Rejestracja domen. Gdzie najtaniej?

Rejestracja domen. Gdzie najtaniej?

Czytaj
Odkrywamy tajemnice CSS - Operator + (plus) w stylach

Odkrywamy tajemnice CSS - Operator + (plus) w stylach

Komentarze do tego wpisu


comments powered by Disqus