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ć…
Do podzielenia tekstu na kolumny wykorzystamy oczywiście polecenia dostępne w CSS 3 takie jak: column-count
, column-rule
, column-rule-style
, column-gap
itd..
Jak nietrudno się domyślić liczbę kolumn ustalamy za pomocą polecenia column-count
(przykład dla 3 kolumn):
column-count: 3;
Odstęp między poszczególnymi kolumnami wyznaczamy za pomocą stylu column-gap
:
column-gap: 20px;
Kolumny możemy również oddzielić od siebie jakimś obramowaniem. Używamy do tego celu column-rule-style
:
column-rule-style: solid;
Szerokość obramowanie ustawionego wyżej modyfikujemy poleceniem column-rule-width
:
column-rule-width: 1px;
Możemy również zmienić kolor za pomocą column-rule-color
:
column-rule-color: #D1D1D1;
Styl obramowania, jego szerokość oraz kolor można również ustawić poleceniem column-rule
:
column-rule: 1px solid #D1D1D1;
Przykłady
column-count: 3; column-gap: 20px;
Efekt:
column-count: 3; column-gap: 20px; column-rule:1px solid #D1D1D1;
Efekt:
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- |