Многоцветные рамки создают с помощью расширений 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-обозревателем, может быть больше или меньше и будет зависеть от ширины элемента
