HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Здесь доступны те же значения, что и для атрибутов стиля, задающих толщину линий рамки и выделения (см. главу 11).

Листинг П6 иллюстрирует пример.

Листинг П6

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px;

— moz-column-gap: 5mm;

— webkit-column-gap: 5mm;

— moz-column-rule-width: thin;

— webkit-column-rule-width: thin }

Теперь между колонками в контейнере cmain будут проведены тонкие линии.

Расширения CSS — moz-column-rule-style (Firefox) и — webkit-column-rule-style (Web-обозреватели на программном ядре Webkit) задают стиль линий, которыми колонки будут отделяться друг от друга:

— moz-column-rule-style|-webkit-column-rule-style:

none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

Здесь доступны те же значения, что и для атрибутов стиля, задающих стиль линий рамки и выделения (см. главу 11).

Листинг П7 иллюстрирует пример.

Листинг П7

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px;

— moz-column-gap: 5mm;

— webkit-column-gap: 5mm;

— moz-column-rule-width: thin;

— webkit-column-rule-width: thin;

— moz-column-rule-style: dotted;

— webkit-column-rule-style: dotted }

Теперь между колонками в контейнере cmain будут проведены тонкие точечные линии.

Расширения CSS — moz-column-rule-color (Firefox) и — webkit-column-rule-color

(Web-обозреватели на программном ядре Webkit) задают цвет линий, которыми колонки будут отделяться друг от друга:

— moz-column-rule-color|-webkit-column-rule-color: <цвет линий между колонками>

Листинг П8 иллюстрирует пример.

Листинг П8

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px;

— moz-column-gap: 5mm;

— webkit-column-gap: 5mm;

— moz-column-rule-width: thin;

— webkit-column-rule-width: thin;

— moz-column-rule-style: dotted;

— webkit-column-rule-style: dotted;

— moz-column-rule-color: #B1BEC6;

— webkit-column-rule-color: #B1BEC6 }

Теперь между колонками в контейнере cmain будут проведены тонкие точечные линии светло-синего цвета.

Расширения CSS — moz-column-rule (Firefox) и — webkit-column-rule (Web- обозреватели на программном ядре Webkit) задают сразу все параметры линий, которыми колонки будут отделяться друг от друга:

— moz-column-rule|-webkit-column-rule: <толщина> <стиль> <цвет>

Листинг П9 иллюстрирует пример.

Листинг П9

#cmain { — moz-column-count: 2;

— webkit-column-count: 2;

— moz-column-width: 300px;

— webkit-column-width: 300px;

— moz-column-gap: 5mm;

— webkit-column-gap: 5mm;

— moz-column-rule: thin dotted #B1BEC6;

— webkit-column-rule: thin dotted #B1BEC6 }

К сожалению, Opera на данный момент не поддерживает многоколоночную верстку. А жаль…

Преобразования CSS

В главе 22, ведя разговор о канве и программном рисовании на ней, мы узнали о преобразованиях системы координат. С помощью особых расширений CSS мы можем проделать аналогичные действия над любым элементом Web-страницы: сместить его, повернуть, растянуть или сжать.

Для указания, какие именно преобразования следует выполнить над элементом Web-страницы, служат расширения CSS — moz-transform (Firefox), — o-transform (Opera) и — webkit-transform (Web- обозреватели на программном ядре Webkit):

— moz-transform|-o-transform|-webkit-transform: <преобразование>

Доступных преобразований не так уж и много. Сейчас мы их рассмотрим. Преобразование rotate позволяет повернуть элемент Web-страницы на указанный угол по часовой стрелке:

rotate(<угол>)

Значение угла может быть задано в трех единицах измерения: градусах, радианах и градах. Если требуется указать угол в радианах, после самого числового значения угла ставят обозначение deg, в радианах — rad, в градах — grad. При этом между числом и обозначением единицы измерения угла не должно быть пробелов.

Здесь мы поворачиваем контейнер cheader на 3,14 радиан (примерно 180?):

#cheader { — moz-transform: rotate(3.14rad);