|
||||
|
ПРИЛОЖЕНИЕРасширения 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, посчитав их ненужными.
В настоящем приложении мы рассмотрим некоторые расширения 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).
Здесь мы задаем для контейнера 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.
Здесь мы задаем для пунктов "внешних" списков, формирующих полосу навигации, рамки со скругленными верхними углами. Радиус скругления их по горизонтали будет 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 иллюстрирует пример.
Здесь мы задаем для всех фрагментов текста, помеченных тегом <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 иллюстрирует пример.
Задаем для контейнера cmain ширину колонок в 300 пикселов. Расширения CSS — moz-column-gap (Firefox) и — webkit-column-gap (Web-обозреватели на программном ядре Webkit) задают ширину пространства между колонками: — moz-column-gap|-webkit-column-gap: <ширина пространства между колонками>|normal Значение normal задает ширину пространства между колонками по умолчанию. Ее величина зависит от Web-обозревателя. Листинг П5 иллюстрирует пример.
В листинге П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 иллюстрирует пример.
Теперь между колонками в контейнере 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 иллюстрирует пример.
Теперь между колонками в контейнере cmain будут проведены тонкие точечные линии. Расширения CSS — moz-column-rule-color (Firefox) и — webkit-column-rule-color (Web-обозреватели на программном ядре Webkit) задают цвет линий, которыми колонки будут отделяться друг от друга: — moz-column-rule-color|-webkit-column-rule-color: <цвет линий между колонками> Листинг П8 иллюстрирует пример.
Теперь между колонками в контейнере cmain будут проведены тонкие точечные линии светло-синего цвета. Расширения CSS — moz-column-rule (Firefox) и — webkit-column-rule (Web- обозреватели на программном ядре Webkit) задают сразу все параметры линий, которыми колонки будут отделяться друг от друга: — moz-column-rule|-webkit-column-rule: <толщина> <стиль> <цвет> Листинг П9 иллюстрирует пример.
К сожалению, 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 иллюстрирует пример.
Здесь мы поворачиваем контейнер cheader на 30? относительно точки, которая находится в середине его левого края. Мы задали в качестве координаты точки, относительно которой будут выполняться преобразования (в том числе и поворот), значение left (левый край контейнера) — это ее координата по горизонтали; в качестве вертикальной координаты, поскольку мы ее не указали, будет принята середина контейнера. Еще один пример иллюстрирует листинг П11.
Теперь контейнер cheader будет повернут на 30? относительно своего нижнего правого угла. |
|
||
Главная | В избранное | Наш E-MAIL | Добавить материал | Нашёл ошибку | Наверх |
||||
|