Урок №11 Многоколонен дизайн - 26 October 2014

Home » » Урок №11 Многоколонен дизайн

10:31 PM

Урок №11 Многоколонен дизайн

Многоколонен дизайн в CSS3

Чрез CSS3, можете да създавате многоколонен дизайн - като във вестник.

В този урок ще научите следните свойства за многоколонния дизайн:

column-count
column-gap
column-rule

Поддържащи браузъри

Цифрите в таблицата определят най-ниската версия на браузъра която напълно поддържа това CSS3 свойство.

Числата след които има -webkit-, -moz-, или -o- определят първата версия която е работа с префикс.

Свойство
column-count	10.0	4.0 -webkit-	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-gap	10.0	4.0 -webkit-	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule	10.0	4.0 -webkit-	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1

Създаване на многоколонен дизайн в CSS3

Свойството column-count задава броя на колоните в които елемента трябва да бъде разделен:

Пример

Разделяне на текста в div елемент в три колони:

div {

    -webkit-column-count: 3; /* Chrome, Safari, Opera */

    -moz-column-count: 3; /* Firefox */

    column-count: 3;

}

Задаване на разстоянието (Gap) между колоните в CSS3

Свойството column-gap задава разстоянието между колоните:

Пример

Задаване на разстояние 40pixels между колоните:

div {

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */

    -moz-column-gap: 40px; /* Firefox */

    column-gap: 40px;

}

Разделителни линии на колоните в CSS3

Свойството column-rule задава широчината (width), стила (style), и цвета (color) в разделителните линии на колоната:

Пример

Задава width(широчина),style(стил) и color(цвят) на разделителните линии в колоната:

div {

    -webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */

    -moz-column-rule: 3px outset #ff00ff; /* Firefox */

    column-rule: 3px outset #ff00ff;

}

Свойства на многоколонен дизайн в CSS3

Следващата таблица разглежда всички свойства на многоколонния дизайн в CSS3:

Свойство	Описание	CSS
column-count	Задава броя на колоните в които трябва да бъде разделен елемента	3
column-fill	Задава начина по който трябва да бъдат запълнени колоните (фоновия цвят)	3
column-gap	Задава разстоянието между колоните	3
column-rule	Шорткод който прилага всички свойства от свойството column-rule-*	3
column-rule-color	Задава цвета на разделителната линия в колоната	3
column-rule-style	Задава стила на разделителната линия в колоната	3
column-rule-width	Задава широчината на разделителната линия в колоната	3
column-span	Задава броя на колоните които елемент трябва да обхваща	3
column-width	Задава широчината на колоните	3
columns	Шорткод който прилага всички свойства от column-width и column-count	3

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :

Всички коментари: 0