Dzielenie tekstu na kolumny w CSS 3

Nie od dziś wiadomo, że ludzkie oko bardziej przyzwyczajone jest do czytania tekstu podzielonego na kilka kolumn o małej szerokości. Takie rozwiązanie w kontekście projektowania stron internetowych ma oczywiście swoje plusy i minusy, ale czasami się sprawdza (choć niekoniecznie zawsze). Przyjrzyjmy się wiec jak to szybko i sprawnie zrobić…

Fot: markusspiske, CC0 Public Domain.

Fot: markusspiske, CC0 Public Domain.

Do podzielenia tekstu na kolumny wykorzystamy oczywiście polecenia dostępne w CSS 3 takie jak: column-count, column-rule, column-rule-stylecolumn-gap itd..

Jak nietrudno się domyślić liczbę kolumn ustalamy za pomocą polecenia column-count (przykład dla 3 kolumn):

Odstęp między poszczególnymi kolumnami wyznaczamy za pomocą stylu column-gap:

Kolumny możemy również oddzielić od siebie jakimś obramowaniem. Używamy do tego celu column-rule-style:

Szerokość obramowanie ustawionego wyżej modyfikujemy poleceniem column-rule-width:

Możemy również zmienić kolor za pomocą column-rule-color:

Styl obramowania, jego szerokość oraz kolor można również ustawić poleceniem column-rule:

Przykłady

Efekt:

3-kolumny

Efekt:

3-kolumny_1

Wsparcie w przeglądarkach

Internet Explorer 10 – pełne wsparcie.

Google Chrome 4.0 lub wyższy, Firefox 2.0 lub wyższy, Safari 3.1 lub wyższy, Opera 15.0 lub wyższa – wsparcie tylko z przedrostkami:

Google Chrome Firefox Safari Opera
-webkit- -moz- -webkit- -webkit-

, , , , ,