1.3 Множественные фоны и обводка
Будут использоваться псевдоэлементы :after и :before.
:after - псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. Псевдоэлемент ::after работает совместно со свойством content.
Псевдоэлемент ::before применяется для отображения желаемого контента до элемента, к которому он добавляется. Работает совместно со свойством content.
Для ::after и ::before характерны следующие особенности.
1. При добавлении ::after или ::before к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
2. При добавлении ::after или ::before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
Синтаксис:
элемент::after { content: "текст" }
display - свойство, которое определяет, как элемент должен быть показан в документе. Значения:
block - элемент показывается как блочный.
inline - элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
none - временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.
Использование псевдо-элементов CSS 2.1 дает возможность задействовать 3 уровня для фона, 2 изображения с фиксированными размерами и множественные сложные обводки для одного элемента HTML. Данный метод существенно расширяет возможности оформления веб страниц для всех браузеров, которые поддерживают псевдо-элементы CSS 2.1 с позиционированием.
|
Рис.2 |
Создание псевдо-элементов CSS (:before и :after) и работа с ними похожа на то, как организуется работа с вложенными элементами HTML внутри целевого элемента. Но с одним существенным преимуществом - все производится вне семантики, без использования вложенных элементов HTML.
Для организации множественных фонов и/или обводок псевдо-элементы сдвигаются за контент и прикрепляются в нужной точке элемента HTML с помощью абсолютного позиционирования.
|
Рис. 3 |
Псевдо-элемент не содержит реального контента и позиционируется абсолютно. Таким образом, он может быть растянут над любой областью "родительского" элемента без влияния на контент. Для этого можно использовать комбинацию свойств top, right, bottom, left, width и height.
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
Псевдо-элемент позиционируется на соответствующей дистанции от границы элемента, помещается под слой контента с помощью отрицательного значения свойства z-index, и ему назначаются обводка и фон такие, какие нужно. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index.
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}