Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

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-stylecolumn-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:

3-kolumny
column-count: 3;
column-gap: 20px;
column-rule:1px solid #D1D1D1;

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 ChromeFirefoxSafariOpera
-webkit--moz--webkit--webkit-

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, , , , ,

Dodaj komentarz

Odpowiedz

Twój adres e-mail nie zostanie opublikowany.

Pin It on Pinterest