Значение auto возвращает управление шириной колонок Web-обозревателю. Листинг П4 иллюстрирует пример.
Листинг П4
#cmain { — moz-column-count: 2;
— webkit-column-count: 2;
— moz-column-width: 300px;
— webkit-column-width: 300px }
Задаем для контейнера cmain ширину колонок в 300 пикселов.
Расширения CSS — moz-column-gap (Firefox) и — webkit-column-gap (Web-обозреватели на программном ядре Webkit) задают ширину пространства между колонками:
— moz-column-gap|-webkit-column-gap: <ширина пространства между колонками>|normal
Значение normal задает ширину пространства между колонками по умолчанию. Ее величина зависит от Web-обозревателя.
Листинг П5 иллюстрирует пример.
Листинг П5
#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 }
В листинге П5 задаем для контейнера cmain ширину пространства между колонками 5 мм.
Расширения CSS — moz-column-rule-width (Firefox) и — webkit-column-rule-width (Web-обозреватели на программном ядре Webkit) задают толщину линий, которыми колонки будут отделяться друг от друга:
— moz-column-rule-width|-webkit-column-rule-width: thin|medium|thick|<толщина линий между колонками>
Здесь доступны те же значения, что и для атрибутов стиля, задающих толщину линий рамки и выделения (см. главу 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);
— o-transform: rotate(3.14rad);
— webkit-transform: rotate(3.14rad) }
А здесь будет выполнен поворот контейнера cheader на 30º:
#cheader { — moz-transform: rotate(30deg);
— o-transform: rotate(30deg);
— webkit-transform: rotate(30deg) }
Преобразование scale позволяет изменить масштаб элемента Web-страницы по горизонтали и вертикали, растянув его или сжав:
scale(<масштаб 1>[, <масштаб 2>])
Если указано одно значение, оно задает масштаб и по горизонтали, и по вертикали. Если указаны два значения, первое задает масштаб по горизонтали, второе — по вертикали. Значения больше 1 задают увеличение масштаба (растяжение), а значения меньше 1 — уменьшение (сжатие); значение 1 оставляет масштаб без изменений.
Здесь увеличиваем масштаб контейнера cheader вдвое по горизонтали и вертикали, тем самым растягивая его:
#cheader { — moz-transform: scale(2);
— o-transform: scale(2);
— webkit-transform: scale(2) }
А здесь увеличиваем масштаб контейнера cheader вдвое по горизонтали и уменьшаем его вдвое по вертикали:
#cheader { — moz-transform: scale(2, 0.5);
— o-transform: scale(2, 0.5);
— webkit-transform: scale(2, 0.5) }
Преобразования scaleX и scaleY позволяют изменить масштаб элемента Web-страницы, соответственно, только по горизонтали и только по вертикали:
scaleX|scaleY(<масштаб>)
#cheader { — moz-transform: scaleX(2);
— o-transform: scaleX(2);
— webkit-transform: scaleX(2) }
Преобразование skew позволяет сдвинуть элемент Web-страницы по горизонтальной и вертикальной оси на заданный угол, тем самым "скособочив" его:
skew(<угол 1>[, <угол 2>])
Если указано одно значение, оно задает угол сдвига и по горизонтальной, и по вертикальной оси. Если указаны два значения, первое задает угол сдвига по горизонтальной, второе — по вертикальной оси. Углы могут быть заданы в любых единицах измерения, описанных в начале этого раздела.
Сдвигаем контейнер cheader по горизонтальной оси на 10º. По вертикальной оси он сдвинут не будет, поскольку мы задали угол сдвига 0º:
#cheader { — moz-transform: skew(10deg, 0deg);
— o-transform: skew(10deg, 0deg);
— webkit-transform: skew(10deg, 0deg) }
Преобразования skewX и skewY позволяют сдвинуть элемент Web-страницы, соответственно, только по горизонтальной и только по вертикальной оси.
Пример:
skewX|skewY(<угол>)
#cheader { — moz-transform: skewX(10deg);
— o-transform: skewX(10deg);
— webkit-transform: skewX(10deg) }
Преобразование translate позволяет сместить элемент Web-страницы по горизонтальной и вертикальной оси на заданное расстояние:
translate(<расстояние 1>[, <расстояние 2>])
Если указано одно значение, оно задает расстояние для смещения и по горизонтальной, и по вертикальной оси. Если указаны два значения, первое задает расстояние для смещения по горизонтальной, второе — по вертикальной оси. Расстояния могут быть заданы в любых единицах измерения, поддерживаемых CSS.
Смещаем контейнер cheader на 5 мм по горизонтальной оси и на 2 мм по вертикальной:
#cheader { — moz-transform: translate(5mm, 2mm);
— o-transform: translate(5mm, 2mm);
— webkit-transform: translate(5mm, 2mm) }
Преобразования translateX и translateY позволяют сместить элемент Web-страницы, соответственно, только по горизонтальной и только по вертикальной оси.
Смещаем контейнер cheader на 2 мм по вертикальной оси:
translateX|translateY(<расстояние>)
#cheader { — moz-transform: translateY(2mm);
— o-transform: translateY(2mm);
— webkit-transform: translateY(2mm) }
Мы можем подвергнуть элемент Web-страницы сразу нескольким преобразованиям. Для этого следует записать эти преобразования одно за другим, разделив их пробелами. Преобразования будут применяться к элементу в том порядке, в котором они записаны.
Пример:
#cheader { — moz-transform: skewX(10deg) translateY(2mm);
— o-transform: skewX(10deg) translateY(2mm);
— webkit-transform: skewX(10deg) translateY(2mm) }
Здесь мы подвергаем контейнер cheader сначала сдвигу по горизонтальной оси на 10º, а потом — смещению по вертикальной оси на 2 мм.
По умолчанию все преобразования выполняются относительно центра элемента Web-страницы. Так, если мы повернем элемент на какой-то угол, он повернется относительно своего центра.
