• Многоцветные рамки
  • Рамки со скругленными углами
  • Выделение со скругленными углами
  • Многоколоночная верстка
  • Преобразования CSS
  • ПРИЛОЖЕНИЕ

    Расширения CSS 

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

    — moz- обозначает Mozilla Firefox;

    — o- обозначает Opera;

    — webkit- обозначает Web-обозреватели, основанные на программном ядре Webkit. Самые известные среди них — Google Chrome и Apple Safari.

    Постараемся их запомнить. Расширения CSS позволят нам задействовать возможности Web-обозревателя, которые не поддерживаются стандартом CSS или появятся только в будущей его версии. Однако, во-первых, расширения CSS зачастую поддерживаются только одним Web-обозревателем; другие Web-обозреватели могут и не "знать" об их существовании. Во-вторых, разработчики Web-обозревателя в любой момент могут лишить свое детище поддержки тех или иных расширений CSS, посчитав их ненужными.

    НА ЗАМЕТКУ

    На Web-странице https://developer.mozilla.org/en/CSS/CSS_transitions описаны расширения CSS, предназначенные для создания анимационных эффектов — так называемых переходов CSS. Тем не менее, насколько удалось выяснить автору, последние версии Firefox их не поддерживают, хотя, по идее, должны. Вероятно, это как раз случай, когда разработчики Firefox посчитали эту возможность ненужной и удалили ее поддержку в очередной версии программы.

    Вполне возможно, что из описанных автором расширений CSS некоторые уже не поддерживаются.

    В настоящем приложении мы рассмотрим некоторые расширения CSS, самые полезные для Web-дизайнеров, на взгляд автора.

    Многоцветные рамки

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

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

    Многоцветные рамки создают с помощью расширений CSS — moz-border-left- colors, — moz-border-top-colors, — moz-border-right-colors и — moz-border-bottom- colors. Они задают цвета, соответственно, для левой, верхней, правой и нижней стороны рамок.

    — moz-border-left-colors|-moz-border-top-colors|-moz-border-right-colors|

    — moz-border-border-colors: <набор цветов, разделенных пробелами>|none

    Значение none убирает "многоцветье" у соответствующей стороны рамки. Это значение по умолчанию.

    Данные расширения CSS поддерживаются только Firefox и не включены в стандарт CSS.

    Пример:

    #cheader { width: 1010px;

    padding: 0 20px;

    border-bottom: medium dotted;

    — moz-border-bottom-colors: #B1BEC6 #F8F8F8 #B1BEC6 }

    Здесь мы задаем для контейнера cheader рамку, состоящую из одной нижней стороны, средней толщины, с тремя цветами.

    Рамки со скругленными углами

    Рамки с прямоугольными углами встречаются очень часто и уже успели намозолить глаза. Вот рамки со скругленными углами — другое дело!

    Расширения CSS — moz-border-radius-topleft (Firefox), border-top-left-radius (Opera и стандарт CSS 3) и — webkit-border-top-left-radius (Web-обозреватели на программном ядре Webkit) задают радиус скругления верхнего левого угла рамки:

    — moz-border-radius-topleft|border-top-left-radius|

    — webkit-border-top-left-radius: <значение 1> [<значение 2>]

    Если указано одно значение, оно задаст радиус скругления и по горизонтали, и по вертикали. Если указаны два значения, то первое задаст радиус скругления по горизонтали, а второе — по вертикали, создавая тем самым скругление эллиптической формы. Радиус скругления может быть задан в любой единице измерения, поддерживаемой CSS.

    Для указания радиуса скругления остальных углов рамки предназначены расширения CSS, перечисленные далее.

    — moz-border-radius-topright (Firefox), border-top-right-radius (Opera и стандарт CSS 3) и — webkit-border-top-right-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления верхнего правого угла рамки.

    — moz-border-radius-bottomright (Firefox), border-bottom-right-radius (Opera и стандарт CSS 3) и — webkit-border-bottom-right-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления нижнего правого угла рамки.

    — moz-border-radius-bottomleft (Firefox), border-bottom-left-radius (Opera и

    стандарт CSS 3) и — webkit-border-bottom-left-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления нижнего левого угла рамки.

    Формат их использования такой же, как у расширений CSS, описанных в начале этого раздела (листинг П1).

    Листинг П1

    #cheader { width: 1010px;

    padding: 0 20px;

    border-bottom: medium dotted;

    — moz-border-radius-bottomleft: 2px;

    — moz-border-radius-bottomright: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;

    — webkit-border-bottom-left-radius: 2px;

    — webkit-border-bottom-right-radius: 2px }

    Здесь мы задаем для контейнера cheader рамку, состоящую из одной нижней стороны, имеющую радиусы скругления нижнего левого и нижнего правого углов, равные двум пикселам, сразу для всех Web-обозревателей, поддерживающих эту возможность. Таким образом, и Firefox, и Opera, и Web-обозреватели на программном ядре Webkit выведут эти углы рамки скругленными.

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

    — moz-border-radius|border-radius|-webkit-border-radius:

    <позиция 1 значение 1>[/<позиция 1 значение 2>] [<позиция 2 значение 1>[/<позиция 2 значение 2>][<позиция 3 значение 1>[/<позиция 3 значение 2>] [<позиция 4 значение 1>[/<позиция 4 значение 2>]]]]

    Как видим, каждая позиция может содержать как одно значение, так и пару значений, разделенных слэшем /. Если она содержит одно значение, это значение задаст радиус скругления и по горизонтали, и по вертикали. Если же в позиции указать два значения, разделив их слэшем, первое задаст радиус скругления по горизонтали, второе — по вертикали.

    Кроме того, можно указать от одной до четырех позиций.

    — Если указана одна позиция, она задаст радиус скругления всех углов рамки.

    — Если указаны две позиции, первая задаст радиус скругления верхнего левого и нижнего правого углов рамки, а вторая — верхнего правого и нижнего левого углов.

    — Если указаны три позиции, первая задаст радиус скругления верхнего левого угла рамки, вторая — верхнего правого и нижнего левого, а третья — нижнего правого угла.

    — Если указаны четыре позиции, первая задаст радиус скругления верхнего левого угла рамки, вторая — верхнего правого, третья — нижнего правого, а четвертая — нижнего левого угла.

    Пример иллюстрирует листинг П2.

    Листинг П2

    #navbar LI { padding: 5px 10px;

    margin: 10px 0px;

    border: thin solid #B1BEC6;

    — moz-border-radius: 3px/1px 3px/1px 0px 0px;

    border-radius: 3px/1px 3px/1px 0px 0px;

    — webkit-border-radius: 3px/1px 3px/1px 0px 0px;

    cursor: pointer }

    Здесь мы задаем для пунктов "внешних" списков, формирующих полосу навигации, рамки со скругленными верхними углами. Радиус скругления их по горизонтали будет 3 пиксела, а по вертикали — 1 пиксел.

    Выделение со скругленными углами

    Сказавший "а" да скажет "б"! Позволивший создавать рамки со скругленными углами да позволит скруглять углы у выделения!

    Расширение CSS — moz-outline-radius-topleft задает радиус скругления верхнего левого угла выделения:

    — moz-outline-radius-topleft: <значение>

    Радиус скругления может быть задан в любой единице измерения, поддерживаемой CSS.

    Для указания радиуса скругления остальных углов выделения применяются расширения CSS, перечисленные далее.

    — moz-outline-radius-topright — радиус скругления верхнего правого угла выделения.

    — moz-outline-radius-bottomright — радиус скругления нижнего правого угла выделения.

    — moz-outline-radius-bottomleft — радиус скругления нижнего левого угла выделения.

    Формат их использования такой же, как у расширений CSS, описанных в начале этого раздела.

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

    Листинг П3

    DFN { outline: thin dotted #B1BEC6;

    — moz-outline-radius-topleft: 3px;

    — moz-outline-radius-topright: 3px;

    — moz-outline-radius-bottomright: 3px;

    — moz-outline-radius-bottomleft: 3px }

    Здесь мы задаем для всех фрагментов текста, помеченных тегом <DFN>, выделение, все углы которого имеют радиус скругления 3 пиксела.

    Расширение CSS — moz-outline-radius позволяет задать радиусы скругления сразу для всех углов выделения:

    — moz-outline-radius: <значение 1> [<значение 2> [<значение 3>[<значение 4>]]]|inherit

    Здесь можно указать от одного до четырех значений.

    — Если указано одно значение, оно задаст радиус скругления всех углов выделения.

    — Если указаны два значения, первое задаст радиус скругления верхнего левого и нижнего правого углов выделения, а второе — верхнего правого и нижнего левого углов.

    — Если указаны три значения, первое задаст радиус скругления верхнего левого угла выделения, второе — верхнего правого и нижнего левого, а третье — нижнего правого угла.

    — Если указаны четыре значения, первое задаст радиус скругления верхнего левого угла выделения, второе — верхнего правого, третье — нижнего правого, а четвертое — нижнего левого угла.

    Эти расширения CSS поддерживаются только Firefox и не включены в стандарт CSS 3.

    Пример:

    DFN { outline: thin dotted #B1BEC6;

    — moz-outline-radius: 3px }

    Многоколоночная верстка

    Многоколоночная верстка — это то, чего давно не хватало в Web-дизайне. Отдельные энтузиасты уже давно реализовывали ее с помощью таблиц или контейнеров.

    Но теперь у них есть "законные" средства разбить текст на произвольное число колонок, воспользовавшись особыми расширениями CSS.

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

    — moz-column-count|-webkit-column-count: <число колонок>|auto

    Реальное число колонок, которое выведет Web-обозреватель, может быть другим; например, на Web-странице может не оказаться места для указанного числа колонок или для размещения текста может потребоваться меньше колонок, чем было указано.

    Значение auto, судя по всему, отменяет многоколоночную верстку. Пример:

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

    — webkit-column-count: 2 }

    Здесь мы задаем для контейнера cmain две колонки.

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

    — moz-column-width|-webkit-column-width: <ширина колонок>|auto

    Реальная ширина колонок, установленная Web-обозревателем, может быть больше или меньше и будет зависеть от ширины элемента Web-страницы, содержимое которого верстается в несколько колонок.

    Значение 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-страницы. Так, если мы повернем элемент на какой-то угол, он повернется относительно своего центра. Но мы можем указать другую точку, относительно которой будут выполняться все последующие преобразования. Для этого служат расширения CSS — moz-transform-origin (Firefox), — o-transform-origin (Opera) и — webkit-transform-origin (Web-обозреватели на программном ядре Webkit):

    — moz-transform-origin|-o-transform-origin|-webkit-transform-origin:<координата>|left|center|right [<координата>|top|center|bottom]

    Если задано одно значение, оно укажет координату точки, относительно которой будут выполняться преобразования, по горизонтальной оси; координатой этой точки по вертикальной оси станет центр элемента Web-страницы. Если указаны два значения, первое задаст координату точки по горизонтальной оси, второе — по вертикальной.

    Само значение координаты может быть задано в любой абсолютной или относительной единице измерения, поддерживаемой CSS. Также можно указать значения left (левый край элемента Web-страницы), center (центр), right (правый край), top (верхний край) и bottom (нижний край).

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

    Листинг П10

    #cheader { — moz-transform: rotate(30deg);

    — o-transform: rotate(30deg);

    — webkit-transform: rotate(30deg);

    — moz-transform-origin: left;

    — o-transform-origin: left;

    — webkit-transform-origin: left }

    Здесь мы поворачиваем контейнер cheader на 30? относительно точки, которая находится в середине его левого края. Мы задали в качестве координаты точки, относительно которой будут выполняться преобразования (в том числе и поворот), значение left (левый край контейнера) — это ее координата по горизонтали; в качестве вертикальной координаты, поскольку мы ее не указали, будет принята середина контейнера.

    Еще один пример иллюстрирует листинг П11.

    Листинг П11

    #cheader { — moz-transform: rotate(30deg);

    — o-transform: rotate(30deg);

    — webkit-transform: rotate(30deg);

    — moz-transform-origin: right bottom;

    — o-transform-origin: right bottom;

    — webkit-transform-origin: right bottom }

    Теперь контейнер cheader будет повернут на 30? относительно своего нижнего правого угла.









    Главная | В избранное | Наш E-MAIL | Добавить материал | Нашёл ошибку | Наверх